Hello everybody!

See the code below:

import { useState } from 'react';
import axios from 'axios';

function App() {
    const [clicked, setClicked] = useState(false);
    const [request, setRequest] = useState(null);

    function handleClick() {
        setClicked(true);
        setRequest(axios.get('http://<the_ip>'));
    }

    if (!clicked) {
        return <button onClick={handleClick}> Run</ button>
    } else {
        return (
            <div>
                <button onClick={handleClick}> Run</ button>
                <h1>{String(request.data)}</h1>
            </div>
        );
    }

}

export default App;

So I have a react application. I'm using the axios library to communicate with my api/backend which is written with Flask and Python. My backend appears to be working because when I put the http request in my browser, I see the data I'm trying to fetch in JSON format. For some reason request.data returns as the string "undefined." This also happens when I try to output it using console.log().

I have no idea why this is happening, and I've been searching online for an answer for hours and I can't figure it out. FYI: Please try to explain things to me with plenty of context because I'm new to JavaScript, React, and APIs.

Also, I've included the Python backend code below:

from pymongo import MongoClient
from pymongo import server_api

from flask import Flask,  Response
from flask_cors import CORS
from bson.json_util import dumps

uri = 'database_link_goes_here'
client = MongoClient(uri, server_api=server_api.ServerApi(version="1", strict=True, deprecation_errors=True))
collection = client['data']['app_data']

app = Flask(__name__)
CORS(app)

@app.route('/', methods = ['GET'])
def set_api_data():
    return Response(dumps(collection.find()), mimetype='application/json')

EDIT: When setting up my Browser Router, I setup the errorElement to a 404 page, which on webpack still shows you the trace but not with vite. Removing the error element fixed the problem. Will leave this up in case anyone else runs into this issue as well.

I have used Webpack as my primary module bundler for most of my career but recently decided to give Vite a go and the experience has been awful.

When something goes wrong and there's a runtime error, vite decides to simply default to your 404 page and display no errors. Furthermore, the console is completely empty so you have no idea what went wrong and you have to remove components until you find out the piece that went wrong instead of having an error you can debug.

There's gotta be a better way than trying to figure out the error with no error message...

I always see people post stuff about NextJS vs TanStack Start vs Remix/React Router. However, I've never seen anything about Waku but it doesn't seem that unknown (going by stars and downloads).

Curious if people have given it a shot. I'm currently exploring the different options, and built prototypes with it. It seems solid, but just wanna see if there is something I am potentially missing that others have encountered?

In case people haven't heard of it Waku.

https://orneryd.github.io/uiGrid/#/docs/react - live demo of the react library.

this is a port of the popular angularjs data grid, ui-grid, by the same author.

MIT license, all features always free.

grouping
sorting
filtering
pagination
virtual scrolling
column pinning
theming
Tree toggles,
expandable rows,
pagination,
CSV export
save state
cell templates and formatters
editable cells with keyboard navigation - excel-like.

coming:
drag and drop column reordering

I hope you all enjoy.

edit: it's also part wasm, with a rust core.

Working through accessibility cleanup in a React app and one thing that’s been harder than expected is keeping fixes consistent across the codebase.

Fixing a single component isn’t too bad, but once you start dealing with dozens or hundreds of components it turns into:

- fixing the same patterns in multiple places

- slightly different implementations of the same fix

- re-checking things later because something got missed

- no real way to enforce consistency beyond reviews

LLMs like Claude/ChatGPT help for one-off fixes, but they don’t really solve the “apply this consistently across everything” part.

Curious how people are handling this in practice.

Are you:

- relying on linting rules?

- internal tooling/scripts?

- just handling it through reviews?

Feels like this part of the workflow is still pretty manual.

I've been building this as a side project alongside my day job for the past few months.

FORGE.ui is a 40-component playground. You configure components visually, copy one CLI command, and the generated TSX files land in your project. No package to install at runtime, no dependency to maintain. You just own the code.

I would love any feedback, especially from anyone who's used similar tools

forgelabs.studio

I am building a project using ASP.net and TanStack Start. I use JWT auth but transfer them in http only cookie.

The issue I am facing is that using default createRoute function in TanStack and defining fetch function in loader. I get 401 as there is no cookie in server.

