React Hooks: A Complete Guide

Hooks changed how we write React components. Let's explore the most important ones.

useState Hook

Manage component state:

const [count, setCount] = useState(0)

function increment() {
  setCount(count + 1)
}

useEffect Hook

Handle side effects:

useEffect(() => {
  document.title = `Count: ${count}`
  
  return () => {
    // Cleanup
  }
}, [count])

Hook Comparison Table

Here's a quick comparison of the most common hooks:

| Hook | Purpose | Returns | Common Use Case | |------|---------|---------|----------------| | useState | Manage state | [value, setter] | Form inputs, toggles | | useEffect | Side effects | Cleanup function | API calls, subscriptions | | useContext | Access context | Context value | Theme, auth state | | useRef | Persist values | Ref object | DOM access, timers | | useMemo | Memoize value | Cached value | Expensive calculations | | useCallback | Memoize function | Cached function | Prevent re-renders |

Component Lifecycle

graph TD
    A[Mount] --> B[Render]
    B --> C[useEffect]
    C --> D[Update]
    D --> B
    D --> E[Unmount]
    E --> F[Cleanup]

Custom Hooks

Create reusable logic:

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    return localStorage.getItem(key) || initialValue
  })
  
  useEffect(() => {
    localStorage.setItem(key, value)
  }, [key, value])
  
  return [value, setValue]
}

Common Patterns

Fetching Data

function UserProfile({ userId }) {
  const [user, setUser] = useState(null)
  const [loading, setLoading] = useState(true)
  
  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => {
        setUser(data)
        setLoading(false)
      })
  }, [userId])
  
  if (loading) return <div>Loading...</div>
  return <div>{user.name}</div>
}

Tips

• Always include dependencies in useEffect
• Don't call hooks conditionally
• Keep effects focused on one task

Conclusion

Hooks make React components cleaner and more reusable!