React Hooks fundamentally transformed how we write functional components, introducing a more intuitive and powerful way to manage state and side effects. However, this power comes with significant responsibility. After extensive experience with hooks in production environments, I’ve identified critical anti-patterns that consistently lead to bugs, performance degradation, and maintenance nightmares.
This comprehensive guide examines the most dangerous mistakes developers make with React Hooks, providing detailed explanations of why these patterns fail and how to implement correct solutions.
Table of Contents
The Imposter Hook: Functions Disguised as Hooks
One of the most common mistakes developers make is creating functions that follow hook naming conventions (use*) but don’t actually utilize any hooks internally. This violates the Rules of Hooks without providing any hook benefits.
Anti-Pattern: Functions Pretending to Be Hooks
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| // ❌ ANTI-PATTERN: These are NOT hooks - they're just functions pretending to be hooks
function useRandomNumber() {
return Math.random();
}
function useCurrentTimestamp() {
return Date.now();
}
function useFormattedDate(date) {
return new Intl.DateTimeFormat('en-US').format(date);
}
// Usage in component
function MyComponent() {
const randomNum = useRandomNumber();
const timestamp = useCurrentTimestamp();
const formattedDate = useFormattedDate(new Date());
return <div>{randomNum} - {timestamp} - {formattedDate}</div>;
}
|
Problems with this approach:
- Violates the Rules of Hooks without providing any hook benefits
- Misleads other developers about the function’s behavior and lifecycle
- Creates unnecessary mental overhead when reading and debugging code
- Can cause confusion during code reviews and static analysis
- May trigger ESLint warnings about hook usage
Best Practice: Proper Function Naming and Hook Implementation
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| // ✅ CORRECT: These are utility functions, not hooks
function getRandomNumber() {
return Math.random();
}
function getCurrentTimestamp() {
return Date.now();
}
function formatDate(date) {
return new Intl.DateTimeFormat('en-US').format(date);
}
// Or if you need reactive behavior, make it a proper hook
function useCurrentTime() {
const [time, setTime] = useState(Date.now());
useEffect(() => {
const interval = setInterval(() => setTime(Date.now()), 1000);
return () => clearInterval(interval);
}, []);
return time;
}
function useFormattedCurrentTime() {
const currentTime = useCurrentTime();
return formatDate(new Date(currentTime));
}
|
Rule of Thumb: If your function doesn’t call other hooks, it shouldn’t be named like a hook. Use descriptive names that indicate the function’s purpose.
The Memory Leak Catastrophe: Async Effects Without Cleanup
Using asynchronous operations in useEffect without proper cleanup mechanisms is one of the most dangerous anti-patterns, causing memory leaks, race conditions, and state updates on unmounted components.
Anti-Pattern: No Cleanup Mechanism
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| // ❌ ANTI-PATTERN: No cleanup mechanism
function UserProfile({ userId }) {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
useEffect(() => {
async function fetchUser() {
setLoading(true);
setError(null);
try {
const response = await fetch(`/api/users/${userId}`);
const userData = await response.json();
setUser(userData); // ⚠️ Component might be unmounted by now!
setLoading(false);
} catch (error) {
console.error('Failed to fetch user:', error);
setError(error.message); // ⚠️ Potential memory leak!
setLoading(false);
}
}
fetchUser();
}, [userId]);
if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error}</div>;
return <div>{user?.name}</div>;
}
|
Problems with this approach:
- If the component unmounts before the fetch completes, setUser, setLoading, and setError will be called on an unmounted component
- Multiple rapid prop changes can cause race conditions where older requests complete after newer ones
- Memory leaks from unresolved promises and event listeners
- React will show warnings in development about setting state on unmounted components
- Network requests continue even after component unmount, wasting resources
Best Practice: Using Cleanup Flag
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
| // ✅ CORRECT: Using cleanup flag
function UserProfile({ userId }) {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
useEffect(() => {
let isCancelled = false;
async function fetchUser() {
setLoading(true);
setError(null);
try {
const response = await fetch(`/api/users/${userId}`);
const userData = await response.json();
// Only update state if component is still mounted
if (!isCancelled) {
setUser(userData);
setLoading(false);
}
} catch (error) {
if (!isCancelled) {
console.error('Failed to fetch user:', error);
setError(error.message);
setLoading(false);
}
}
}
fetchUser();
// Cleanup function
return () => {
isCancelled = true;
};
}, [userId]);
if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error}</div>;
return <div>{user?.name}</div>;
}
|
Best Practice: Using AbortController
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| // ✅ BEST PRACTICE: Using AbortController for network requests
function UserProfile({ userId }) {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
useEffect(() => {
const abortController = new AbortController();
async function fetchUser() {
setLoading(true);
setError(null);
try {
const response = await fetch(`/api/users/${userId}`, {
signal: abortController.signal
});
const userData = await response.json();
setUser(userData);
setLoading(false);
} catch (error) {
if (error.name !== 'AbortError') {
console.error('Failed to fetch user:', error);
setError(error.message);
setLoading(false);
}
}
}
fetchUser();
return () => abortController.abort();
}, [userId]);
if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error}</div>;
return <div>{user?.name}</div>;
}
|
The Silent Mutation Trap: Misusing Refs for State
Using useRef to store values that should trigger re-renders when changed creates a disconnect between the component’s internal state and what’s displayed to users.
Anti-Pattern: Using Refs for Reactive State
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| // ❌ ANTI-PATTERN: Using refs for reactive state
function Counter() {
const countRef = useRef(0);
const [displayCount, setDisplayCount] = useState(0);
const increment = () => {
countRef.current++; // This won't trigger a re-render!
console.log('Count:', countRef.current);
};
const decrement = () => {
countRef.current--; // This won't trigger a re-render!
console.log('Count:', countRef.current);
};
return (
<div>
<p>Count: {countRef.current}</p> {/* This will always show 0 */}
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
}
|
Problems with this approach:
- Mutating ref.current doesn’t trigger re-renders
- The UI becomes completely out of sync with the actual value
- Creates confusion about the component’s state
- Makes debugging significantly harder
- Users see stale data even when the internal state has changed
Best Practice: Using State for Reactive Values
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| // ✅ CORRECT: Using state for reactive values
function Counter() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(prev => prev + 1);
};
const decrement = () => {
setCount(prev => prev - 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
}
|
Best Practice: When to Actually Use Refs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
| // ✅ CORRECT: Refs for non-reactive values
function Timer() {
const [seconds, setSeconds] = useState(0);
const [isRunning, setIsRunning] = useState(false);
const intervalRef = useRef(null);
const start = () => {
if (intervalRef.current) return;
setIsRunning(true);
intervalRef.current = setInterval(() => {
setSeconds(prev => prev + 1);
}, 1000);
};
const stop = () => {
if (intervalRef.current) {
clearInterval(intervalRef.current);
intervalRef.current = null;
setIsRunning(false);
}
};
const reset = () => {
stop();
setSeconds(0);
};
useEffect(() => {
return () => stop(); // Cleanup on unmount
}, []);
return (
<div>
<p>Timer: {seconds}s</p>
<button onClick={start} disabled={isRunning}>Start</button>
<button onClick={stop} disabled={!isRunning}>Stop</button>
<button onClick={reset}>Reset</button>
</div>
);
}
|
The Stale Closure Nightmare: Missing Dependencies
Forgetting to include variables in the dependency array causes effects to capture stale values from the initial render and never update them.
Anti-Pattern: Missing Dependencies in useEffect
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| // ❌ ANTI-PATTERN: Missing dependencies in useEffect
function MessageLogger({ userId }) {
const [messages, setMessages] = useState([]);
const [counter, setCounter] = useState(0);
const [userName, setUserName] = useState('');
useEffect(() => {
const intervalId = setInterval(() => {
console.log(`User ${userId} has ${messages.length} messages`);
console.log(`Counter: ${counter}`); // This will always log the initial value!
console.log(`User name: ${userName}`); // This will always be empty!
}, 1000);
return () => clearInterval(intervalId);
}, []); // Missing dependencies!
return (
<div>
<p>Messages: {messages.length}</p>
<p>Counter: {counter}</p>
<p>User: {userName}</p>
<button onClick={() => setCounter(c => c + 1)}>Increment</button>
<button onClick={() => setMessages(m => [...m, 'New message'])}>
Add Message
</button>
<button onClick={() => setUserName('John Doe')}>Set Name</button>
</div>
);
}
|
The Problem: The effect captures the initial values of userId, messages, counter, and userName and never updates them, leading to stale closures.
Best Practice: Including All Dependencies
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| // ✅ CORRECT: Including all dependencies
function MessageLogger({ userId }) {
const [messages, setMessages] = useState([]);
const [counter, setCounter] = useState(0);
const [userName, setUserName] = useState('');
useEffect(() => {
const intervalId = setInterval(() => {
console.log(`User ${userId} has ${messages.length} messages`);
console.log(`Counter: ${counter}`);
console.log(`User name: ${userName}`);
}, 1000);
return () => clearInterval(intervalId);
}, [userId, messages.length, counter, userName]); // Include all dependencies
return (
<div>
<p>Messages: {messages.length}</p>
<p>Counter: {counter}</p>
<p>User: {userName}</p>
<button onClick={() => setCounter(c => c + 1)}>Increment</button>
<button onClick={() => setMessages(m => [...m, 'New message'])}>
Add Message
</button>
<button onClick={() => setUserName('John Doe')}>Set Name</button>
</div>
);
}
|
Pro Tip: Use ESLint Plugin
1
2
3
4
5
6
| {
"extends": ["plugin:react-hooks/recommended"],
"rules": {
"react-hooks/exhaustive-deps": "error"
}
}
|
The Redundant Effect: Overusing useEffect
Using useEffect for operations that React already handles efficiently creates unnecessary re-renders and complexity.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| // ❌ ANTI-PATTERN: Unnecessary effects for simple data transformations
function UserCard({ user }) {
const [displayName, setDisplayName] = useState('');
const [email, setEmail] = useState('');
const [formattedDate, setFormattedDate] = useState('');
// Unnecessary effects!
useEffect(() => {
setDisplayName(user.name);
}, [user.name]);
useEffect(() => {
setEmail(user.email);
}, [user.email]);
useEffect(() => {
setFormattedDate(new Date(user.createdAt).toLocaleDateString());
}, [user.createdAt]);
return (
<div>
<h2>{displayName}</h2>
<p>{email}</p>
<p>Created: {formattedDate}</p>
</div>
);
}
|
Problems with this approach:
- Creates unnecessary re-renders
- Adds complexity without benefits
- Can cause timing issues and race conditions
- Makes the component harder to understand and debug
- Violates the principle of keeping components simple
Best Practice: Direct Data Usage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| // ✅ CORRECT: Direct data usage
function UserCard({ user }) {
return (
<div>
<h2>{user.name}</h2>
<p>{user.email}</p>
<p>Created: {new Date(user.createdAt).toLocaleDateString()}</p>
</div>
);
}
// Or if you need derived state with complex transformations:
function UserCard({ user }) {
const displayName = user.name.toUpperCase();
const maskedEmail = user.email.replace(/(.{2}).*@/, '$1***@');
const formattedDate = new Date(user.createdAt).toLocaleDateString();
return (
<div>
<h2>{displayName}</h2>
<p>{maskedEmail}</p>
<p>Created: {formattedDate}</p>
</div>
);
}
|
Best Practice: When useEffect IS Needed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| // ✅ CORRECT: useEffect for actual side effects
function DocumentTitle({ title }) {
useEffect(() => {
const previousTitle = document.title;
document.title = title;
return () => {
document.title = previousTitle;
};
}, [title]);
return null; // This component just manages side effects
}
function Analytics({ page }) {
useEffect(() => {
analytics.track('page_view', { page });
}, [page]);
return null;
}
function ScrollToTop() {
useEffect(() => {
window.scrollTo(0, 0);
}, []);
return null;
}
|
The Infinite Loop: Incorrect Dependency Arrays
Creating infinite re-render loops by including objects, arrays, or functions in dependency arrays that change on every render.
Anti-Pattern: Objects and Functions in Dependency Arrays
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| // ❌ ANTI-PATTERN: Objects and functions in dependency arrays
function UserProfile({ user }) {
const [profile, setProfile] = useState(null);
// This object is recreated on every render!
const userConfig = {
id: user.id,
includeDetails: true
};
// This function is recreated on every render!
const fetchUserProfile = async () => {
const response = await fetch(`/api/users/${user.id}/profile`);
const data = await response.json();
setProfile(data);
};
useEffect(() => {
fetchUserProfile();
}, [userConfig, fetchUserProfile]); // Infinite loop!
return <div>{profile?.name}</div>;
}
|
Best Practice: Using useCallback and useMemo for Stable References
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
| // ✅ CORRECT: Using useCallback and useMemo for stable references
function UserProfile({ user }) {
const [profile, setProfile] = useState(null);
// Memoize the config object
const userConfig = useMemo(() => ({
id: user.id,
includeDetails: true
}), [user.id]);
// Memoize the function
const fetchUserProfile = useCallback(async () => {
const response = await fetch(`/api/users/${user.id}/profile`);
const data = await response.json();
setProfile(data);
}, [user.id]);
useEffect(() => {
fetchUserProfile();
}, [fetchUserProfile]);
return <div>{profile?.name}</div>;
}
// Even simpler approach
function UserProfile({ user }) {
const [profile, setProfile] = useState(null);
useEffect(() => {
async function fetchUserProfile() {
const response = await fetch(`/api/users/${user.id}/profile`);
const data = await response.json();
setProfile(data);
}
fetchUserProfile();
}, [user.id]); // Only depend on the actual changing value
return <div>{profile?.name}</div>;
}
|
Managing multiple pieces of state that are logically related but kept separate, leading to synchronization issues and complex state management.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
| // ❌ ANTI-PATTERN: Multiple related states
function UserForm() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [isValid, setIsValid] = useState(false);
const [isDirty, setIsDirty] = useState(false);
const [errorMessage, setErrorMessage] = useState('');
const handleNameChange = (value) => {
setName(value);
setIsDirty(true);
setIsValid(value.length > 0 && email.includes('@'));
setErrorMessage(value.length === 0 ? 'Name is required' : '');
};
const handleEmailChange = (value) => {
setEmail(value);
setIsDirty(true);
setIsValid(name.length > 0 && value.includes('@'));
setErrorMessage(value.includes('@') ? '' : 'Invalid email');
};
return (
<form>
<input
value={name}
onChange={(e) => handleNameChange(e.target.value)}
placeholder="Name"
/>
<input
value={email}
onChange={(e) => handleEmailChange(e.target.value)}
placeholder="Email"
/>
{errorMessage && <p>{errorMessage}</p>}
<button disabled={!isValid}>Submit</button>
</form>
);
}
|
Best Practice: Using useReducer for Complex State
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
| // ✅ CORRECT: Using useReducer for complex state
function UserForm() {
const [state, dispatch] = useReducer(formReducer, {
name: '',
email: '',
isValid: false,
isDirty: false,
errorMessage: ''
});
const handleNameChange = (value) => {
dispatch({ type: 'SET_NAME', payload: value });
};
const handleEmailChange = (value) => {
dispatch({ type: 'SET_EMAIL', payload: value });
};
return (
<form>
<input
value={state.name}
onChange={(e) => handleNameChange(e.target.value)}
placeholder="Name"
/>
<input
value={state.email}
onChange={(e) => handleEmailChange(e.target.value)}
placeholder="Email"
/>
{state.errorMessage && <p>{state.errorMessage}</p>}
<button disabled={!state.isValid}>Submit</button>
</form>
);
}
function formReducer(state, action) {
switch (action.type) {
case 'SET_NAME':
const newName = action.payload;
const isValid = newName.length > 0 && state.email.includes('@');
return {
...state,
name: newName,
isValid,
isDirty: true,
errorMessage: newName.length === 0 ? 'Name is required' : ''
};
case 'SET_EMAIL':
const newEmail = action.payload;
const emailValid = state.name.length > 0 && newEmail.includes('@');
return {
...state,
email: newEmail,
isValid: emailValid,
isDirty: true,
errorMessage: newEmail.includes('@') ? '' : 'Invalid email'
};
default:
return state;
}
}
|
The Custom Hook Over-Engineering: Premature Abstraction
Creating custom hooks for simple operations that don’t benefit from abstraction, leading to unnecessary complexity and reduced readability.
Anti-Pattern: Unnecessary Custom Hooks
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
| // ❌ ANTI-PATTERN: Unnecessary custom hooks
function useCounter(initialValue = 0) {
const [count, setCount] = useState(initialValue);
const increment = useCallback(() => {
setCount(prev => prev + 1);
}, []);
const decrement = useCallback(() => {
setCount(prev => prev - 1);
}, []);
const reset = useCallback(() => {
setCount(initialValue);
}, [initialValue]);
return { count, increment, decrement, reset };
}
function useToggle(initialValue = false) {
const [value, setValue] = useState(initialValue);
const toggle = useCallback(() => {
setValue(prev => !prev);
}, []);
return [value, toggle];
}
// Usage
function MyComponent() {
const { count, increment, decrement, reset } = useCounter(0);
const [isVisible, toggleVisibility] = useToggle(false);
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
<button onClick={reset}>Reset</button>
<button onClick={toggleVisibility}>
{isVisible ? 'Hide' : 'Show'}
</button>
{isVisible && <p>Visible content</p>}
</div>
);
}
|
Best Practice: Simple, Direct Implementation
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
| // ✅ CORRECT: Simple, direct implementation
function MyComponent() {
const [count, setCount] = useState(0);
const [isVisible, setIsVisible] = useState(false);
const increment = () => setCount(prev => prev + 1);
const decrement = () => setCount(prev => prev - 1);
const reset = () => setCount(0);
const toggleVisibility = () => setIsVisible(prev => !prev);
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
<button onClick={reset}>Reset</button>
<button onClick={toggleVisibility}>
{isVisible ? 'Hide' : 'Show'}
</button>
{isVisible && <p>Visible content</p>}
</div>
);
}
// Custom hooks are valuable for complex logic
function useLocalStorage(key, initialValue) {
const [storedValue, setStoredValue] = useState(() => {
try {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
} catch (error) {
console.error(error);
return initialValue;
}
});
const setValue = (value) => {
try {
const valueToStore = value instanceof Function ? value(storedValue) : value;
setStoredValue(valueToStore);
window.localStorage.setItem(key, JSON.stringify(valueToStore));
} catch (error) {
console.error(error);
}
};
return [storedValue, setValue];
}
|
Key Takeaways and Best Practices
- Name Functions Appropriately: Only use the
use* prefix for actual hooks that call other hooks - Always Clean Up Async Operations: Use cleanup flags or AbortController to prevent memory leaks
- Use Refs for Non-Reactive Values: Use state for values that affect rendering, refs for everything else
- Include All Dependencies: Let ESLint help you catch missing dependencies automatically
- Don’t Overuse Effects: Most data transformations don’t need useEffect
- Avoid Infinite Loops: Be careful with objects, arrays, and functions in dependency arrays
- Consolidate Related State: Use useReducer for complex state that changes together
- Avoid Premature Abstraction: Only create custom hooks when they provide real value
Conclusion
React Hooks are powerful tools that enable clean, functional component architecture. However, they require careful consideration of their lifecycle, dependencies, and proper usage patterns. By avoiding these anti-patterns and following the established best practices, you’ll write more reliable, performant, and maintainable React applications.
The key is understanding when and why to use each hook, rather than reaching for them as a default solution to every problem. Remember that hooks are tools designed for specific purposes, and using them appropriately is just as important as avoiding their misuse.
Always prioritize code clarity, performance, and maintainability over clever abstractions or premature optimization. When in doubt, start simple and refactor as needed based on actual requirements and performance metrics.
Author
Manish Prasad
If you liked the above story, you can 
to keep me energized for writing stories like this for you.