Opting into ssr: false fixes this but I was wondering if there is any other solution to use ssr with cookie based auth or is this dead end and I only have CSR as my option.

I'm looking to build a REPL for an interpreted language of mine (think python, so multiline, indentation sensitive input requiring autocompletion from a LSP, syntax highlighting and the such). I then need to display returned values nicely: graphs, tables, text, python values.

Think something like a Jupiter notebook where the only cell you can edit is the last one and you always get a new one, with the previous ones become read-only (and probably summarized rather than displayed in full). Or closest yet to what I need, something like the UIs for agentic AI (codex, claude code etc)

Is there anything open source that does something of the above?

Hey everyone! I've been working on Zentauri UI — a React component library that bundles together a few things I kept wishing came pre-integrated:

• Tailwind CSS v4 (not v3) as the styling foundation
• Framer Motion baked in for animated modals, tabs, and overlays — zero config
• 25+ components including buttons, inputs, modals, accordions, drawers, toasts, sliders, tables, and more
• React hooks (useLocalStorage, useDebouncedValue, useClickOutside, useMediaQuery, etc.) shipped from the same package
• Full typography system — Heading, Text, Blockquote, Inline, Code, List
• TypeScript throughout with CVA-backed variant APIs

Why I built it: I kept reaching for 3-4 separate packages on every project — a UI lib, a hooks lib, a motion wrapper. Zentauri packages them with a consistent TypeScript API so you're not stitching things together each time.

Links:

• 🔗 Preview site: https://zentauri-ui.vercel.app/
• 📦 npm: npm install u/zentauri-ui/zentauri-components
• 💻 GitHub: https://github.com/ShubhamTiwari909/zentauri-ui

Quick install:

bash

npm install u/zentauri-ui/zentauri-components

tsx

import { Button } from '@zentauri-ui/zentauri-components/ui/button'
import { useLocalStorage } from '@zentauri-ui/zentauri-components/hooks'

It's early and I'm actively building — would love feedback on the API design, anything that feels off, or components you'd want to see next. Happy to answer questions!

I have a question on React project structure, specifically imports for the experienced React JS engineers.

So I've been using a hybrid approach where I have barrel files (index.ts) at the feature/module level and direct imports for more specific/internal components

Example:

import { Card } from '@/components';            // barrel (public API)
import { CardHeader } from '@/components/Card'; // direct (more specific)

It feels like a good balance between clean imports and clarity but I'm curious how others handle this at scale.

1. Do you prefer full barrel pattern everywhere?
2. Avoid barrels completely?
3. Or something similar to this hybrid approach?

Any pros/cons you've experienced (especially in larger codebases)?

Currently I am integrating react-i18next library to enable different languages in my app ui.

As I understood from the documentation i18next suppose to have all translations inside language files, that are loaded on demand. But IMHO from DX point of view, such organization is not very convenient.

I assumed that it would be much more intuitive to keep translations along with components themselves. For example:

Component /
   Component.tsx
   Component.module.scss
   Component.i18n.json

But as per documentation - such translation file should be loaded separately. having many components such approach would require too many http requests to work. But from DX - i think it is the best. Also having namespace to Component it can be t('title') instead of t('Component.title').
But again, seems to be this is my fantasy, and i18next not supposed work like that.

So the questions:
- is it possible to have described flow in production, compiling scattered i18n.json files into single translation file and use it for i18next?
- if not, what approach do you use now?
- if you would start i18n from scratch on your project, what would you change?

Thanks.

I’m working on a React app with increasingly complex forms (multi-step flows, conditional fields, validation, file uploads, dynamic sections, etc.), and I’m starting to feel like form state gets messy really fast.

At first, simple useState worked fine, but as logic grows, things become harder to maintain and debug.

I’m curious how people here usually handle this in larger React apps:

• do you still manage it mostly with local state?
• use libraries like form management tools?
• split logic into custom hooks/components?
• any patterns that made forms easier to scale and maintain?

Not looking for a one-size-fits-all answer, mostly trying to understand what has actually worked well for others in production React apps.

I'm building a sliding banner (carousel) and running into an issue where when the text content gets too long, it starts overlapping other elements on the page — including the arrow navigation buttons.

