Skip to main content

React Hooks

Hooks = function component superpowers

What are Hooks?​

"Functions that let you use React features"

Hooks are functions that let you use state and other React features in function components.

"Hooks are functions that enable function components to use state, lifecycle methods, and other React features previously only available in class components."

Rules of Hooks​

Only call at top level, only in functions

  1. Only call hooks at the top level

    • Not inside loops, conditions, or nested functions

  2. Only call hooks from React functions

    • Function components or custom hooks

"Hooks must be called at the top level of function components, not conditionally or in loops."

useState​

State in function components

const [count, setCount] = useState(0);

// Update
setCount(count + 1);
// or
setCount((prev) => prev + 1);

"useState returns a state value and a function to update it, enabling state management in function components."

useEffect​

Side effects after render

useEffect(() => {
  // Side effect
  document.title = `Count: ${count}`;

  // Cleanup (optional)
  return () => {
    // Cleanup code
  };
}, [count]); // Dependencies

"useEffect handles side effects like API calls, subscriptions, or DOM manipulation, with optional cleanup and dependency arrays."

useEffect Dependencies​

Empty [] = once, [dep] = when dep changes, none = every render

useEffect(() => {
  // Runs on every render
});

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

useEffect(() => {
  // Runs when count changes
}, [count]);

"The dependency array controls when useEffect runs: empty array runs once, with dependencies runs when they change, no array runs every render."

useContext​

Access context without nesting

const ThemeContext = createContext();

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Component />
    </ThemeContext.Provider>
  );
}

function Component() {
  const theme = useContext(ThemeContext);
  return <div>{theme}</div>;
}

"useContext allows components to consume context values without prop drilling."

useReducer​

Complex state management

const [state, dispatch] = useReducer(reducer, initialState);

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    default:
      return state;
  }
}

"useReducer manages complex state logic with a reducer function, similar to Redux pattern."

useMemo​

Memoize expensive calculations

const expensiveValue = useMemo(() => {
  return computeExpensiveValue(a, b);
}, [a, b]);

"useMemo memoizes expensive calculations, only recomputing when dependencies change."

9️⃣ useCallback​

Memoize functions

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

Prevents function recreation on every render.

"useCallback returns a memoized callback function, preventing unnecessary re-renders of child components."

useRef​

Mutable value that persists

const inputRef = useRef(null);

<input ref={inputRef} />;

// Access DOM
inputRef.current.focus();

// Store mutable value
const countRef = useRef(0);
countRef.current = 5; // Doesn't trigger re-render

"useRef provides a mutable ref object that persists across renders, useful for DOM references or storing mutable values."

Custom Hooks​

Reusable hook logic

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount((c) => c + 1);
  const decrement = () => setCount((c) => c - 1);

  return { count, increment, decrement };
}

// Use
const { count, increment } = useCounter(10);

"Custom hooks extract and reuse stateful logic, following the naming convention of starting with 'use'."

"React Hooks enable function components to use state and lifecycle features. useState manages state, useEffect handles side effects with dependency arrays, useContext accesses context, useReducer manages complex state, useMemo/useCallback optimize performance, and useRef provides mutable references. Hooks must be called at the top level. Custom hooks extract reusable logic."

🧠 Ultra-Short Cheat Sheet​

useState (state)
useEffect (side effects)
useContext (context)
useReducer (complex state)
useMemo (memoize values)
useCallback (memoize functions)
useRef (mutable ref)
Custom hooks (reusable logic)
Top level only