23. Custom hooks

A custom hook is just a function starting with `use` that calls other hooks — perfect for sharing logic like polling a balance or debouncing a search field across screens.

import { useEffect, useState } from "react";

function useBalance(address: string) {
  const [balance, setBalance] = useState<number | null>(null);
  useEffect(() => {
    let active = true;
    fetchBalance(address).then((b) => { if (active) setBalance(b); });
    return () => { active = false; };
  }, [address]);
  return balance;
}

Custom hooks don't share state between different components that call them — each call gets its own independent state, just like calling `useState` directly would.

Read in another language

How to study this topic

Scoring

Check your understanding

Badges