Design Small, Focused Components
Build components around clear responsibilities. A component should ideally render a focused part of the interface and expose a small set of well-named props. Extract repeated UI into reusable components, but avoid creating abstractions that make simple code harder to follow.
Keep rendering logic readable and move complex calculations into named helper functions or custom hooks when that improves clarity. Use consistent file naming and organize code around features as the application grows.
Use State Deliberately
Store only information that must change over time. Values that can be calculated from props or existing state should usually be derived during rendering rather than copied into additional state. This reduces synchronization bugs.
Keep state as close as practical to the components that need it. Lift state to a common parent when multiple components must coordinate. For complex shared workflows, consider a well-understood state-management solution and document the data flow.
Follow the Rules of Hooks
Call Hooks at the top level of React function components or custom Hooks, not inside loops, conditions, or nested functions. Keep Hook calls in a consistent order across renders.
Use effects to synchronize with external systems such as subscriptions, timers, or browser APIs. Do not use an effect for every calculation or to copy props into state. Include correct dependencies and clean up subscriptions or other resources when necessary.
Improve Rendering Performance
Measure before optimizing. Use React Developer Tools and profiling to identify expensive renders. Memoization tools such as memo, useMemo, and useCallback can help in specific cases, but unnecessary memoization adds complexity and does not automatically make an application faster.
Render long lists efficiently, use stable keys for list items, split large routes when appropriate, and avoid shipping unnecessary dependencies. Optimize images and network requests as well as JavaScript rendering.
Accessibility and Error Handling
Use semantic HTML elements, labels for form controls, keyboard-operable interactions, visible focus states, and meaningful alternative text for informative images. Do not rely on color alone to communicate status.
Handle loading, empty, and error states explicitly. Validate user input and display actionable messages. Add error boundaries where appropriate so a rendering failure in one part of the interface does not unnecessarily take down the entire experience.
Test User-Visible Behavior
Test components and workflows from the user's perspective. Cover form submission, navigation, validation, loading states, and important error paths. Avoid tests that are tightly coupled to implementation details and break whenever internal structure changes.
Keep dependencies current, review release notes before major upgrades, and use linting and formatting consistently. The best React code is understandable, accessible, tested, and easy to change.
