Render, commit, then the effect
root.render() only schedules the first render, so its log comes first. Each render is followed by the effect, and by then the DOM already holds the new text. The click is scripted after 100 ms.
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
root.render() returned
render: count = 0
effect: the page already shows "Count: 0"
render: count = 1
effect: the page already shows "Count: 1"