Exploring Built-in React Hooks: A Comprehensive Guide

React Hooks provide a powerful way to manage state and side effects in functional components. This article delves into the details of each built-in React Hook, explaining their use cases and providing practical code examples.

useState

useState is used to manage state within functional components. It returns a state variable and a function to update that variable.

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

Example: A counter component that increments on button click.

const Counter = () => {
  const [count, setCount] = useState(0);
  return (
    

      

Count: {count}

      
    

  );
};

useEffect

useEffect allows you to perform side effects in functional components. It runs after rendering and can handle data fetching, subscriptions, and more.

useEffect(() => {
  console.log('Component did mount.');
  return () => console.log('Component will unmount.');
}, []);

Example: Fetching data and updating state when the component mounts.

const DataFetcher = () => {
  const [data, setData] = useState([]);
  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    

      {data.map(item =>
• {item.name}
)}
    

  );
};

useContext

useContext enables accessing the context of a parent component without prop drilling.

const ThemeContext = React.createContext();

const App = () => (
  
    
  
);

const Toolbar = () => {
  const theme = useContext(ThemeContext);
  return

Theme: {theme}

;
};

useReducer

useReducer manages more complex state logic using a reducer function. Similar to Redux.

const initialState = { count: 0 };

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    default:
      return state;
  }
};

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    

      

Count: {state.count}

      
    

  );
};

useCallback

useCallback memoizes callback functions, optimizing performance by preventing unnecessary re-renders.

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

  return ;
};

useMemo

useMemo memoizes the result of a function, optimizing performance by avoiding unnecessary recalculations.

const ExpensiveComponent = () => {
  const expensiveResult = useMemo(() => computeExpensiveValue(input), [input]);
  return

Result: {expensiveResult}

;
};

useRef

useRef provides a mutable object that persists across renders. Commonly used for accessing and interacting with DOM elements.

const InputComponent = () => {
  const inputRef = useRef(null);
  const focusInput = () => inputRef.current.focus();

  return (
    

      
      
    

  );
};

Conclusion

React Hooks are a powerful addition to the React ecosystem, providing an elegant way to manage state and side effects within functional components. Understanding the details and use cases of each built-in hook is essential for building efficient and maintainable applications. By mastering these hooks, you'll be well-equipped to create dynamic, responsive, and interactive UIs that leverage the full potential of React.