Essential React Hooks & Practical Use Cases 🎣

What Are React Hooks?

Functions that let you use React features in functional components without classes.

7 Essential Hooks

1. useState

What it does: keeps track of values that can change in your app

// e.g. 1: Basic state management

const [count, setCount] = useState(0);



// e.g. 2: Form inputs

const [name, setName] = useState('');

When to use:

• Storing form input values


• Toggling UI states (open/closed)


• Tracking simple values (counters, flags)

2. useEffect

What it does: helps us run code when things change (or when a component first loads)

// e.g. 1: Run once on mount (empty dependencies)

useEffect(() => {

  // Setup code

  return () => { /* Cleanup code */ };

}, []);



// e.g. 2: Run when dependencies change

useEffect(() => {

  document.title = `${count} new messages`;

}, [count]);

When to use:

• Data fetching


• Subscriptions/event listeners


• DOM manipulation


• Syncing with external systems

3. useContext

What it does: allows multiple components to share the same data without passing it manually

// Access theme from anywhere in component tree

const theme = useContext(ThemeContext);

When to use:

• Accessing global state (themes, user data)


• Avoiding prop drilling through many components


• When multiple components need the same data

4. useRef

What it does: helps reference an element without causing unnecessary re-renders

// e.g. 1: DOM element reference

const inputRef = useRef(null);

inputRef.current.focus();



// e.g. 2: Value persistence between renders

const prevCountRef = useRef();

When to use:

• Accessing DOM elements


• Storing previous values


• Holding values that shouldn't trigger re-renders


• Managing timers/intervals

5. useReducer

What it does: Manages complex state logic

const [state, dispatch] = useReducer(reducer, initialState);

dispatch({ type: 'increment' });

When to use:

• Complex state with multiple sub-values


• When next state depends on previous state


• When state transitions have business logic


• When actions cause multiple state updates

6. useMemo

What it does: expensive calculations to avoid recomputing them unnecessarily

const expensiveValue = useMemo(() => {

  return computeExpensiveValue(data);

}, [data]);

When to use:

• Optimizing performance-heavy calculations


• Preventing unnecessary computations

7. useCallback

What it does: Memoizes functions so they don’t get recreated every render

const handleClick = useCallback(() => {

  console.log('Clicked!');

}, []);

When to use:

• Preventing unnecessary re-renders in child components


• Avoiding function recreation on every render

Custom Hooks

Create your own hooks to reuse logic between components:

// Extract reusable logic

function useWindowSize() {

  const [size, setSize] = useState({ width: window.innerWidth, height: window.innerHeight });



  // Event handling + cleanup in one hook

  useEffect(() => {

    const handleResize = () => setSize({ width: window.innerWidth, height: window.innerHeight });

    window.addEventListener('resize', handleResize);

    return () => window.removeEventListener('resize', handleResize);

  }, []);



  return size;

}

Rules of Hooks

1. Only call at top level (no conditions/loops)


2. Only call from React functions


3. Name custom hooks with "use" prefix

Quick Tips

• Use useState for simple state, useReducer for complex state


• Don't forget cleanup functions in useEffect
  


• Optimize renders with useMemo and useCallback
  


• Create custom hooks to share logic, not just for reuse


• Use useImperativeHandle to expose methods from child components to parents.


• Use useLayoutEffect when updates need to happen before the browser paints.


• Use useDebugValue to add labels to custom hooks for easier debugging in React DevTools.

🚀 Wrapping Up

React Hooks are powerful and fun when you understand how they work! Here's a quick recap:

✅ useState → Keeps track of changing values (Think of useState as a small whiteboard where you can jot down notes «data» that might change over time)

✅ useEffect → Runs side effects (like setting a reminder alarm. When certain things happen, you want to be reminded to do something)

✅ useContext → Shares values across components (Imagine a family chalkboard in your house where everyone can read and write messages)

✅ useRef → References elements without re-rendering (is like placing a bookmark in a book. It helps you keep track of a specific spot or element)

✅ useReducer → Handles complex state logic (like a suggestion box for managing complex state changes)

✅ useMemo → Optimizes calculations (like a chef who prepares ingredients in advance so they don’t have to chop them again for every order)

✅ useCallback → Optimizes functions (like saving a shopping list so you don’t rewrite it every time you go shopping!)