Sync the tab title with state
The tab title is outside React: JSX can't render it. The effect copies state into it after every render, so the title can never fall behind the screen.
An effect is code that keeps a component in sync with something outside React (a timer, a connection, the page title, a browser API); you write it with useEffect, and React runs it after the component's changes are committed to the screen.
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 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a component Clock that sets document.title to "Hello, " + name using a name prop.
In the chat example, which log lines appear if the component re-renders 5 times because of typing? Why?
Explain it without notes
What is an effect in React, and how is it different from an event handler?
Describe exactly when a useEffect callback runs relative to rendering, the DOM commit and the browser paint.
Why can't side effects go straight into the component body?
Give three examples of external systems you'd sync with an effect, and one side effect that should not be an effect.
Preview
Console
Nothing logged yet.Expected console output
title is now: (3) Inbox
title is now: (2) Inbox
title is now: (1) Inbox
title is now: Inbox