React Hooks Cheat Sheet

useState – State in Functional Components

import { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
};

useEffect – Side Effects (API calls, timers, etc.)

import { useEffect } from 'react';

useEffect(() => {
  console.log("Component mounted or updated");

  return () => {
    console.log("Cleanup on unmount");
  };
}, [/* dependencies */]);

useRef – Mutable Ref Object / DOM Reference

import { useRef, useEffect } from 'react';

const InputFocus = () => {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} />;
};

useContext – Accessing Context Values

import { useContext } from 'react';
import { ThemeContext } from './ThemeProvider';

const ThemedComponent = () => {
  const theme = useContext(ThemeContext);
  return <div style={{ color: theme.color }}>Themed!</div>;
};

useReducer – State Management Alternative to useState

import { useReducer } from 'react';

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

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return <button onClick={() => dispatch({ type: 'increment' })}>{state.count}</button>;
};

useMemo – Memoize Expensive Calculations

import { useMemo } from 'react';

const Expensive = ({ num }) => {
  const result = useMemo(() => slowFunction(num), [num]);
  return <div>{result}</div>;
};

useCallback – Memoize Functions

import { useCallback } from 'react';

const handleClick = useCallback(() => {
  console.log("Clicked");
}, []);

useLayoutEffect – Like useEffect but fires *before* paint

import { useLayoutEffect } from 'react';

useLayoutEffect(() => {
  // DOM measurements or sync layout logic
}, []);

useImperativeHandle – Customize `ref` exposed from child

import { forwardRef, useImperativeHandle, useRef } from 'react';

const FancyInput = forwardRef((props, ref) => {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current.focus()
  }));

  return <input ref={inputRef} />;
});