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.