🔑 Must-Know React Hooks (For Every Developer)

React introduced hooks in v16.8, and they completely changed how we build modern apps. Instead of juggling class components and lifecycle methods, hooks let us use state and other React features directly inside functional components.

Here are the must-know React hooks every developer should master:

1. useState

  • Purpose: Manage local state inside a functional component.
  • Example:
const [count, setCount] = useState(0);

👉 Whenever you click a button, setCount updates the state and re-renders the component.

2. useEffect

  • Purpose: Side effects (API calls, subscriptions, timers, DOM updates).
  • Example:
useEffect(() => {
  fetchData();
}, []);

👉 Empty dependency array ([]) = run only once like componentDidMount.

3. useContext

  • Purpose: Avoid prop drilling, directly consume values from React Context.
  • Example:
const theme = useContext(ThemeContext);

👉 Great for theme, auth, or language management.

4. useRef

  • Purpose: Store mutable values that don’t trigger re-renders.
  • Example:
const inputRef = useRef(null);

👉 Commonly used to focus an input field or store previous state.

5. useReducer

  • Purpose: State management alternative to useState (like Redux).
  • Example:
const [state, dispatch] = useReducer(reducer, initialState);

👉 Useful for complex states with multiple transitions.

6. useMemo

  • Purpose: Performance optimization (memoize expensive calculations).
  • Example:
const result = useMemo(() => heavyCalculation(data), [data]);

👉 Avoids recalculating unless dependencies change.

7. useCallback

  • Purpose: Memoize functions to prevent unnecessary re-renders.
  • Example:
const handleClick = useCallback(() => { doSomething(); }, []);

👉 Often used with React.memo.

8. useLayoutEffect

  • Purpose: Similar to useEffect, but runs synchronously before the browser paints.
    👉 Used for DOM measurements or animations.

9. Custom Hooks

  • Purpose: Reuse logic between components.
  • Example:
function useFetch(url) {
  const [data, setData] = useState(null);
  useEffect(() => { fetch(url).then(r => r.json()).then(setData); }, [url]);
  return data;
}

👉 Encapsulate logic, stay DRY (Don’t Repeat Yourself).

🚀 Final Thought

If you master these hooks, you’ll be able to build scalable, maintainable, and modern React apps. Hooks are not just a feature — they’re the core philosophy of React today.

👉 Which hook do you use the most in your projects? Drop it in the comments!

Leave a comment