Additional React Hooks – Advanced State and Performance Optimizations

Advanced React Hooks: useReducer, useCallback, and useMemo

In this blog, we will explore advanced React hooks that allow you to handle complex state logic, optimize performance, and manage expensive calculations.

1. useReducer

What is it? useReducer is similar to useState, but it’s better suited for complex state logic, like when there are multiple state transitions or actions.

Real-Life Example: Imagine a simple counter with multiple actions: increment, decrement, and reset.

import React, { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    case 'reset':
      return { count: 0 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <button onClick={() => dispatch({ type: 'reset' })}>Reset</button>
    </div>
  );
}

    

2. useCallback

What is it? useCallback is used to memoize functions, preventing unnecessary re-creations of functions on each render.

Real-Life Example: In large applications, you may pass functions as props to child components. If the function is recreated on every render, it can hurt performance.

import React, { useState, useCallback } from 'react';

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

  const handleClick = useCallback(() => {
    console.log('Button clicked');
  }, []);

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
      <p>Count: {count}</p>
    </div>
  );
}

    

3. useMemo

What is it? useMemo memoizes expensive calculations, preventing them from being recalculated on every render.

Real-Life Example: If you have a component that performs a heavy calculation, useMemo ensures the result is only recalculated when necessary.

import React, { useState, useMemo } from 'react';

function ExpensiveCalculation() {
  const [number, setNumber] = useState(0);
  const [dark, setDark] = useState(false);

  const theme = useMemo(() => {
    return { background: dark ? 'black' : 'white', color: dark ? 'white' : 'black' };
  }, [dark]);

  return (
    <div style={theme}>
      <input type="number" value={number} onChange={e => setNumber(parseInt(e.target.value))} />
      <button onClick={() => setDark(prevDark => !prevDark)}>Toggle Theme</button>
    </div>
  );
}

    

These hooks help optimize your app’s performance and make state management easier. Let’s move on to managing refs and layout with the next blog!