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

[maxkoretskyi]

Dive deep into React's new architecture called Fiber and learn about two main phases of the new reconciliation algorithm. We'll take a detailed look at how React updates state and props and processes children.

Read the article here.

[ArtemDomochka]

Hi! How many articles about fiber do you have? So this one(which is first) then this one https://indepth.dev/posts/1009/in-depth-explanation-of-state-and-props-update-in-react (which is second) and that's all? Or i missed something? Good materials by the way)

[maxkoretskyi]

Yeah, just these two. But I'm planning to write more, so stay tuned :)

[ArtemDomochka]

Of course i will) I have finished these articles and now a bit confused with virtualDOM, element tree and fiber tree.
1)Does React has both fiber tree and element tree?
2)And what is actually virtual DOM, is it only fiber tree or fiber tree and element tree?
3)What is happening when react works? So it calls render method for all components and this method returns element objects. But what then? Only fiber tree is created and if something happens it computes difference using only fiber tree and then commits this difference? Or element tree is created too? If yes, what is it purpose and does fiber tree and element tree have any communication?

[maxkoretskyi]

There's also this article

1)Does React has both fiber tree and element tree? And what is actually virtual DOM, is it only fiber tree or fiber tree and element tree?

Fiber tree is what's referred to as Virtual DOM because Fiber nodes actually contain references to DOM elements. But there are different kinds of Fiber nodes and they man contain references to many other things. An element tree is what you define in your components through React.createElement()

Only fiber tree is created and if something happens it computes difference using only fiber tree and then commits this difference?

Yes. Basically elements tree is only used as an input data to create a fiber tree.

[arnab-chatterjee-by]

incredible work on the article @maxkoretskyi, really insightful

[maxkoretskyi]

thanks, more to come :)

[nzhl]

Definitely excellent job ! Any plans to publish following articles ?

[maxkoretskyi]

yes, definitely, in a couple of months

[wang1212]

I read your article a few months ago. Although it was written a few years ago, it is still very valuable to me, thank you!

Looking forward to your follow-up updates, I am happy to share with my friends.

[maxkoretskyi]

Thanks, stay tuned :)

[thebedroomprogrammer]

I come back to this article every once in a while and to my surprise, I learn more and more from it. Thanks @maxkoretskyi

[maxkoretskyi]

stay tuned for more! 🤓

[aguv]

Same, when i have any doubt about react reconciliation algorithm, i come here and read this beatiful article.

Thanks for sharing :)

[maxkoretskyi]

@aguv glad you found it helpful 😀

[duj26089]

i like maxkoretskyi

[orange4glace]

Super cool. Thanks!

[randibrahim]

Great Job Thank you !

But is there a way to return the updated elements as JSON object or as string maybe....?

[tyrickareo]

hi, I am just reading your article,is awesome for me, but it confused me a little bit too, would you please help me out? you said "Unlike React elements, fibers aren’t re-created on every render" , but after that you said " As React goes through the current tree, for each existing fiber node it creates an alternate node that constitutes the workInProgress tree" .
my question is :

1. are they conflict? aren't they. react created a "current" tree, but during next render it created another alternate tree through "current" one ,so it did re-create
2. the mutable for fiber is just about changing the "alternate" field. since we did the re-created , and we don't use it anymore.

thanks for you answer!

[maxkoretskyi]

but during next render it created another alternate tree through "current" one ,so it did re-create

I re-uses fiber nodes where possible, and where needed, creates new ones for the alternate tree

[tyrickareo]

but during next render it created another alternate tree through "current" one ,so it did re-create

I re-uses fiber nodes where possible, and where needed, creates new ones for the alternate tree

seems like if some fiber doesn't change then its "alternate" will point to itself to make "re-uses", isn't it?

[maxkoretskyi]

Yeah, most likely it re-uses the same object, maybe updates some props, probably lots have changed since I wrote the article

[buitrungthien]

appreciate it! So informative!

[bb-in-hoodie]

It's such a well-organized piece of article. Thank you for sharing it.

I have a small question.
When you said "the first render phase can be performed asynchronously", does it mean React "theoredically" can perform rendering asynchronously (but it doesn't in usual case) or React actually do perform it asynchronously?

I'm asking you this because the following example with (nice looking) animation shows us the rendering process in synchronous way (where a sibling node is waiting for the node followed by it to finish its work).

[maxkoretskyi]

does it mean React "theoredically" can perform rendering asynchronously (but it doesn't in usual case) or React actually do perform it asynchronously?

As I remember it runs it in a non-blocking way so that it can yield to user triggered events, like button click, scroll etc. So it is in a way asynchronous.

[littlepoolshark]

Dear @maxkoretskyi , had you roll out your new article on 「react fiber architecture」？ I am so looking forward for that.

[maxkoretskyi]

hey man, will start work on React course in about a month! stay tuned

[littlepoolshark]

Awsome, if you yield the React course, please make me know here, thanks.

[maxkoretskyi]

sure! stay tuned for updates