In other word, how does React handle updates?

How React communicates with the renderer

setState(...args) {
  this.updater.enqueueSetState(this, ...args);
}

The Update

• When we call setState, React adds the passed data to a queue
• The updates are later handled one by one, but the changes are applied at the same time at the end (flushed to the DOM at once)

Lifecycle & 2 phases

Screen Shot 2022-08-18 at 9.12.01 PM.png

static getDerivedStateFromProps(props, state) {
  console.log('this is the only static lifecycle methods, cannot access this, window');
  return state;
}

Update Steps

happend in 2 phases

1. setState is called
2. data is added to a queue
3. React starts handling the update
4. new state is calculated + getDerivedStateFromProps is called
5. shouldComponentUpdate is called with final (derived) state
6. render is called

7. DOM changes are made
8. componentDidUpdate is called