FrançaisGet started

Front-end framework: state

A component's local state and the render that follows, derived state, lifting state to the common ancestor, the shared store, and updating without changing in place.

  • 25 cards
  • 5 topics
  • Free
Study this deck

The outline, topic by topic

Each topic is weighted the way the exam weighs it.

  1. Concepts
  2. Questions
  3. Sort and link
  4. Scenarios
  5. Understand

A few cards from the deck

  • Component state: what is it?

    Show the answer

    A piece of data a component keeps from one render to the next and whose change triggers a new display.

    An ordinary variable inside a function is recreated on every render; state is kept by the framework.

  • The counter is 0 and the button is clicked once. What is n on the next render?

    ```jsx
    const [n, setN] = useState(0);

    function clic() {
    setN(n + 1);
    setN(n + 1);
    }
    `

    • 1
    • 2
    • 0
    • 3
    Show the answer

    1

    During this render, n is 0 throughout the function: both calls ask “set 1”. To chain them, give a function that starts from the latest value: setN((v) => v + 1) twice gives 2.

  • In React, useState(0) returns a pair: the state's value and an …, whose call replaces the value and requests a ….

    Show the answer

    In React, useState(0) returns a pair: the state's value and an update function, whose call replaces the value and requests a new render.

    Writing n = 5 directly changes nothing on screen: only calling the update function tells the framework.

  • Reactivity: what is it?

    Show the answer

    The property of an interface that redraws itself when the data it depends on changes.

    You do not change the screen: you change the state, and the framework recomputes the affected components.

  • After clicking “Add”, the screen does not change although liste.push(x) does run. Which fix works?

    • setListe([...liste, x])
    • liste.push(x); setListe(liste)
    • liste.push(x) inside a useEffect without dependencies
    • liste = [...liste, x]
    Show the answer

    setListe([...liste, x])

    push changes the array in place, and setListe(liste) hands back the same reference: the framework sees no change. Reassigning liste (a constant) tells nobody. You need a new array passed to the update function.

Study this deck