The client-side framework: rendering and reactivity
What the client-side framework does by itself, read on React: declarative rendering, state and re-rendering, virtual DOM and keys, effects and dependencies, lifecycle, one-way state store.
- 27 cards
- 5 topics
- Free
The outline, topic by topic
Each topic is weighted the way the exam weighs it.
- Concepts
- Questions
- Sort and link
- The steps
- Understand
A few cards from the deck
Declarative rendering: what is it?
Show the answer
A way of writing an interface by describing what it must show for a given state, without saying how to change the page step by step.
Instead of
document.querySelector('p').textContent = n, you write<p>{n}</p>: the framework works out the changes to make to the page.This component is displayed (without
StrictMode), then the button is clicked once. Which lines come out in the console from the click on?
```javascript
function Compteur() {
const [n, setN] = useState(0);
console.log("rendu", n);
useEffect(() => {
console.log("effet", n);
return () => console.log("nettoyage", n);
}, [n]);
return <button onClick={() => setN(n + 1)}>{n}</button>;
}`rendu 1,nettoyage 0,effet 1nettoyage 0,rendu 1,effet 1rendu 1,effet 1,nettoyage 0effet 1,rendu 1
Show the answer
rendu 1,nettoyage 0,effet 1The render comes first. Once the page is updated, React runs the cleanup of the previous effect (which kept
nequal to 0) then the new effect. The component printedrendu 0andeffet 0on first display.In declarative rendering, the interface is a … of the state: for the same state, a component always describes the same display.
Show the answer
In declarative rendering, the interface is a function of the state: for the same state, a component always describes the same display.
That is why a component must not change the page or the state during its render: that belongs to event handlers and effects.
Reactivity: what is it?
Show the answer
The property of an interface that redraws itself when the data it depends on changes.
In React, calling the state update function (
setN) schedules a new render; changing an ordinary variable redraws nothing.Updating a React component after a state change: which step comes after "Call the component's function (render)"?
- Comparison with the previous tree (reconciliation)
- Update of the real DOM
- Cleanup of the effects whose dependencies changed
- Run of the effects
Show the answer
Comparison with the previous tree (reconciliation)
The render writes nothing to the page: it describes. The page is only changed after the comparison. Effects come last, once the display is up to date, cleanup first.