What is Hooks?
Hooks are special functions that let function components use state, side effects, context, and more — without writing class components.
What is Hooks?
Hooks are special functions that let function components use state, side effects, context, and more — without writing class components.
They start with use: useState, useEffect, useContext. You call them at the top level of your component, not inside loops or if statements.
Real-life example: Hooks are power outlets in a modern kitchen. Old kitchens needed built-in appliances (classes). Now you plug in whatever tool you need (useState, useEffect).
Rules of Hooks
Only call hooks at the top level — not inside conditions, loops, or nested functions. Only call hooks from React function components or custom hooks.
Real-life example: Rules of Hooks are like airport security rules — everyone follows the same line order; skipping the line breaks the system for everyone.
- Top level only — before any early return if possible
- Custom hooks must start with use (useFetch, useAuth)
- React DevTools and ESLint plugin help catch mistakes