React Hooks Complete Guide: useState and useEffect

Understanding React Hooks

React Hooks revolutionized how we write React components by allowing us to use state and lifecycle features in functional components.

useState Hook

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 Hook

Handle side effects like data fetching, subscriptions, or 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]); // Dependency array
  
  return user ? <div>{user.name}</div> : <div>Loading...</div>;
}

Best Practices

• Always include all dependencies in useEffect dependency array
• Clean up side effects by returning a cleanup function
• Don't call hooks inside loops, conditions, or nested functions
• Use multiple useEffect hooks to separate concerns

Conclusion

React Hooks make functional components powerful and clean. Master these fundamentals before moving to advanced hooks like useReducer and useContext.