This content originally appeared on DEV Community and was authored by Jay Sarvaiya
1. Keep Components Small & Focused
A React component should ideally do one thing well. If your file is 300+ lines, that’s a sign it needs to be broken down into smaller components. This improves readability and reusability.
2. Use Descriptive State
Instead of:
const [val, setVal] = useState(false);
Use:
const [isOpen, setIsOpen] = useState(false);
Your future self (and your teammates) will thank you.
3. Memoize Expensive Calculations
If you’re doing heavy computations in a component, wrap them in useMemo.
const sortedData = useMemo(() => {
return data.sort((a, b) => a.value - b.value);
}, [data]);
4. Don’t Overuse useEffect
Not everything needs to live inside a useEffect.
For example, derived values should be computed directly in the render, not inside useEffect.
Bad:
useEffect(() => {
setFiltered(items.filter(i => i.active));
}, [items]);
Better:
const filtered = items.filter(i => i.active);
5. Use React DevTools Early
Don’t wait until your app gets big. React DevTools can help spot wasted re-renders and performance bottlenecks even in early development.
6. Embrace TypeScript (If Possible)
TypeScript catches bugs before runtime and makes your components more predictable. Even if you just start with props typing, it’s worth it.
7. Prefer Custom Hooks Over Repetition
If you find yourself copy-pasting logic across components, extract it into a custom hook.
function useToggle(initial = false) {
const [state, setState] = useState(initial);
const toggle = () => setState(prev => !prev);
return [state, toggle];
}
This content originally appeared on DEV Community and was authored by Jay Sarvaiya