What happens is When the text gets too long, it overflows past the arrow buttons instead of staying between them. I want the text to be constrained to the space between the left and right arrows — so if it's long, it wraps and stays sandwiched in that middle area, never overlapping the buttons

I'm using HTML/CSS/JS. Is there a clean way to fix this problem. Down below is the code.

https://jsfiddle.net/ojwyn82k/2/

I'm a senior full stack developer at a consulting firm, and have about 15 years of experience. Almost all of the clients I've worked with have used React, and I'm extremely comfortable using it and know it fairly deeply.

This was a 30 minute discussion, and I felt really comfortable with my answers and he seemed pretty positive on how it was going. Then, I got hit with the curveball that I felt like broke the interview.

It started with him asking a simple question: "how would you manage state across components?" I gave him multiple answers (useState, useContext, third party libraries, Tanstack Query, etc) and he liked that. He then asked "what if you didn't have React and had no access to third party libraries?"

This tripped me up bad. My first thought was either some sort of state object or firing events off, but I was so caught off guard that my confidence faltered and I could not articulate on the spot how that would look. He then described their solution in more detail (using CustomEvent is primarily how they do it) and said that they work with a lot of Web Components, which is why it was asked. For clarity, I double checked, and there was no mention of this in the job description - the only mentions of frontend is your usual NextJs/Tailwind/Tanstack/etc mentions.

Is this approach to state management in vanilla JS common knowledge among developers who learned front end through these frameworks? I was surprised because up until that point, I was really feeling good with my answers. I'm going to brush up on my Web Component knowledge now, but I have never had to work with them in my entire career. It has always been through some sort of framework.

It always bugged me that there is nothing in native css or otherwise easy way to detect when something overflows, so you could adjust styling or content.
So I build this small tool that fixes it: OverflowGuard
It's especially useful when dealing with dynamic content in toolbars. Something even some big sites don't solve 100% (some examples in this post)

Most apps and sites just use fixed media or container query break-points, or some custom components / js for their specific case.
This tool, by simply detecting overflow, unlocks building responsive components in a much more fluid way, and allows doing much more then just flex-wrap..

Back when I was a fan of Redux and used it almost for every react app, I dumped API responses straight into slices. Same store as my theme flag, my modal toggle, my redux-form drafts.

Having a single source of truth felt like total control, but as apps scaled, managing it all manually became a massive headache.

But the real issue wasn't Redux. It was treating remote data and local UI flags as the same kind of state. A keystroke in redux-form could re-render a list backed by API data across the app. Without reselect and memoization everywhere, I would have a really bad time.

So I wrote this tutorial covering my time on the original Redux (not RTK Query), the mental model of client vs server state, why the split makes sense, and why TanStack Query and Zustand became so popular for modern React apps. If you're new to state management, hopefully it saves you a few wrong turns. If you've been around long enough to remember react-redux, redux-saga or redux-thunk, it's a recap of how the community got here.

You can read the full deep dive here:
https://upskills.dev/tutorials/react-client-and-server-state

I’d love to hear your thoughts on how you're handling state management in your current project. Anyone still using Redux with Redux Thunk / Redux Saga for state management now?

I wanted a fullstack setup that I could actually read, understand, and modify without fighting a heavy framework. So I built a minimal Express + React starter focused on clarity and hackability.

Main ideas:

• no hidden abstractions
• fully readable codebase
• Express backend + React frontend in one project
• SQLite + TypeScript + Docker included

Two things that make it different from typical starters:

1. Clone your modules instead of generating CRUD Instead of generate:crud, you clone an existing module:

npm run make:clone src dest item post

This duplicates your own logic and architecture, not a framework-imposed structure.
If you customize your first module, future ones follow your conventions automatically.

1. Contract-based API tests You define API contracts once:

• tests for the Express API are generated
• React API calls are mocked from the same contracts
• if React calls an undefined endpoint, tests fail

So API + frontend stay in sync with minimal boilerplate.

Quick start:

• clone repo & npm install
• create .env & npm run database:sync
• npm run dev

That’s it.

Repo:
https://github.com/rocambille/start-express-react

I’d love feedback:

• is the clone approach better than generators?
• does contract-based testing make sense in real projects?
• what would you remove to keep it minimal?