What does HackerNews think of react-fiber-architecture?

A description of React's new core algorithm, React Fiber

Can someone remind me why virtual DOM was/is desirable in the first place and why updating the DOM directly is desirable now?

If I understand correctly react elements are created in memory, and only upon "render" it is turned into the actual DOM. During render in react, it does the tree diffing and state management. Supposedly manipulating the actual DOM directly is "heavy" hence delay/pruning the virtual DOM tree first then rendering would be beneficial? Then why is it working with DOM directly is desirable? And am I right to assume that "without virtual DOM" means work with DOM directly? Someone in the comment mention that Svelte is without vDOM already. Is there some design document that I can refer to, like the reconciliation engine used in react https://github.com/acdlite/react-fiber-architecture

Study the React source code and implement your own mini-version. It's a great way to deepen framework specific knowledge (if that's what you are after) and also learning more about the language used to create the framework.

Start with these articles:

https://medium.com/react-in-depth/inside-fiber-in-depth-over...

https://medium.com/dailyjs/the-how-and-why-on-reacts-usage-o...

https://github.com/acdlite/react-fiber-architecture

https://www.youtube.com/watch?v=ZCuYPiUIONs

https://github.com/facebook/react/issues/7942#issue-18237349...

With the right abstractions and (adhered-to) guidelines, a library in a non-preemptive language can allow your code to effectively yield to the scheduler so often that you get many of the benefits of preemptiveness. React is moving in this direction with their ongoing Fiber project [0] - since components are encouraged to be granular, and must be loosely coupled, the new React scheduler can take well-structured React code and plan the rendering of various subtrees with high levels of control. In fact, there's a TON of similarities between React's component model and the BEAM actor model: a component's "mailbox" consists of inbound props, outbound async callbacks to the component that requested its instantiation, and outbound assertions that the component desires to communicate props to new instances of other components.

One could imagine a compiler that inserts a yield around the calculation done in each Elixir AST node, and/or one which allows first-class representation of React components as Elixir processes, complete with JSX-like syntax. Very interesting to think about.

[0] https://github.com/acdlite/react-fiber-architecture

EDIT: Should also add that the shared-nothing messaging model translates very well to the requirements for Web Worker interop, so you actually could get multithreading.

Fiber is simply a fully-backwards-compatible performance enhancement, though that does it a huge disservice. It's actually figuring out how to run different parts of a render() function in different clock ticks, essentially making renders asynchronous so that animations don't jitter or drop frames, and different parts of the render tree can be prioritized out of order. Unless you were doing weird stuff with low-level animations or React internals, user code won't need to change, but it will instantly become buttery smooth. See https://github.com/acdlite/react-fiber-architecture for how.

Now, the preference for stateless functional components that has been popularized for user code by Redux is certainly a trend, and a focus of performance attention. But that's nothing new.

The latter – and it is likely that we will change this API in the future and update the devtools to match. No guarantee that your monkeypatch will continue to be possible, especially as we rewrite large parts of the internals (https://github.com/acdlite/react-fiber-architecture).