Hook Rules in React

From the React Hooks cheat sheet · Rules & Best Practices · verified Jul 2026

Hook Rules

Must follow these rules

javascript

// ✅ DO: Call at top level
function Component() {
  const [state, setState] = useState()
  useEffect(() => {}, [])
  return <div />
}

// ❌ DON'T: Call conditionally
if (condition) {
  useState()                            // ❌ Breaking rules
}

// ❌ DON'T: Call in loops
for (let i = 0; i < 5; i++) {
  useState()                            // ❌ Breaking rules
}

// ✅ DO: Custom hooks start with 'use'
function useCustomHook() {
  const [state, setState] = useState()
  return [state, setState]
}

⚠️ Only call hooks at the top level

⚠️ Only call hooks from React functions

💡 ESLint plugin enforces these rules

Back to the full React Hooks cheat sheet