Mastering React Hooks: A Simple Guide

React Hooks make building web apps easier. Let's learn how to use them with clear examples!

What are React Hooks?

Hooks let us use special React features in simple functions. They start with "use" and make our code cleaner and easier to understand.

useState: Managing Data in Components

Think of useState like a box that can hold and update information.

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

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

  return (
    <div className="p-4 text-center">
      <p className="text-xl mb-4">Count: {count}</p>
      <button 
        onClick={() => setCount(count + 1)}
        className="bg-blue-500 text-white px-4 py-2 rounded"
      >
        Click me!
      </button>
    </div>
  );
}

<br/>

Real-World Example: User Form

typescript
function UserForm() {
  const [user, setUser] = useState({
    name: '',
    email: ''
  });

  return (
    <form className="space-y-4">
      <input
        type="text"
        value={user.name}
        onChange={e => setUser({...user, name: e.target.value})}
        placeholder="Enter your name"
        className="w-full p-2 border rounded"
      />
      <input
        type="email"
        value={user.email}
        onChange={e => setUser({...user, email: e.target.value})}
        placeholder="Enter your email"
        className="w-full p-2 border rounded"
      />
    </form>
  );
}

<br/>

useEffect: Doing Things at the Right Time

useEffect helps us perform actions when something changes.

typescript
function ProfileCard() {
  const [profile, setProfile] = useState(null);

  useEffect(() => {
    // This runs when the component appears
    fetch('https://api.example.com/profile')
      .then(res => res.json())
      .then(data => setProfile(data));
  }, []); // Empty array means run once

  return (
    <div className="p-4 bg-white rounded shadow">
      {profile ? (
        <div>
          <h2>{profile.name}</h2>
          <p>{profile.bio}</p>
        </div>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

<br/>

useRef: Remembering Things Without Updates

useRef is like a sticky note that remembers information without causing updates.

typescript
function AutoFocusInput() {
  const inputRef = useRef(null);

  useEffect(() => {
    // Focus the input when it appears
    inputRef.current.focus();
  }, []);

  return (
    <input
      ref={inputRef}
      type="text"
      className="p-2 border rounded"
      placeholder="This will focus automatically"
    />
  );
}

<br/>

Tips for Using Hooks

1. Always put hooks at the top of your component
2. Don't put hooks inside loops or conditions
3. Only use hooks in React components or custom hooks
4. Keep your components simple and focused

<br/>

Common Patterns

Loading Data

typescript
function DataList() {
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://api.example.com/items')
      .then(res => res.json())
      .then(data => {
        setItems(data);
        setLoading(false);
      });
  }, []);

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

  return (
    <ul className="space-y-2">
      {items.map(item => (
        <li key={item.id} className="p-2 bg-gray-100 rounded">
          {item.name}
        </li>
      ))}
    </ul>
  );
}

<br/>

Happy coding! 🚀