Welcome to the React Style Guide.
This guide is intended for mid-level React developers with a few years of experience who are able to get work done, but find themselves struggling to write code that is easy to maintain and scale.
This guide is intended for mid-level React developers with a few years of experience who are able to get work done, but find themselves struggling to write code that is easy to maintain and scale. This guide is not intended for beginners.
This guide is intended for mid-level React developers with a few years of experience who are able to get work done, but find themselves struggling to write code that is easy to maintain and scale. This guide is not intended for beginners.
Hold each piece of React state in the lowest common ancestor that consumes it; lift only when multiple siblings need the same data.
Do not store values that can be derived from props or other state; compute them on demand or memoise.
Treat props as immutable inputs—never mutate them or depend on external mutation.
Keep each component focused on one concern (UI, state management, or orchestration—never all three).
Use function components and Hooks exclusively; avoid class components in new code.
Write render logic as a pure function of props and state; never trigger side‑effects during render.
Factor reusable logic into custom Hooks; expose plain values and callbacks, not JSX.
Use `useEffect` (or `useLayoutEffect` only when layout‑critical) solely for side‑effects; keep calculations inside render or `useMemo`.
Fetch remote data at the route or page level (or in a dedicated data layer) and pass it downward; avoid fetching deep in leaf widgets.
Introduce React Context only for truly global, read‑heavy data; never for high‑frequency changing state.
Wrap non‑critical modules in `React.lazy` + `Suspense`; prefer route‑level boundaries.
Apply `React.memo`, `useMemo`, and `useCallback` only when profiling identifies a real performance issue.
Write components in TypeScript with `strict` mode on; export precise prop and state types.
Place Error Boundaries at app shell and around separately‑loaded chunks; log and gracefully degrade UI.
Default to semantic HTML elements, ARIA roles only when needed, and keyboard operability for all interactive components.
Write tests at the behavior level using React Testing Library; avoid shallow rendering.
Organise files by feature/domain (not by type), grouping components, hooks, tests, and styles together.
Co‑locate styling (CSS Modules, CSS‑in‑JS, or Tailwind classes) with components; avoid global cascade leakage.
Use PascalCase for components, camelCase for hooks and variables, and kebab‑case for filenames.