Rendering, events and effects side by side
Typing re-renders the component, but the [] dependency array means the connection is not redone. Sending happens only on click. Each kind of code has its own home.
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
render: building the JSX
effect: connected to #general
event: sent "hello"