News for hackers. Stuff that matters.
Re:React Concurrent Mode by paulddraper on Thursday October 24, 2019 @05:35PM (#21349445)
> React gives you no options for putting that in a worker or breaking it up.

Isn't that React Fiber? [1]

"Fiber breaks down animation into segments that can be spread out over multiple frames."

How does that differ from React Concurrent? Are they compatible?

[1] https://en.wikipedia.org/wiki/React_Fiber

Re:React Concurrent Mode by _bxg1 on Thursday October 24, 2019 @05:40PM (#21349486)
So, I'm not sure exactly how Fiber works, but given the context and what I've read/watched, here's my guess:

Confusingly, there are multiple tiers of "updates" happening in a React app. One is when your render functions are called to recompute their React element trees. Work can be avoided here via shouldComponentUpdate(), etc.

Once React has this internal data structure, it uses it to do another level of updates to the actual DOM. This part is totally black-boxed from the application code, because React has all the information it needs internally to avoid unnecessary updates at this level.

I think, maybe, that Fiber is specifically focused on this latter stage. Concurrent Mode would then be the stage 1 equivalent of what Fiber does in stage 2. This would be why it has an effect on how application code can actually be written, where Fiber didn't really.

Re:React Concurrent Mode by acemarke on Thursday October 24, 2019 @06:10PM (#21349707)
"Fiber" was the rewrite of React's internal render logic (primarily how it processes the component tree), and was released in 16.0. It's named after the data structure that is used to track individual pieces of work (roughly on a per-component basis).

Fiber does specifically divide the overall update process into two general phases. "Render phase" involves walking the component tree, asking components what the desired UI should look like, and calculating the diff and necessary changes based on the previous requested output. Once that's been calculated, it is applied all at once in the "commit phase".

Concurrent Mode is, loosely, additional modifications to that rendering logic to enable pausing partway through the "render phase" process, tracking one or more in-progress versions of render passes, prioritizing them based on the source of the requested update (user input vs network request, etc), and recalculating in-progress renders if another higher-priority render was pushed to the front and committed to the DOM first.

Re:React Concurrent Mode by AgentME on Thursday October 24, 2019 @06:18PM (#21349769)
React Fiber is the internal name of some of React's systems that were necessary in order to support the Concurrent Mode feature.
Re:React Concurrent Mode by davedx on Friday October 25, 2019 @04:34AM (#21352972)
Fiber is the underlying engine used by concurrent mode.

I really recommend browsing the react reconciler source code. I don't immediately understand most of it, but you can get the gist of it.