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
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