Topic
Definition
A custom Hook is a function starting with use that composes Hooks to share stateful logic without sharing component markup.
In simpler words
Extract repeated behavior into useSomething; each caller still receives independent state.
Hook composition, inputs, returned APIs, and rules of Hooks.
Hook composition, inputs, returned APIs, and rules of Hooks.
Start by identifying which value or browser behavior changes. Then describe the UI from that current input instead of editing the DOM as a separate source of truth.
function useToggle(initial = false) {
const [on, setOn] = useState(initial);
return { on, toggle: () => setOn(value => !value) };
}Read the example from data and control flow to the resulting UI. Keep the component boundary small.
Keep rendering as a calculation. Put user-triggered changes in event handlers, preserve UI memory in state, and reserve external synchronization for Effects or the server-state layer.
Name values by their UI meaning, test the loading and error path when data is remote, and avoid keeping two editable copies of the same value.
Ask before adding code: is this local UI memory, shared client state, or Nest-owned server state?
Definition
High-bug areas are places where a small API misuse looks correct but produces stale UI, duplicate work, or silent failures.
In simpler words
Each mistake below shows Wrong vs Right code — compare them side by side.
When something misbehaves, match the symptom to a pattern below before rewriting the feature.
Prefer fixing the ownership or update path over adding another Effect or sync step.
// Wrong
function useX(flag) {
if (!flag) return {};
const [v, setV] = useState(0);
}
// Right
function useX(flag) {
const [v, setV] = useState(0);
if (!flag) return {};
...
}Hooks must run unconditionally.
// Wrong
let shared = 0;
function useCounter() {
return { n: shared, inc: () => shared++ };
}
// Right
function useCounter() {
const [n, setN] = useState(0);
return { n, inc: () => setN(x => x + 1) };
}Each hook call needs its own state.
// Wrong
function useTickets() {
useEffect(() => { list().then(setData); }, []);
return data; // no error/loading
}
// Right
function useTickets() {
return useQuery({ queryKey: ["tickets"], queryFn: list });
}Callers need loading and error states.
Live playground
Change one input at a time and predict the next render.
Imagine useOnline() wraps this state + event subscription.
Connected
function useOnline() { /* subscribe once */ }Test
At least 10 questions — mix of concept, syntax, practical, and logic. Score ≥ 80% (enforced by the API) to save progress.
Checking your session…
10 questions · concept 3 · syntax 3 · practical 2 · logic 2