React Native theorytheory 0/50 · 0%
Hooks · medium

23. Custom hooks

Extracting reusable stateful logic.

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.

Check your understanding

  1. 1. What naming convention do custom hooks follow?

  2. 2. Do two components using the same custom hook share state?

  3. 3. What can a custom hook call internally?