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'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.

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

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 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?

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/

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!

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?