r/reactjs

I'm building an internal dashboard on Vite and React 19, and every fetch inside a useEffect fires twice in dev. I know it's intentional and that it doesn't happen in the production build, so I'm not looking to switch strict mode off. The problem is that our API rate limits on a per minute window and I get locked out for a couple of minutes maybe a third of the sessions i work in.

How did you get past this without moving every call into a data fetching library?

I've been exploring the TanStack ecosystem for React a lot these days. Starting with TanStack Router, Query, and Virtual, and now the framework TanStack Start. Honestly, I could only use the Router and Query in the production app so far, and the rest of it was for my learning and teaching.

I also use Next.js heavily, but with TanStack I find a huge paradigm shift. I do not have to think from the RSC side heavily; I do not have to use shortcut methods like useEffct() to handle data at the client side, and managing server state and caching seems to feel a lot simpler.

This discussion is not about putting one React framework ahead of another one. Rather, would like to know what your experience so far has been with TanStack? Do you have any comparison studies? Do you use it in production? What are the learnings?

Would love to learn and discuss. Thanks.

Hey everyone,

I've been learning React for around a month now and I just finished my first proper React project, StudyFlow. Keep in mind I want to become a Software Engineer in the future and want to reach a goal of becoming a Full-Stack Web Developer first.

It's a study session tracker where you can create study sessions, use a stopwatch, and keep track of your previous sessions.

I built it to actually put what I've learned with React into practice, instead of just following tutorials. I hate falling into tutorial hell and I always like to say that you don't learn anything until you get your hands dirty.

I'd love to get some honest feedback from people who know React better than me.

What do you think of the UI? Is there anything obvious I could improve? Are there things in the code that I should be doing differently?

I'm also interested in knowing what you think I should learn next. I'm planning to start learning backend development after this.

Live site: https://hussbtwyt.github.io/studyflow/

GitHub: https://github.com/HussBTWYT/studyflow

Any feedback is appreciated :)

- Module Federation provides better performance, but no strong runtime isolation.
- iframes provide strong isolation, making independent deployment more reliable.
- This matters especially for large, legacy codebases where enforcing boundaries in code is difficult.
- A typed communication SDK, routing, and smart chunk splitting can reduce the performance cost.
- For large legacy applications, iframes can be a better tradeoff than MF

Consider a typical use case where you want to track an error or just display an error toast after a query hook (e.g. TanstackQuery or RTK-query) fails.

Using an effect:

const { error } = useSomeQuery();
  useEffect(() => {
    if (!error) {
      return;
    }
    trackError(error); // or toast(getErrorMessage(error))
  }, [error]);

Now, according to the "You might not need an effect" article, you can also perform an action when some state changes by using auxiliary state, something like this:

const { error } = useSomeQuery();
const [prevError, setPrevError] = useState(error);

if (error !== prevError) {
  trackError(error);
  setPrevError(error);
}

My understanding here is that using auxiliary state here doesn't give you much because in this use case the additional render cycle doesn't result in stale UI.

Regardless, I wanted to get a sense on what approach is preferred by the community. I see this kind of things very often in the codebases I work on and on the other hand, I keep hearing people saying they only have a few effects in their (presumably large) projects, so perhaps the patterns in my company are not the best.

Genuinely asking—does the term Frontend Developer even exist in the job market anymore?

With AI changing the industry so quickly, I’ve started noticing that I barely see job listings specifically looking for frontend developers. Instead, most companies seem to be hiring Full Stack Developers and expecting them to handle everything from UI and React to backend, APIs, databases, and deployment.

It feels like companies want the skills of a frontend developer plus backend development, but without necessarily increasing the compensation accordingly.

So, in 2026, is Frontend Developer still a viable career path, or is becoming a Full Stack Developer basically becoming the new standard?

Is it even a way to get any kind of proper running pages/projects...

I’ve been working with React/Next.js for a while and recently completed two internships, including working on a US-based NGO project.

That experience taught me a lot about real-world codebases, Git/GitHub, UI work, debugging, and collaborating with a development team.

I’m now trying to improve further and would love to hear from experienced React developers here:

What skills or projects do you think make someone genuinely stand out when moving from internship-level experience to a full-time React role?
I can share my resume if anyone can review it. Thankyou.

I’ve been looking for a platform where you can practice React questions the way you practice coding problems on LeetCode, but I couldn’t find one that really focuses on React.

I know you might be thinking about platforms like Frontend Mentor or GreatFrontEnd. They’re great, but one thing I felt was missing is proper test suites that you can run against your code. Without test cases, it’s difficult to know whether your solution actually works correctly or whether you’re following an approach that would be considered good practice in an interview.

So, I created ReactGrind — a platform where you can solve React coding questions, write your own code, and run test cases to see whether your solution passes them all.

I’m still regularly adding new features and challenges, so I’d love to know: What features would you most want to see in a platform like this?

