A Comprehensive Guide to React Hooks

React Hooks have revolutionized how developers write functional components in React. Introduced in React 16.8, hooks allow you to use state and other React features without writing class components. In this blog post, we will explore the most commonly used React hooks and how they can improve your code.

Why Use Hooks?

Before hooks, state and lifecycle methods were only available in class components. Hooks enable you to use state, side effects, context, and more in functional components, making them cleaner and more readable. Hooks also help avoid unnecessary nesting and improve code reuse.

Commonly Used React Hooks

1. useState

The useState hook lets you add state to functional components.

import { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

2. useEffect

The useEffect hook allows you to perform side effects in functional components, such as fetching data, updating the DOM, or setting up subscriptions.

import { useState, useEffect } from 'react';

function Timer() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setTime((prevTime) => prevTime + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return <p>Time: {time} seconds</p>;
}

3. useContext

The useContext hook provides an easy way to access global state without prop drilling.

import { useContext, createContext } from 'react';

const ThemeContext = createContext('light');

function ThemedComponent() {
  const theme = useContext(ThemeContext);
  return <p>Current Theme: {theme}</p>;
}

4. useRef

The useRef hook allows you to persist values across renders without causing re-renders. It's commonly used for accessing DOM elements directly.

import { useRef, useEffect } from 'react';

function InputFocus() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} placeholder="Focus on me" />;
}

5. useMemo

The useMemo hook helps optimize performance by memoizing expensive computations.

import { useMemo, useState } from 'react';

function ExpensiveCalculation({ num }) {
  const squaredValue = useMemo(() => {
    console.log('Calculating...');
    return num * num;
  }, [num]);

  return <p>Squared Value: {squaredValue}</p>;
}

6. useCallback

The useCallback hook memoizes functions to prevent unnecessary re-renders.

import { useState, useCallback } from 'react';

function Button({ onClick }) {
  return <button onClick={onClick}>Click Me</button>;
}

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

  const handleClick = useCallback(() => {
    setCount((prev) => prev + 1);
  }, []);

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

7. useReducer

The useReducer hook is an alternative to useState for managing complex state logic.

import { useReducer } from 'react';

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

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>
    </div>
  );
}