React In Depth
Published in

React In Depth

Inside Fiber: in-depth overview of the new reconciliation algorithm in React

The how and why on everything from React elements to Fiber nodes

Setting the background

  • updates count property in the state of ClickCounter
  • retrieves and compares children of ClickCounter and their props
  • updates props for the span element

From React Elements to Fiber nodes

React Elements

Fiber nodes

Current and work in progress trees


Effects list

Root of the fiber tree

Fiber node structure

General algorithm

  • [UNSAFE_]componentWillMount (deprecated)
  • [UNSAFE_]componentWillReceiveProps (deprecated)
  • getDerivedStateFromProps
  • shouldComponentUpdate
  • [UNSAFE_]componentWillUpdate (deprecated)
  • render
  • getSnapshotBeforeUpdate
  • componentDidMount
  • componentDidUpdate
  • componentWillUnmount

Render phase

Main steps of the work loop

Commit phase

  • Calls the getSnapshotBeforeUpdate lifecycle method on nodes tagged with the Snapshot effect
  • Calls the componentWillUnmount lifecycle method on nodes tagged with the Deletion effect
  • Performs all the DOM insertions, updates and deletions
  • Sets the finishedWork tree as current
  • Calls componentDidMount lifecycle method on nodes tagged with the Placement effect
  • Calls componentDidUpdate lifecycle method on nodes tagged with the Update effect

Pre-mutation lifecycle methods

DOM updates

Post-mutation lifecycle methods

For more insights follow me on Twitter and on Medium. Thanks for reading! If you liked this article, hit that clap button below 👏. It means a lot to me and it helps other people see the story.

React Grid — the fastest and most feature-rich grid component from ag-Grid



The place where advanced React concepts are explained

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Max Koretskyi

Principal Engineer at . Founder of Big fan of software engineering, Web Platform & JavaScript. Man of Science & Philosophy.