React Hooks Overview
2025-03-292 turns3,053 charsgpt-4o
Summary
The user wanted to learn about React hooks.
Messages
Teach me hooks
React Hooks are functions that let you use state and lifecycle features inside functional components. They were introduced in React 16.8 to simplify managing state and side effects without needing class components.
---
### **Basic Hooks**
#### **1. `useState` (State Management)**
This hook allows you to add state to a functional component.
```jsx
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
export default Counter;
```
**Explanation:**
- `useState(0)` initializes `count` with `0`.
- `setCount` updates the value when the button is clicked.
---
#### **2. `useEffect` (Side Effects & Lifecycle)**
This hook is used for handling side effects like API calls, event listeners, or DOM manipulation.
```jsx
import { useState, useEffect } from "react";
function Timer() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const interval = setInterval(() => setSeconds(s => s + 1), 1000);
return () => clearInterval(interval); // Cleanup on unmount
}, []);
return <p>Timer: {seconds}s</p>;
}
export default Timer;
```
**Explanation:**
- Runs the effect **once** when the component mounts (`[]` as dependency array).
- Cleans up (`clearInterval`) when the component unmounts.
---
### **Advanced Hooks**
#### **3. `useContext` (Global State)**
Used to manage global state without prop drilling.
```jsx
import { createContext, useContext } from "react";
const ThemeContext = createContext("light");
function ThemedButton() {
const theme = useContext(ThemeContext);
return <button style={{ background: theme === "dark" ? "#333" : "#fff" }}>Theme: {theme}</button>;
}
function App() {
return (
<ThemeContext.Provider value="dark">
<ThemedButton />
</ThemeContext.Provider>
);
}
export default App;
```
**Explanation:**
- `ThemeContext` is a global state.
- `useContext(ThemeContext)` reads the value inside `ThemedButton`.
---
#### **4. `useReducer` (State Management Alternative)**
An alternative to `useState`, better for complex state logic.
```jsx
import { useReducer } from "react";
function reducer(state, action) {
switch (action.type) {
case "increment": return { count: state.count + 1 };
case "decrement": return { count: state.count - 1 };
default: return state;
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, { count: 0 });
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: "increment" })}>+</button>
<button onClick={() => dispatch({ type: "decrement" })}>-</button>
</div>
);
}
export default Counter;
```
**Explanation:**
- `useReducer(reducer, initialState)` replaces `useState` for more control.
- `dispatch({ type: "increment" })` updates state based on action type.
---
Want to learn about custom hooks or more complex patterns?
gpt-4o