React Hooks: A Complete Guide

Hooks revolutionized how we write React components, enabling state and side effects in functional components.

useState

Manage component state:

const [count, setCount] = useState(0)

return (
  <button onClick={() => setCount(count + 1)}>
    Clicked {count} times
  </button>
)

useEffect

Handle side effects:

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

useCallback

Memoize functions:

const handleClick = useCallback(() => {
  console.log('Clicked')
}, [])

useMemo

Memoize expensive calculations:

const expensiveValue = useMemo(() => {
  return computeExpensiveValue(a, b)
}, [a, b])

Custom Hooks

Create reusable logic:

function useLocalStorage(key: string, initialValue: string) {
  const [value, setValue] = useState(() => {
    return localStorage.getItem(key) ?? initialValue
  })

  useEffect(() => {
    localStorage.setItem(key, value)
  }, [key, value])

  return [value, setValue]
}

Best Practices

1. Always use hooks at the top level
2. Only call hooks from React functions
3. Use ESLint plugin for hooks rules
4. Keep hooks simple and focused

Conclusion

Hooks make React code more reusable and easier to understand.