✅ React Hook Rules Every Developer Must Know to Master React.js
React Hook Rules Every Developer Must Know
React hooks are powerful, but using them incorrectly can break your app or cause unexpected behavior. Below are the core rules every React developer should know and follow to master React.js.
⚠️ Rule 1: Only Call Hooks at the Top Level
Hooks should not be called inside loops, conditions, or nested functions.
// ❌ Incorrect
if (isLoggedIn) {
useEffect(() => {
console.log("Hello");
}, []);
}
// ✅ Correct
useEffect(() => {
if (isLoggedIn) {
console.log("Hello");
}
}, [isLoggedIn]);
🔁 Rule 2: Only Call Hooks from React Functions
You can only use hooks inside React functional components or custom hooks.
// ❌ This will throw an error
function fetchData() {
const [data, setData] = useState(null); // ❌ Not allowed here
}
// ✅ Use inside component
function MyComponent() {
const [data, setData] = useState(null);
return {data};
}
🧱 Rule 3: Follow Hook Naming Convention
Custom hooks must start with use (e.g. useFetch, useAuth).
// ✅ Good practice
function useCounter() {
const [count, setCount] = useState(0);
return { count, setCount };
}
📦 Rule 4: Keep Hook Dependencies Updated
Always provide the right dependency array in useEffect, useCallback, etc.
// ❌ Missing dependency
useEffect(() => {
fetchData(id);
}, []); // Should include [id]
// ✅ Correct
useEffect(() => {
fetchData(id);
}, [id]);
⛔ Rule 5: Don’t Call Hooks Conditionally
Calling hooks conditionally breaks the rules of React and can cause unexpected bugs.
// ❌ Wrong
if (user) {
useEffect(() => {
console.log("User logged in");
}, []);
}
// ✅ Right
useEffect(() => {
if (user) {
console.log("User logged in");
}
}, [user]);
📌 Summary of Hook Rules
- ✅ Only call hooks at the top level
- ✅ Only call hooks inside React components
- ✅ Use the
use prefix for custom hooks
- ✅ Always manage dependencies properly
- ✅ Never call hooks conditionally or inside loops
🎯 Mastering these rules will help you write clean, bug-free, and scalable React apps!