React is powerful, but even experienced developers fall into common traps that can slow performance and make debugging a nightmare. Letโs explore ten mistakes you should avoid at all costs!
1๏ธโฃ Modifying State Directly
Changing state directly instead of using setState or state setters in hooks can cause unexpected behavior. Always treat state as immutable.
โ Bad:
state.count = state.count + 1; // Wrong โ
โ Good:
setState(prev => ({ count: prev.count + 1 })); // Correct โ
2๏ธโฃ Not Using Keys in Lists
React uses keys to track elements efficiently. Skipping keys in .map() can lead to rendering issues.
โ Bad:
items.map(item => <li>{item.name}</li>); // No key โ
โ Good:
items.map(item => <li key={item.id}>{item.name}</li>); // Correct โ
3๏ธโฃ Excessive Re-renders
Unnecessary renders can hurt performance. Use useMemo, useCallback, and React.memo when needed.
4๏ธโฃ Not Cleaning Up Effects
Forgetting cleanup in useEffect can cause memory leaks, especially in event listeners and timers.
โ Always cleanup:
useEffect(() => {
const interval = setInterval(() => {
console.log('Running...');
}, 1000);
return () => clearInterval(interval); // Cleanup โ
}, []);
5๏ธโฃ Using useEffect Unnecessarily
Sometimes, useEffect is overused for things that can be done without it, like directly setting state in event handlers.
6๏ธโฃ Ignoring Dependency Arrays in useEffect
Incorrect dependency arrays can cause infinite loops or missing updates.
โ Bad:
useEffect(() => {
fetchData();
}); // No dependency array โ
โ Good:
useEffect(() => {
fetchData();
}, [dependency]); // Correct โ
7๏ธโฃ Using State When a Ref is Better
State updates cause re-renders, but refs donโt. If you donโt need reactivity, use useRef.
โ Bad:
const [count, setCount] = useState(0); // Re-renders on update โ
โ Good:
const countRef = useRef(0); // No re-render โ
8๏ธโฃ Not Handling Asynchronous State Updates
React batches updates, so relying on outdated state can cause bugs.
โ Bad:
setCount(count + 1); // Might not update correctly โ
setCount(count + 1);
โ Good:
setCount(prev => prev + 1); // Always correct โ
setCount(prev => prev + 1);
9๏ธโฃ Blocking the UI with Expensive Computations
Heavy calculations in render can slow down the UI. Use useMemo.
โ Bad:
const result = expensiveCalculation(data); // Runs on every render โ
โ Good:
const result = useMemo(() => expensiveCalculation(data), [data]); // Optimized โ
๐ Not Handling Errors Properly
Without error boundaries, one crash can break the whole app.
โ Always use an error boundary:
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError() {
return { hasError: true };
}
render() {
if (this.state.hasError) {
return <h2>Something went wrong.</h2>;
}
return this.props.children;
}
}
Wrap components like this:
<ErrorBoundary>
<MyComponent /> // component name
</ErrorBoundary>
๐ก Did you find these helpful? What other React mistakes have you seen? Share in the comments! ๐
๐ก Want more React tips? Follow me for weekly posts on writing better React code!
