Mastering React Hooks: A Complete Guide

React Hooks revolutionized the way we write React components by allowing us to use state and other React features in functional components. In this comprehensive guide, we’ll explore the most important hooks and how to use them effectively.

What are React Hooks?

Hooks are functions that let you “hook into” React state and lifecycle features from function components. They were introduced in React 16.8 and have become the standard way to write React components.

Rules of Hooks

Before diving into specific hooks, it’s important to understand the rules:

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 them from React function components or custom hooks

Essential React Hooks

useState Hook

The useState hook allows you to add state to functional components.

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect Hook

The useEffect hook lets you perform side effects in function components. It serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount combined.

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

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchUser() {
      setLoading(true);
      try {
        const response = await fetch(`/api/users/${userId}`);
        const userData = await response.json();
        setUser(userData);
      } catch (error) {
        console.error('Error fetching user:', error);
      } finally {
        setLoading(false);
      }
    }

    fetchUser();
  }, [userId]); // Dependency array

  if (loading) return <div>Loading...</div>;
  if (!user) return <div>User not found</div>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

useContext Hook

The useContext hook provides a way to consume context values without wrapping components in context consumers.

import React, { useContext, createContext } from 'react';

const ThemeContext = createContext();

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedComponent />
    </ThemeContext.Provider>
  );
}

function ThemedComponent() {
  const theme = useContext(ThemeContext);

  return (
    <div className={`theme-${theme}`}>
      Current theme: {theme}
    </div>
  );
}

Advanced Hooks

useReducer Hook

For more complex state logic, useReducer is usually preferable to useState.

import React, { 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 initialState;
    default:
      throw new Error();
  }
}

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

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

useMemo Hook

useMemo returns a memoized value and only recomputes when dependencies change.

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

function ExpensiveComponent({ items, filter }) {
  const [count, setCount] = useState(0);

  const filteredItems = useMemo(() => {
    console.log('Filtering items...');
    return items.filter(item => item.category === filter);
  }, [items, filter]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <ul>
        {filteredItems.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

useCallback Hook

useCallback returns a memoized callback function.

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

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

  const handleClick = useCallback(() => {
    console.log('Button clicked');
  }, []); // No dependencies, so callback never changes

  return (
    <div>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <Child onClick={handleClick} />
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

const Child = React.memo(({ onClick }) => {
  console.log('Child rendered');
  return <button onClick={onClick}>Click me</button>;
});

Custom Hooks

Custom hooks allow you to extract component logic into reusable functions.

import { useState, useEffect } from 'react';

// Custom hook for fetching data
function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        setLoading(true);
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, [url]);

  return { data, loading, error };
}

// Using the custom hook
function UserList() {
  const { data: users, loading, error } = useFetch('/api/users');

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Best Practices

1. Use Multiple State Variables

Instead of putting all state in a single object, split it into multiple state variables:

// Good
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [age, setAge] = useState(0);

// Less ideal
const [user, setUser] = useState({ name: '', email: '', age: 0 });

2. Optimize with useMemo and useCallback

Use these hooks to prevent unnecessary re-renders:

const expensiveValue = useMemo(() => {
  return heavyComputation(data);
}, [data]);

const handleClick = useCallback(() => {
  doSomething(id);
}, [id]);

3. Extract Custom Hooks

When you find yourself repeating logic, extract it into a custom hook:

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

Common Pitfalls

1. Missing Dependencies in useEffect

Always include all dependencies in the dependency array:

// Wrong
useEffect(() => {
  fetchUser(userId);
}, []); // Missing userId dependency

// Correct
useEffect(() => {
  fetchUser(userId);
}, [userId]);

2. Infinite Re-renders

Be careful with object and function dependencies:

// This creates infinite loop
const config = { apiKey: 'abc123' };
useEffect(() => {
  fetchData(config);
}, [config]); // config is recreated on every render

// Better approach
const API_KEY = 'abc123';
useEffect(() => {
  fetchData({ apiKey: API_KEY });
}, []); // No dependencies needed

Conclusion

React Hooks provide a powerful and flexible way to build React applications. They make code more reusable, easier to test, and help avoid common pitfalls of class components. By mastering hooks like useState, useEffect, useContext, and creating your own custom hooks, you can write more maintainable and efficient React applications.

Remember to follow the rules of hooks, optimize performance with useMemo and useCallback when necessary, and always keep your dependency arrays accurate. With practice, hooks will become second nature and significantly improve your React development experience.