Master React Hooks: A Comprehensive Guide

React Hooks revolutionized how we write React components. In this guide, we'll explore the most important hooks and how to use them effectively.

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

useEffect for Side Effects

Handle side effects like data fetching, subscriptions, and DOM manipulation.

import { useEffect, useState } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));
  }, [userId]); // Re-run when userId changes
  
  return user ? <div>{user.name}</div> : <div>Loading...</div>;
}

Custom Hooks

Create reusable logic with custom hooks.

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initialValue;
  });
  
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);
  
  return [value, setValue];
}

// Usage
function App() {
  const [name, setName] = useLocalStorage('name', 'Guest');
  
  return <input value={name} onChange={e => setName(e.target.value)} />;
}

Best Practices

1. Always use the dependency array: Prevents infinite loops
2. Keep hooks at the top level: Don't call hooks inside loops or conditions
3. Name custom hooks with 'use' prefix: Follows React conventions
4. Extract reusable logic: Create custom hooks for shared functionality

Conclusion

React Hooks make functional components powerful and flexible. Master these patterns to write cleaner, more maintainable React code.