🔟 Must-Know React Hooks in 2025 (with Code Example)

React Hooks changed the way we write components. In 2025, Hooks are more powerful and essential than ever — including new additions like useOptimistic and useFormStatus in React 19.

In this post, we'll cover the top 10 React hooks every developer should master in 2025, with concise code examples for each.

1. 🧠 `useState`

Used for managing state in a functional component.

import { useState } from 'react';

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

2. ⛓️ useEffect

Performs side effects like data fetching or subscriptions.

import { useEffect } from 'react';

useEffect(() => {
  console.log('Component mounted');
  return () => console.log('Component unmounted');
}, []);

3. 🌐 useContext

Access context without wrapping your component.

const ThemeContext = React.createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Click</button>;
}

4. 🧾 useReducer

For complex state logic or when state depends on previous state.

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

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

5. 🪝 useRef

Used for persisting values or accessing DOM nodes.

const inputRef = useRef(null);

function focusInput() {
  inputRef.current.focus();
}

6. ⚡ useMemo

Memoizes expensive computations to optimize performance.

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

7. 🧬 useCallback

Memoizes a function to prevent unnecessary re-renders.

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

8. 🧱 useLayoutEffect

Runs synchronously after all DOM mutations, before the browser paints.

useLayoutEffect(() => {
  console.log('Before paint');
}, []);

9. 🚀 useTransition (React 18+)

Used for concurrent rendering to make transitions smoother.

const [isPending, startTransition] = useTransition();

startTransition(() => {
  setSearchQuery(input);
});

10. 🌈 useOptimistic (React 19+)

Optimistically updates UI while waiting for confirmation.

const [optimisticComments, addOptimisticComment] = useOptimistic(comments);

function onAdd(comment) {
  addOptimisticComment([...comments, comment]);
}

🧩 Bonus: useFormStatus (React 19+)

Gives status of a form during submission.

import { useFormStatus } from 'react-dom';

function SubmitButton() {
  const { pending } = useFormStatus();
  return <button disabled={pending}>{pending ? 'Submitting...' : 'Submit'}</button>;
}

🧠 Final Thoughts

React Hooks continue to evolve — stay ahead by mastering the most essential ones and embracing new additions in React 19.

📺 Want a visual explanation? Watch the upcoming **YouTube Video on Mohit Decodes

Got stuck? Want to showcase your version? Drop a link or comment below.
📲 Follow me on Instagram or WhatsApp for daily frontend tips.

Mohit Decodes @mohitdecodes