Mastering React Hooks

React Hooks revolutionized how we write React components, moving away from class components to a more functional approach. In this comprehensive guide, we’ll explore all the essential hooks and advanced patterns.

Understanding the Hook Rules

Before diving into specific hooks, it’s crucial to understand the Rules of Hooks:

1. Only call hooks at the top level - Don’t call hooks inside loops, conditions, or nested functions
2. Only call hooks from React functions - Call hooks from React function components or custom hooks

Essential Hooks

useState

The most fundamental hook for managing component state:

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

useEffect

Handles side effects in functional components:

import { useState, useEffect } from "react";

function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/api/data")
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  }, []); // Empty dependency array = run once

  if (loading) return <div>Loading...</div>;
  return <div>{JSON.stringify(data)}</div>;
}

Custom Hooks

Create reusable logic with custom hooks:

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      setStoredValue(value);
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch (error) {
      console.error(error);
    }
  };

  return [storedValue, setValue];
}

Advanced Patterns

useReducer for Complex State

When useState becomes unwieldy, useReducer provides a more structured approach:

import { useReducer } from "react";

const initialState = { count: 0 };

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, initialState);

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

Performance Optimization

useMemo and useCallback

Optimize expensive calculations and prevent unnecessary re-renders:

import { useMemo, useCallback } from "react";

function ExpensiveComponent({ items, filter }) {
  const filteredItems = useMemo(() => {
    return items.filter((item) => item.category === filter);
  }, [items, filter]);

  const handleClick = useCallback((id) => {
    // Handle click logic
  }, []);

  return (
    <div>
      {filteredItems.map((item) => (
        <div key={item.id} onClick={() => handleClick(item.id)}>
          {item.name}
        </div>
      ))}
    </div>
  );
}

Conclusion

React Hooks provide a powerful and flexible way to manage state and side effects in functional components. By understanding the fundamental hooks and advanced patterns, you can build more maintainable and performant React applications.

Remember to follow the Rules of Hooks and leverage custom hooks to create reusable logic across your application.