Fiber and render


(Francesco Cielo) #1

Hello, I’m new to react and the community and have a question about the new reconciliation algorithm that shipped in 16. My question is this: is the a child render method always assured to be called in the same tick as the parent render?
I ask because in my app some components render external mutable state and when I trigger an update, if the parent renders in a different tick than its children I may end up with a DOM branch that is generated from different “versions” of such state. If that is the case I would need to figure out how to defer further state changes until react is done.

My understanding is that fiber may split the diffing and the dom update among multiple frames, but I’m not sure if the render phase can also be chunked.

Also are there plans to change how things work in the future?

Thanks
Fra


(Sophie Alpert) #2

In React 16, the entire render phase and the commit phase (the DOM updates) occur in a single tick. In a future version we do plan to split the render phase up across multiple frames. As you noted, that means you can’t read from any global mutable state if you want to take advantage of asynchronous rendering and keep everything on screen consistent.

You’re still ahead of the curve and we haven’t released recommendations about how to best make this work in practice, but over the next several months expect to hear more on this.


(Francesco Cielo) #3

Thanks Sophie, that was very helpful :slight_smile:


(2rist) #4

Hi! Why do you need to read from global external state in both child and parent components? Can you read everything in a parent component (smart one/container) and pass all the data to child component (dumb/presentational) as a props? Or even keep this value in a store (redux/flux) and then read this data from a store in a parent component.

Regards,
Igor


(Francesco Cielo) #5

Hi Igor, for that to work I would have to deep clone the piece of state that I’m interested in in the parent, or alternatively my state would have to be immutable.
The first is not an option because of the quantity of data, the second I don’t like for a number of reasons and in certain cases is also not an option.