Follow These 3 Rules in Your React Components or I Will Ask You to Refactor
Lessons Learned from Real-World Applications
Over the years, I’ve written and reviewed hundreds of React components for a $1.7B GenAI startup.
I’ve examined code from both junior developers and experienced ex-FAANG engineers. While this advice might seem obvious for small components, it becomes crucial as your front-end codebase grows.
Follow these guidelines to ensure your code stands out as one of the most readable in your codebase.
Avoid Mixing Levels of Abstraction
Just like in function design — where high-level operations shouldn’t be mixed with low-level tasks — your JSX should maintain a consistent level of abstraction.
This means your component should either render native DOM elements or compose other components, but avoid doing both excessively.
🛑 Don’t:
✅ Do:
Notice the consistent layout of your component. At first glance, this makes it easier to understand.
If you encounter a component with mixed levels of abstraction, consider refactoring it into smaller, more focused components.
Move useEffects into Custom Hooks with Declarative Names
Avoid having too many useEffect calls cluttering your component.
🛑 Don’t:
It’s better to move your useEffect logic into custom hooks with clear, declarative names.
✅ Do:
You don’t need to move every useEffect into a separate hook. If the effects are short and clear, it’s fine to keep them in the component.
However, if you have long useEffect blocks or multiple related ones, it’s better to bundle them into a dedicated custom hook.
Avoid Cluttering Your Component with Unnecessary Information
Your components should be easy for other engineers to understand at first glance. The goal is to write components that provide just the right amount of information, without overwhelming the reader with details.
🛑 Don’t:
Move complex or detailed logic into separate functions and give them clear, declarative names.
✅ Do:
If you need to double-check or extend the detailed logic, you still have the option to dive deeper into the code of the function.
Learn more:
Great rules, Lorenz. I especially like using custom hooks for functionality that can be extracted, for example data fetching or business logic. This streamlines components and also makes the component and hooks easier to test.