React Hooks Cheat Sheet

React Hooks let you use state and lifecycle features in function components. This guide covers every built-in hook with practical examples.

useState

const [count, setCount] = useState(0);
const [user, setUser] = useState({ name: "", age: 0 });
const [items, setItems] = useState([]);

setCount(count + 1);
setCount(prev => prev + 1); // functional update

setUser(prev => ({ ...prev, name: "Alice" }));
setItems(prev => [...prev, newItem]);

useEffect

// Run on every render
useEffect(() => { console.log("rendered"); });

// Run once on mount
useEffect(() => { fetchData(); }, []);

// Run when deps change
useEffect(() => { updateTitle(count); }, [count]);

// Cleanup
useEffect(() => {
  const sub = subscribe();
  return () => sub.unsubscribe(); // cleanup
}, []);

useContext

const ThemeContext = createContext("light");

// Provider
<ThemeContext.Provider value="dark">
  <App />
</ThemeContext.Provider>

// Consumer
const theme = useContext(ThemeContext);

useRef

const inputRef = useRef(null);
const countRef = useRef(0);

// Access DOM element
<input ref={inputRef} />
inputRef.current.focus();

// Mutable value that persists across renders
countRef.current += 1; // no re-render

useMemo

// Memoize expensive calculations
const sorted = useMemo(
  () => items.sort((a, b) => a.name.localeCompare(b.name)),
  [items]
);

// Only recalculates when items changes

useCallback

// Memoize functions (prevent unnecessary re-renders)
const handleClick = useCallback(() => {
  setCount(c => c + 1);
}, []); // stable reference

<ChildComponent onClick={handleClick} />

useReducer

const reducer = (state, action) => {
  switch (action.type) {
    case "increment": return { count: state.count + 1 };
    case "decrement": return { count: state.count - 1 };
    default: return state;
  }
};

const [state, dispatch] = useReducer(reducer, { count: 0 });
dispatch({ type: "increment" });

Custom Hooks

function useLocalStorage(key, initial) {
  const [value, setValue] = useState(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initial;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

// Usage
const [name, setName] = useLocalStorage("name", "");

Rules of Hooks

• Only call hooks at the top level (not in loops, conditions, or nested functions)
• Only call hooks from React function components or custom hooks
• Custom hooks must start with "use"

When to Use What

• useState — simple state
• useReducer — complex state with multiple actions
• useEffect — side effects (API calls, subscriptions)
• useMemo — expensive calculations
• useCallback — stable function references for child components
• useRef — DOM access or mutable values