Understanding React Hooks

React Hooks revolutionized how we write React components. They allow you to use state and other React features in functional components.

useState Hook

The useState hook lets you add state to functional components:

javascript

import { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect Hook

useEffect handles side effects in functional components:

javascript

import { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // Empty dependency array means this runs once

  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
}