React

https://doctolib.github.io/frontend-trainings/react-masterclass

Strict mode

  • detects impure renders

Anti-pattern

  • give a setter on the prop of the element, use onChange, and something equivalent
  • too many re-render == stack overflow
    • after 20 times

Commit

Render and Commit – React

Once the render is finished, React is sending to the reconciliers (React DOM, Reactive Naive, …). There’s no manual commit, React is in charge of doing it, as it knows how to optimize it, when, etc…

Do not use flushSync().

Local state

useState only returns a tuple, where the second value is a setter, which will modify the value of the local state.

Objects and array

function TaskList() {
  const [todos, setTodos] = useState<TodoItem[]>([])
 
  // ...
 
  function addTodo(text) {
    // ❌ The object reference hasn’t changed.
    //    React won’t detect any update.
    todos.push(text)
    setTodos(todos)
    // Won’t do anything because it's just setting the same reference,
    // so nothing change for React
  }
}

Same for object. To mitigate this issue, you have to give a whole new array / object.

Do not use state for value derived / computed from existing state entries.

Flow: render commit paint effect