React Hooks Best Practices

React Hooks have revolutionized the way we write React components by allowing us to use state and other React features without writing a class. While they offer a simpler and more intuitive way to manage state and side-effects, it's crucial to follow best practices to ensure clean, efficient, and maintainable code. In this article, we'll explore some best practices for using React Hooks.

1. Use Hooks at the Top Level

It's recommended to use Hooks at the top level of your React functional components, not inside loops, conditions, or nested functions.

Bad Example:

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

  function handleClick() {
    setCount(count + 1);
  }

  if (count === 5) {
    useEffect(() => {
      document.title = `Count: ${count}`;
    });
  }

  return <button onClick={handleClick}>Count: {count}</button>;
}

Good Example:

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

  useEffect(() => {
    if (count === 5) {
      document.title = `Count: ${count}`;
    }
  }, [count]);

  const handleClick = () => {
    setCount(count + 1);
  };

  return <button onClick={handleClick}>Count: {count}</button>;
}

2. Use the `useEffect` Hook Wisely

The useEffect Hook is a powerful tool for handling side-effects in functional components. However, it's essential to understand its dependencies to prevent unnecessary re-renders.

Bad Example:

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

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then((res) => res.json())
      .then((data) => setUser(data));
  }, []); // Dependency array is empty

  return <div>{user ? user.name : 'Loading...'}</div>;
}

Good Example:

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

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then((res) => res.json())
      .then((data) => setUser(data));
  }, [userId]); // Dependency array includes userId

  return <div>{user ? user.name : 'Loading...'}</div>;
}

3. Use Custom Hooks for Reusable Logic

Custom Hooks allow you to extract component logic into reusable functions. This is particularly useful for sharing logic between different components.

Example:

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

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}

function UserProfile({ userId }) {
  const { data: user, loading } = useFetch(`/api/users/${userId}`);

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

  return <div>{user.name}</div>;
}

4. Avoid Using Hooks Inside Loops

Avoid using Hooks inside loops or conditions as it can lead to unexpected behavior and bugs.

Bad Example:

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

  for (let i = 0; i < 5; i++) {
    useEffect(() => {
      console.log(`Count: ${count}`);
    }, [count]);
  }

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

Good Example:

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

  useEffect(() => {
    console.log(`Count: ${count}`);
  }, [count]);

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