Codstak
    • Home
    • DSA
    • JavaScript
    • TypeScript
    • Node.js
    • React
    • More↓
      BlogReact PrepPricingDiscordNewsletterLeaderboard
    React challenge/easy

    Document Title Sync

    Challenge workspace

    15-20 min
    Effects and data fetchingPath 21/40
    EffectsState & events

    Suggested first

    Repair a Drifting Order Summary

    Your workspace must pass its server-side browser checks to complete this challenge.

    Document Title Sync

    The input controls a post title, but the browser tab never updates. Add a useEffect to keep document.title in sync.

    Requirements

    • Import useEffect and call it with a dependency on title.
    • When title is non-empty, set document.title to the title text.
    • When title is empty, set document.title to DEFAULT_TITLE.
    • Return a cleanup function that resets document.title to DEFAULT_TITLE.

    What to explain

    Why does this belong in useEffect rather than the onChange handler? What does the cleanup function protect against?

    Progressive hints

    1. useEffect(() => { /* ... */ }, [title]) runs after every render where title changed.
    2. document.title = someString is all it takes to update the browser tab.
    3. The cleanup function runs before the next effect and on unmount — it's the right place to undo the side effect.