React Hooks were introduced in React 16.8 to allow functional components to use state and lifecycle methods. They simplify state management and make components more readable.
Why Use Hooks?
Before Hooks, functional components couldn’t have local state or lifecycle methods. Hooks solve this problem by allowing stateful logic in function components.
Key Hooks
useState
Manages local state in a component.
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>
);
}useEffect
Handles side effects in functional components, such as data fetching, subscriptions, or manually changing the DOM.
import { useState, useEffect } from "react";
function Timer() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setSeconds((prev) => prev + 1);
}, 1000);
return () => clearInterval(interval); // Cleanup on unmount
}, []);
return <p>Seconds: {seconds}</p>;
}useContext
Provides a way to pass data through the component tree without prop drilling.
import { createContext, useContext } from "react";
const ThemeContext = createContext("light");
function ThemedComponent() {
const theme = useContext(ThemeContext);
return <p>Current Theme: {theme}</p>;
}useReducer
An alternative to useState for managing complex state logic.
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>
);
}useRef
Creates a mutable reference that persists across renders, often used for accessing DOM elements directly.
import { useRef, useEffect } from "react";
function FocusInput() {
const inputRef = useRef(null);
useEffect(() => {
inputRef.current.focus();
}, []);
return <input ref={inputRef} type="text" placeholder="Focus me" />;
}Custom Hooks
You can create your own Hooks to reuse logic across components.
import { useState, useEffect } from "react";
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch(url)
.then((response) => response.json())
.then((data) => {
setData(data);
setLoading(false);
});
}, [url]);
return { data, loading };
}Conclusion
React Hooks provide a powerful way to manage state and side effects in functional components, improving code readability and reusability. Mastering them is essential for modern React development.