React Hooks let you use React features from your functional components. Here is a guide to the most important built-in hooks and how to use them with examples.
State Hooks π§
useState
useState
allows you to add state to a functional 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>
);
}
useReducer
useReducer
is useful for managing complex state with update logic inside a reducer function.
import { useReducer } from "react";
const initialState = { count: 0 };
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
throw new Error();
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
<button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
</div>
);
}
Context Hooks π
useContext
useContext
allows a component to subscribe to a context without passing props.
import { useContext } from "react";
import { ThemeContext } from "./ThemeContext";
function ThemedButton() {
const theme = useContext(ThemeContext);
return (
<button style={{ background: theme.background, color: theme.color }}>
Themed Button
</button>
);
}
Ref Hooks πͺ
useRef
useRef
lets you access a DOM element directly.
import { useRef } from "react";
function TextInput() {
const inputRef = useRef(null);
const focusInput = () => {
inputRef.current.focus();
};
return (
<div>
<input ref={inputRef} type="text" />
<button onClick={focusInput}>Focus Input</button>
</div>
);
}
Effect Hooks π
useEffect
useEffect
is used for side effects in components, like fetching data or subscribing to events.
import { useEffect, useState } from "react";
function DataFetcher({ url }) {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
const response = await fetch(url);
const result = await response.json();
setData(result);
};
fetchData();
}, [url]);
return (
<div>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
}
Performance Hooks β‘
useMemo
useMemo
memoizes an expensive calculation and reuses it.
import { useMemo } from "react";
function TodoList({ todos, tab }) {
const visibleTodos = useMemo(() => {
return todos.filter(todo => todo.tab === tab);
}, [todos, tab]);
return (
<ul>
{visibleTodos.map(todo => (
<li key={todo.id}>{todo.text}</li>
))}
</ul>
);
}
useCallback
useCallback
memoizes a function to avoid recreating it on every render.
import { useCallback } from "react";
function ParentComponent() {
const handleClick = useCallback(() => {
console.log("Button clicked");
}, []);
return <ChildComponent onClick={handleClick} />;
}
function ChildComponent({ onClick }) {
return <button onClick={onClick}>Click me</button>;
}
Transition Hooks π
useTransition
useTransition
marks a state transition as non-blocking.
import { useState, useTransition } from "react";
function List({ items }) {
const [isPending, startTransition] = useTransition();
const [query, setQuery] = useState('');
const handleChange = (e) => {
startTransition(() => {
setQuery(e.target.value);
});
};
const filteredItems = items.filter(item => item.includes(query));
return (
<div>
<input type="text" value={query} onChange={handleChange} />
{isPending && <p>Loading...</p>}
<ul>
{filteredItems.map(item => (
<li key={item}>{item}</li>
))}
</ul>
</div>
);
}
useDeferredValue
useDeferredValue
defers updating a non-critical part of the UI.
import { useState, useDeferredValue } from "react";
function SearchResults({ query, results }) {
const deferredQuery = useDeferredValue(query);
const filteredResults = results.filter(item => item.includes(deferredQuery));
return (
<ul>
{filteredResults.map(result => (
<li key={result}>{result}</li>
))}
</ul>
);
}
Conclusion π
React Hooks are powerful tools that allow you to manage state, context, effects, and performance of your functional components efficiently. Using these hooks correctly can significantly improve the quality and maintainability of your code. Happy coding! π
Top comments (0)