Article

5 Essential React Hooks You Must Master in 2026

DevNotes Team

📅 February 15, 2026

⏱️ 8 min

React Hooks have completely changed the way we write components. But not all hooks are used effectively. This article summarizes the 5 most important hooks that every React developer should master.

1. `useState` — Basic State Management

The first and most common hook. But many developers don’t know how to use functional updates to avoid stale state.


// ❌ Incorrect — may lead to stale state
const [count, setCount] = useState(0);
const increment = () => setCount(count + 1);
 
// ✅ Correct — always uses the latest value
const increment = () => setCount((prev) => prev + 1);

When to use functional updates?

When the new state depends on the previous state
In setTimeout, setInterval, or event listeners
In functions passed through many components

2. `useEffect` — Side Effects Done Right

useEffect is powerful but very easy to misuse. Here is a common pattern:


useEffect(() => {
  const controller = new AbortController();
 
  async function fetchData() {
    try {
      const res = await fetch('/api/users', {
        signal: controller.signal,
      });
      const data = await res.json();
      setUsers(data);
    } catch (err) {
      if (err.name !== 'AbortError') {
        setError(err.message);
      }
    }
  }
 
  fetchData();
 
  // ✅ Cleanup — cancel request when component unmounts
  return () => controller.abort();
}, []);

Common Mistakes

Mistake	Solution
Missing dependency array	Always declare all deps
No cleanup	Use `return () => cleanup()`
Fetch in useEffect not cancelled	Use `AbortController`
Infinite loop	Check reference equality of deps

3. `useMemo` — Memoizing Expensive Calculations

useMemo helps avoid re-calculating when unnecessary. But don’t overdo it!


// ✅ Use when computation is expensive
const sortedItems = useMemo(() => {
  return items.filter((item) => item.active).sort((a, b) => a.name.localeCompare(b.name));
}, [items]);
 
// ❌ NOT needed — computation is too simple
const fullName = useMemo(() => {
  return `${firstName} ${lastName}`;
}, [firstName, lastName]);
// Just use: const fullName = `${firstName} ${lastName}`;

4. `useCallback` — Stabilizing Function References


function ParentComponent() {
  const [count, setCount] = useState(0);
 
  // ✅ Function is not recreated every render
  const handleClick = useCallback(() => {
    setCount((prev) => prev + 1);
  }, []);
 
  return <ExpensiveChild onClick={handleClick} />;
}

5. `useRef` — More Than Just DOM References

Many devs only use useRef for DOM references. But it’s also very useful as a mutable container that doesn’t trigger re-renders:


function Timer() {
  const intervalRef = useRef<number | null>(null);
  const countRef = useRef(0);
 
  const start = () => {
    intervalRef.current = window.setInterval(() => {
      countRef.current += 1;
      console.log('Tick:', countRef.current);
    }, 1000);
  };
 
  return (
    <div>
      <button onClick={start}>Start</button>
    </div>
  );
}

Conclusion

Mastering these 5 hooks gives you a solid foundation for building almost any React application. Happy coding! 🚀

1. useState — Basic State Management

When to use functional updates?

2. useEffect — Side Effects Done Right