Command Palette

Search for a command to run...

Hectal
Phase 10Intermediate11 of 28 in React

Custom Hooks and Reusable Logic

Write your own hooks, reuse proven recipes, subscribe to outside stores with useSyncExternalStore, and know when compound components, render props or HOCs still fit.

By now your components use state, effects, refs, context and reducers. Soon you notice the same logic in many places: the same "is the user online?" effect, the same "save this to localStorage" code, the same timer. Copying it works until you find a bug and must fix it in six files. This phase teaches the React way to share logic: custom hooks, plain functions whose names start with use and that call other hooks.

You'll extract your first hooks, build a toolbox of recipes teams use every day (useToggle, useLocalStorage, useDebounce, useOnlineStatus, useMediaQuery, usePrevious, useInterval), and learn useSyncExternalStore, the hook for reading data that lives outside React, such as browser APIs and store libraries. You'll meet the small built-in hooks (useId, useDebugValue) and take a tour of every hook React 19.2 ships, with the topic where each is taught.

Then you'll see the patterns React developers used before hooks (compound components, render props and higher-order components), why hooks replaced most of them, and where each one still fits. The phase ends with how to design a good hook: its name, its inputs, what it returns, and when not to write one at all.

0/6 · 0%
6 topics ~3 h 23 code blocks & diagrams
Start with the first topic
1
10.1

Custom Hooks: Reusing Logic

A custom hook is a function whose name starts with use and that calls other hooks; it lets many components share stateful logic, while every component that calls it still gets its own separate state.

31 min 1 diagram 3 code practice

2
10.2

Useful Hook Recipes

Seven small hooks cover jobs almost every app has: useToggle, useLocalStorage, useDebounce, useOnlineStatus, useMediaQuery, usePrevious and useInterval; building them yourself teaches the patterns behind every hook library.

36 min 5 code practice

3
10.3

useSyncExternalStore: Subscribing to Outside Stores

useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?) reads a value that lives outside React (a browser API or a store library) and re-renders when it changes, without the tearing bugs that a hand-made effect-and-state subscription can have.

31 min 4 code practice

4
10.4

useId, useDebugValue and Other Small Hooks

useId makes unique, stable ids that match between server and browser, for connecting labels and ARIA attributes; useDebugValue labels your custom hooks in React DevTools; and React 19.2 has twenty built-in hooks in all, each with a clear job.

26 min 4 code practice

5
10.5

Reuse Patterns: Compound Components, Render Props and HOCs

Compound components share state through context so related parts can be arranged freely, render props let a component hand data to a function you supply, and higher-order components wrap a component to add props; hooks replaced most render props and HOCs, but each pattern still has a place.

31 min 3 code practice

6
10.6

Designing Good Hooks

A good hook is named after what it does (useChatRoom, not useMount), takes clear inputs (an options object when there are several), returns stable values and functions so callers' effects don't re-run, and exists only when it actually uses hooks and hides real complexity.

29 min 3 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Your first hook: useToggle

Write a custom hook useToggle(initial = false) that keeps a true/false value in state and returns [on, toggle], where toggle flips the value.

Beginner
2

One hook, two independent counters

Write useCounter(initial, step) that returns { count, increment, reset }. increment adds step; reset goes back to initial.

Beginner
3

useDebounce for a search box

Write useDebounce(value, delay) that returns value only after it has stopped changing for delay milliseconds (use an effect with a setTimeout and a cleanup).

Intermediate
4

useLocalStorage: remember the name

Write useLocalStorage(key, initialValue) that works like useState but reads the saved value (stored as JSON) on the first render and saves the value as JSON whenever it changes.

Intermediate
5

Read an outside store with useSyncExternalStore

The page has a plain DOM button (id="outside", not React) that changes themeStore, a tiny store written outside React with getTheme(), toggle() and subscribe(listener).

Intermediate
6

Mini build: compound Tabs

Build compound components Tabs, Tab and TabPanel that share the active tab through context (createContext + useContext), so the Course component below works without passing state by hand.

Intermediate