Right now, ReactGrind has a “Get Hints” button that you can use when you’re stuck but don’t want to look at the full solution yet.

One thing I’m considering is whether hints should be limited per question. Currently, they’re unlimited.

Would you prefer unlimited hints, or should there be a limit on how many hints you can use for each question?

Right now it only has 30+ problems but I keep adding on a daily basis

Before anyone says I lied about my experience, I was upfront about my experience on my resume. I know very little about react and next.js and I’d like to brush up on it.

Does anyone have any resources on it? Best tutorials?

Thank you.

Ran into this explaining React rendering to someone recently and realized how often it trips people up even after they've been writing React a while.

function Parent() {
  const [count, setCount] = useState(0);
  return (
    <>
      <button onClick={() => setCount(c => c + 1)}>{count}</button>
      <ExpensiveChild />
    </>
  );
}

ExpensiveChild takes no props at all. Click the button and it re-renders anyway, every single time. No props changed, nothing it reads changed, it just runs again.

The reason: React doesn't check "did this component's inputs change" before deciding to re-render. When state updates, React re-renders that component and everything below it in the tree by default, full stop. Whether a child actually needed to update isn't part of that decision at all.

React.memo is what actually opts a component into that check, it wraps the component and does a shallow prop comparison before deciding to skip the render. Without it, "no props" and "props didn't change" both mean nothing, React re-runs the function anyway.

Where it gets messier: memo alone doesn't save you if you're passing an inline function or object as a prop, since those are new references every render and memo's shallow comparison sees them as "changed" regardless. You end up needing useCallback/useMemo on the parent side just to make memo's comparison actually mean something.

Curious how many people actually reach for memo proactively vs only after profiling shows a real problem. What's the actual signal that told you a component needed it?

Currently I have to create a new project, my first option is react router (declarative mode). My entire project will live behind the login page

what are you using?

• RR framework mode
• RR data mode
• RR declarative mode
• tanstack router
• wouter

For the technical interview, would it make sense to give the candidate these two tasks?

1. FizzBuzz
2. Build a To Do List from scratch without using AI. They can use Google to look up syntax, keywords.

My main goal with a simple CRUD To Do List task is I want to see they understand how a basic distributed system works for example, how the frontend, backend, and database communicate and work together.

Ngl, I belive if you can build a CRUD To Do List without AI, you are kinda ready to work as a web dev as a jr. , then they can grind learning System Design and and progress to become mid and senior years later...

📚 It's been way too long since my last blogpost. Today, I'm continuing my TanStack Router series with a pattern that I've been teaching in my workshops for over a year:

How to keep prefetches in sync between route loaders and components

Which one do you choose and why?

Share your reasons. Maybe someone will find a useful tip 👀

Put together a custom form validation system in React instead of reaching for Formik or React Hook Form, mostly to avoid the bundle size and have full control over async validation timing. Handles nested field structures and cross-field validation without much boilerplate. Curious if others have gone this route too, and whether it's ended up being worth maintaining versus just adopting one of the existing libraries long term.

Hey r/reactjs!

As web accessibility consultants and manual WCAG auditors, we work with dev teams every week whose apps fail accessibility audits due to the same recurring UI component issues—focus traps failing in modals, broken ARIA attributes in dropdowns, or inconsistent keyboard navigation in tabs. While headless libraries exist, many popular UI kits still fail screen reader audits out of the box when tested against real assistive technology.

So we built A11y UI (ui.a11ypros.com) — a free, open-source collection of React components designed from the ground up to pass WCAG 2.2 AA compliance.

Live Demo & Links

• Live Component Library: https://ui.a11ypros.com
• GitHub Repository: https://github.com/A11YPros/a11y-ui

Key Features

• Assistive Technology Verified: Every component is manually tested against VoiceOver (macOS/iOS), Talkback(Android), NVDA (Windows), and JAWS (Windows).

• Keyboard Navigation First: Out-of-the-box focus management (Tab, Shift+Tab, Escape key dismissal, Arrow key selection).

• Tailwind & CSS Friendly: Clean, accessible DOM markup that integrates easily into existing design systems.

• 100% Native Code: Pure React components with zero overlay widgets or heavy third-party runtime scripts.

Current Status & Roadmap

The core component primitives are completely free and open-source. We are actively working on adding more complex patterns (such as accessible DatePickers, Calendars, and Comboboxes).

We’d love for the community to test the components, break them, report bugs, or request patterns you’re struggling to make accessible!

Let us know what you think or what components you'd like to see added next!

Been working on a small state management library for React that aims to cut down on boilerplate compared to Redux while staying more predictable than Context alone. It's TypeScript-first, has a tiny bundle size, and hooks straight into function components without extra providers wrapping everything. Still early days, so I'd love feedback on the API design and whether the tradeoffs make sense for real-world use.