React Best Practices

What is Best Practices in React?

Most React code review comments come back to the same handful of habits: keep components small, keep state as low as possible, derive rather than duplicate, and clean up whatever you set up.

Key points to remember

• One responsibility per component; extract when a file passes roughly 150 lines.
• Keep state at the lowest level that needs it — lift only when sharing is required.
• Derive values during render instead of storing them in a second state variable.
• Never mutate state — always create a new object or array.
• Give every list a stable key from the data, never the array index.
• Extract repeated stateful logic into a custom hook.
• Clean up every timer, listener and subscription in the effect cleanup.
• Use semantic HTML — button, nav, main, label — before adding ARIA attributes.
• Keep secrets on the server; front-end environment variables are public.
• Split routes so the first load stays small.

Common mistakes with Best Practices

• Premature memoisation everywhere instead of profiling one slow path.
• A single God component holding all state for a whole screen.
• useEffect used to sync one state value with another instead of deriving it.