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

Side-effects

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 kawa.ai . Founder of indepth.dev. Big fan of software engineering, Web Platform & JavaScript. Man of Science & Philosophy.