Complete reference for core React Hooks, with examples and best practices — useState, useEffect, useContext, and custom hooks included.
Hooks for storing and updating component state.
Declare local state in a functional component.
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(c => c + 1)}>Increment</button>
</div>
);
}Manage complex state logic or multiple sub-values.
import React, { 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:
return state;
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
</div>
);
}Run side effects such as fetching, subscriptions, or manual DOM updates.
Run effect after render. Cleanup with returned function.
import React, { useEffect } from 'react';
function Example() {
useEffect(() => {
console.log('Mounted or deps changed');
return () => {
console.log('Cleanup before unmount or deps change');
};
}, []); // empty deps => runs once on mount
return <div>Check console</div>;
}Fetch data and manage loading/error states.
import React, { useEffect, useState } from 'react';
function Users() {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
let mounted = true;
fetch('/api/users')
.then(res => res.json())
.then(data => {
if (mounted) {
setUsers(data);
setLoading(false);
}
})
.catch(() => {
if (mounted) setLoading(false);
});
return () => { mounted = false; }; // avoid state update after unmount
}, []);
if (loading) return <div>Loading...</div>;
return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}Synchronous after DOM mutations — useful for measurements.
import React, { useRef, useLayoutEffect, useState } from 'react';
function Measure() {
const ref = useRef();
const [width, setWidth] = useState(0);
useLayoutEffect(() => {
if (ref.current) {
setWidth(ref.current.getBoundingClientRect().width);
}
}, []);
return (
<div>
<div ref={ref}>Measure me</div>
<p>Width: {width}px</p>
</div>
);
}Share values across the component tree without prop drilling.
Consume a React Context value inside a functional component.
import React, { createContext, useContext } from 'react';
const ThemeContext = createContext({ bg: '#fff', color: '#000' });
function ThemedBox() {
const theme = useContext(ThemeContext);
return <div style={{ background: theme.bg, color: theme.color }}>Themed box</div>;
}
function App() {
return (
<ThemeContext.Provider value={{ bg: '#111', color: '#fff' }}>
<ThemedBox />
</ThemeContext.Provider>
);
}Avoid unnecessary renders and expensive recalculations.
Memoize expensive computations between renders.
import React, { useMemo } from 'react';
function Expensive({ items }) {
const total = useMemo(() => {
// heavy calculation
return items.reduce((s, i) => s + i.value, 0);
}, [items]);
return <div>Total: {total}</div>;
}Memoize callbacks to avoid re-creating functions each render.
import React, { useCallback, useState } from 'react';
function Parent() {
const [count, setCount] = useState(0);
const handleClick = useCallback(() => {
setCount(c => c + 1);
}, []); // stable reference
return <Child onClick={handleClick} />;
}
function Child({ onClick }) {
return <button onClick={onClick}>Click</button>;
}Access DOM nodes or expose imperative methods from child components.
Hold mutable value or reference to DOM node.
import React, { useRef } from 'react';
function FocusInput() {
const inputRef = useRef(null);
return (
<div>
<input ref={inputRef} />
<button onClick={() => inputRef.current?.focus()}>Focus</button>
</div>
);
}Customize instance value when using forwardRef.
import React, { forwardRef, useImperativeHandle, useRef } from 'react';
const FancyInput = forwardRef((props, ref) => {
const inputRef = useRef();
useImperativeHandle(ref, () => ({
focus: () => inputRef.current?.focus(),
clear: () => { inputRef.current.value = ''; }
}));
return <input ref={inputRef} />;
});
function Parent() {
const ref = React.useRef();
return (
<div>
<FancyInput ref={ref} />
<button onClick={() => ref.current?.focus()}>Focus from parent</button>
</div>
);
}Utilities for stable ids and debugging.
Generate stable unique IDs for accessibility.
import React, { useId } from 'react';
function Checkbox({ label }) {
const id = useId();
return (
<div>
<input id={id} type="checkbox" />
<label htmlFor={id}>{label}</label>
</div>
);
}Show debug info for custom hooks in React DevTools.
import { useDebugValue, useState, useEffect } from 'react';
function useFriendStatus(friendId) {
const [status, setStatus] = useState(null);
useEffect(() => {
// subscribe to friend status...
}, [friendId]);
useDebugValue(status ? 'online' : 'offline');
return status;
}Encapsulate reusable logic into custom hooks.
Simple boolean toggle hook.
import { useState, useCallback } from 'react';
function useToggle(initial = false) {
const [on, setOn] = useState(initial);
const toggle = useCallback(() => setOn(v => !v), []);
return [on, toggle];
}
// Usage
function Example() {
const [on, toggle] = useToggle();
return <button onClick={toggle}>{on ? 'ON' : 'OFF'}</button>;
}Reusable data fetching hook with loading & error states.
import { useState, useEffect } from 'react';
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
let mounted = true;
setLoading(true);
fetch(url)
.then(r => r.json())
.then(json => {
if (mounted) {
setData(json);
setLoading(false);
}
})
.catch(err => {
if (mounted) {
setError(err);
setLoading(false);
}
});
return () => { mounted = false; };
}, [url]);
return { data, loading, error };
}
// Usage
function Users() {
const { data, loading } = useFetch('/api/users');
if (loading) return <div>Loading...</div>;
return <pre>{JSON.stringify(data, null, 2)}</pre>;
}Guidelines for writing reliable and performant hooks.
Always call hooks at the top level and only from React functions.
// ✅ Correct
function MyComponent() {
useState();
useEffect();
}
// ❌ Incorrect
if (condition) {
useState(); // don't call inside conditionals
}Avoid unnecessary re-renders and stale closures.
// Use dependencies correctly
useEffect(() => { /* ... */ }, [dep1, dep2]);
// Use useCallback/useMemo for stable references
const memoized = useMemo(() => compute(x), [x]);
const stableFn = useCallback(() => doThing(a), [a]);Practical guidelines to avoid common pitfalls and write maintainable hooks.