React Hooks: useContext, useRef, and useMemo

React provides useful hooks to manage shared data, access DOM elements, and improve performance.

1. useContext

useContext lets you share data between components without passing props through every level.

import { createContext, useContext } from "react";

const ThemeContext = createContext("light");

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

function Child() {
  const theme = useContext(ThemeContext);
  return <p>Theme: {theme}</p>;
}

Use case: Sharing themes, user details, or language preferences.

2. useRef

useRef stores a value between renders without triggering a re-render when that value changes. It can also reference DOM elements.

import { useRef } from "react";

function App() {
  const inputRef = useRef(null);

  return (
    <>
      <input ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>
        Focus Input
      </button>
    </>
  );
}

Use case: Focusing inputs, storing timer IDs, or tracking values.

3. useMemo

useMemo caches a calculated value between renders until its dependencies change.

import { useMemo, useState } from "react";

function App() {
  const [number, setNumber] = useState(5);

  const squared = useMemo(() => {
    return number * number;
  }, [number]);

  return (
    <>
      <p>Squared: {squared}</p>
      <button onClick={() => setNumber(number + 1)}>
        Increase
      </button>
    </>
  );
}

Use case: Avoiding expensive recalculations when dependencies haven't changed.

Quick Summary

• useContext → Shares data across components.
• useRef → Stores values or references DOM elements.
• useMemo → Caches calculated values.

Tip: Don't use useMemo everywhere. Use it when caching a calculation provides a meaningful benefit.