useOnlineStatus and useMediaQuery
The script fires fake offline and online events. In a real browser, turn on "Offline" in DevTools' Network panel. Open the example in a new tab and make the window narrower than 500 px to see the media query flip.
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.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write useCounter as a recipe: useCounter({ min = 0, max = 10 } = {}) returns { count, inc, dec } and never leaves the range.
Write useWindowWidth() that returns window.innerWidth and updates on resize, with cleanup.
Use useDebounce and useLocalStorage together: a notes textarea that saves its text 500 ms after the user stops typing.
Explain it without notes
How does useDebounce make sure only the last value is used?
Why does useLocalStorage read storage in a lazy initialiser and write in an effect?
Why is a naive useInterval either stale or constantly restarting, and how does useEffectEvent fix it?
What is the difference between the ref-based and the state-based usePrevious?
Preview
Console
Nothing logged yet.Expected console output
Offline: changes will sync later
Online