2

I've been reading about react fiber and have been seeing the terms "reconciliation" and "rendering" being used together frequently. Can someone please help me understand the difference between these two terms, in the context of React?

Some background:

  • I got this doubt after watching Lin Clark's talk on React Fiber
  • Another useful article that I went through to understand this — How React Handles Events. I believe this article has the answer, but seems its target audience is people who already have a high level understanding of React. However, I'm looking for an explanation in simpler words (as I'm still at a beginner level in React).
Mike 'Pomax' Kamermans
  • 49,297
  • 16
  • 112
  • 153
Aaditya Sharma
  • 3,330
  • 3
  • 24
  • 36
  • Does https://reactjs.org/docs/reconciliation.html help explain it? (`render` is just a single render update, whereas `reconciliation` is the entire processing task that happens between "stable, old full application state" and "stable, new application state") – Mike 'Pomax' Kamermans Aug 21 '19 at 19:24

1 Answers1

0

I would echo what Mike said in the comments. The nomenclature can be a bit confusing because React's updates happen in two phases - render and commit. The render phase involves React going through the component tree and figuring out what has changed. In some cases, it can even figure out changes before the render phase. For example, in this line, React can "eagerly" compute the future state caused by calling useState's update function.

In the commit phase, React goes over the list side-effects (the changes) on the new fiber tree (your component tree) and applies them to DOM, leading to visible changes for the user.

I have written about how the ReactDOM.render method fits into React's new fiber architecture if you are interested in more background.

Carl Mungazi
  • 97
  • 8