Best practices · Stacks and tools
React Best Practices
FreeA practical guide to writing React the way the React team recommends today. It covers components and purity, state, effects, performance with React Compiler, React 19 form actions, accessibility, testing and project hygiene, with short examples you can copy.
Written by Tauseef Fayyaz8 chapters, 36 practicesAbout 23 min31 quiz questionsReviewed 12 October 2026What you will learn
8 chapters · about 23 min
1Components and purityHow to shape components so React can render, re-render and optimize them safely. Purity is the rule everything else depends on.5 practices · 4 min
2State and data flowWhere state should live, how much of it you need, and how to update it so React notices. Most re-render bugs start here.5 practices · 4 min
3Effects, and when you do not need oneEffects are an escape hatch for syncing with systems outside React. This chapter shows when to use one and the common cases where you should not.4 practices · 3 min
- 1Use an effect only to sync with something outside React
- 2Return a cleanup from every effect that subscribes or starts work
- 3Keep dependency arrays honest and use useEffectEvent for non-reactive logic
- 4Fetch data through your framework, or guard effect fetches against races
4 in this chapterOpen this chapter4Performance and memoizationHow to keep React fast in 2026: let React Compiler memoize, measure before you optimize, and keep urgent updates responsive.5 practices · 3 min
5Forms and actions in React 19React 19 Actions handle pending state, errors and form resets for you. This chapter shows the hooks to use and how to keep mutations safe.5 practices · 3 min
6AccessibilityReact does not make an app accessible on its own. These practices cover semantic markup, labels, focus and how to check your work.4 practices · 2 min
7Testing React codeTests that give you confidence to refactor: test what users see and do, not how components are built inside.4 practices · 2 min
8Project hygieneHabits that keep a React codebase easy to work in as it grows: types, structure, Strict Mode and staying current.4 practices · 2 min
About this guide
These React best practices are written for developers who already know the basics and want to write React that stays fast, readable and easy to change. Every practice here is checked against the official React docs for React 19.3 and the stable React Compiler 1.0, so you will not find advice that only made sense in the class component or React 16 days.
Modern React rewards a few simple habits. Keep components pure. Keep state small and derive everything else. Reach for an effect only when you are syncing with something outside React. Let the compiler handle most memoization. Use form actions for mutations instead of wiring up loading flags by hand.
Each chapter below is a set of instructions you can apply today, with a short reason, a list of things to do and avoid, and a code example where it helps. Start with the first two chapters: components and state are where most React bugs and most slow screens begin.
If you are learning React for your first job or internship, use this page as a review list for your own projects. Pick one practice, apply it across your code, and notice how much simpler the result is.
Common questions
Do I still need useMemo and useCallback in React 19?
Mostly no, if you turn on React Compiler. The compiler adds memoization automatically, and the React team describes useMemo and useCallback as an escape hatch for cases where you need precise control, such as a stable effect dependency. Without the compiler, memoize only after profiling shows a real cost.
Is React Compiler stable and safe to use in production?
Yes. React Compiler 1.0 was released as stable in October 2025. It works best with React 19 and also supports React 17 and 18. Make sure your code follows the Rules of React by enabling the eslint-plugin-react-hooks recommended preset first.
When should I use useEffect in React?
Use an effect only to sync a component with an external system, such as a browser API, a socket connection or a third-party widget. Derived data belongs in render, logic caused by a user action belongs in the event handler, and resetting state belongs to a key. If you cannot name the external system, you likely do not need the effect.
What is the difference between useActionState and useFormStatus?
useActionState lives in the component that owns the form: it wraps your action and gives you its returned state plus an isPending flag. useFormStatus is used inside a child of the form, such as a submit button, to read whether the parent form is currently submitting. Many forms use both.
Should I use the array index as a key in React?
Only for static lists that never reorder, filter or insert items. Otherwise use a stable id from your data, because index keys make React attach state to the wrong rows. Never generate random keys during render.
What is the latest version of React?
As of October 2026 the latest release is React 19.3, published on September 9, 2026. It made View Transitions and Fragment Refs stable and added the browser() API in react-dom. Check react.dev/versions for newer releases.
Sources (7)
Checked against these, last on 12 October 2026.
- React Versions, React docsreact.dev/versions
- React 19.3, React blogreact.dev/blog/2026/09/09/react-19-3
- React Compiler v1.0, React blogreact.dev/blog/2025/10/07/react-compiler-1
- Installation (React Compiler), React docsreact.dev/learn/react-compiler/installation
- You Might Not Need an Effect, React docsreact.dev/learn/you-might-not-need-an-effect
- useEffectEvent, React docsreact.dev/reference/react/useEffectEvent
- useActionState, React docsreact.dev/reference/react/useActionState
Related on Sefism
Picked from the other libraries by shared topics.
Roadmaps
See allCheat sheets
See allBest practices
See all- Modern CSS Best PracticesModern CSS best practices: cascade layers, low specificity, custom properties, Grid and Flexbox layout, responsive design, container queries, :has() and nesting, plus Tailwind CSS v4 tips.
- TypeScript Best PracticesModern TypeScript best practices for 2026: strict settings, TypeScript 7, modeling data with unions, safe narrowing, runtime validation, generics and typed linting.
- Next.js App Router Best PracticesNext.js 16 App Router best practices: Server Components, Cache Components and use cache, secure Server Actions, proxy.ts, metadata and images.
Checklists
See all- Web Accessibility ChecklistA practical web accessibility checklist built on WCAG 2.2 level AA, with a severity and a concrete way to verify every check.
- Web Performance ChecklistA practical web performance checklist built on Core Web Vitals: LCP, INP and CLS, with a severity and a concrete way to verify every check.
Project structures
See all- React with Vite (TypeScript) project structureFor developers building a single-page React app that talks to a separate backend: an orders dashboard with auth, routing, server data, forms and tests. Product code is grouped by feature under src/features, shared pieces live in components and lib, and src/app wires providers, routes and guards together.
- Next.js (App Router) project structureFor React developers building a real web front end with Next.js: a shop dashboard with public pages, sign-in, orders and products, talking to a separate backend API. The app folder holds routes only, product code lives in feature folders, server-only code sits in src/server, and the browser side gets a proper React setup: providers, TanStack Query, forms with React Hook Form and Zod, and tests from unit to end-to-end.
- Angular project structureFor developers building a structured single-page app with Angular, the framework many enterprise and services companies use. The example is an orders dashboard with a login: standalone components, signals for state, typed forms, lazy-loaded feature routes, and a small core and shared layer around feature folders, grown from the ng new scaffold to a repository a team can run for years.
Career questions
See all- How do I choose between frontend, backend, mobile, cloud, cybersecurity, data and AI without trying them all for years?Do not try to pick the best field; pick the one whose daily problems you can tolerate on a bad day. Run a short, cheap experiment in two or three candidates, compare what you enjoyed doing rather than what sounded exciting, check the local job market, and commit for six to nine months.
- Should I become an AI engineer or stay a full stack developer?For most full stack developers this is not an either/or. AI engineering is largely full stack engineering plus models, evaluation and data. Keep your full stack strength, add AI features to real work, and move titles only when you have shipped AI work you can point to.
- What should I learn to become a web developer, and in what order?Learn the web platform first (HTML, CSS, JavaScript, how HTTP works), then one frontend framework, then a backend with a database, and build a real project at each stage. If you already know WordPress, you are not starting over: your HTML, CSS and PHP experience transfers.
Stuck on something specific?
Writing only gets you so far. If you want an answer to your situation rather than the general case, book a session and we will work through it together. Sessions are free for approved Sefism members, and a few slots open each week.
- 1:1 Mentorship
- Fresh Graduate Mentorship
- Career Guidance
Brand deals, promos and partnerships: tauseeffayyaz@gmail.com