🪝 What are Hooks — Using State in Functional Components

Hooks let you use state and other React features without writing class components. They make functional components more powerful while keeping code simpler and easier to reuse.

🎯 What Problem Do Hooks Solve

Before Hooks, only class components could have state. Functional components were stateless and reusable. Hooks bring state to functional components, eliminating the need for classes.

Hooks solve three main problems: sharing stateful logic between components, managing side effects, and reducing complexity in class components. They let you write state-using components without classes.

import { useState } from 'react';

// Before Hooks: Class component needed for state
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  render() {
    return (
      <button onClick={() => this.setState({ count: this.state.count + 1 })}>
        Count: {this.state.count}
      </button>
    );
  }
}

// With Hooks: Functional component with state
function CounterWithHooks() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

<details>

<summary>📚 More Examples</summary>

// Example: Multiple state variables with Hooks

function UserProfile() {
  const [name, setName] = useState('John');
  const [age, setAge] = useState(30);
  const [isActive, setIsActive] = useState(true);

  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <p>Status: {isActive ? 'Active' : 'Inactive'}</p>
      <button onClick={() => setAge(age + 1)}>Birthday</button>
    </div>
  );
}

</details>

💡 The Main Hooks

React provides several built-in Hooks for different purposes. `useState` and `useEffect` are the most common, but there are others for specific needs.

import { useState, useEffect, useContext, useReducer } from 'react';

function Example() {
  // State Hook: Manage component state
  const [count, setCount] = useState(0);

  // Effect Hook: Handle side effects
  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

<details>

<summary>📚 More Examples</summary>

// Example: Different Hook purposes

function Dashboard() {
  // useState: Component state
  const [user, setUser] = useState(null);

  // useEffect: Side effects (API calls, subscriptions)
  useEffect(() => {
    fetchUser().then(setUser);
  }, []);

  // useContext: Access context values
  const theme = useContext(ThemeContext);

  // useReducer: Complex state logic
  const [state, dispatch] = useReducer(reducer, initialState);

  return <div>{user && <p>Hello {user.name}</p>}</div>;
}

</details>

📊 Summary

🔑 Key Takeaways

• ✅ Hooks let functional components use state

• ✅ No more class components needed for stateful logic

• ✅ useState and useEffect are the main Hooks

• ✅ Hooks make code simpler and more reusable

• ✅ Hooks can be combined for complex logic

• ✅ Custom hooks let you share logic between components

Ready to practice? Challenges | Next: Rules of Hooks