React Fiber https://github.com/acdlite/react-fiber-architecture is a virtual stack frame, with React Fiber being a reimplementation of a stack frame specialized for React components. Each fiber can be thought of as a virtual stack frame where information from the frame is preserved in memory on the heap, and because the info is saved on the heap, you can control and play with the data structures and process the relevant information as needed.
You can find an excellent explanation from Lin Clark in this video.
For more details please check the following links ,
3. What Does React 16 Mean for You?
React Fiber is an ongoing reimplementation of React's core algorithm. The main difference between react and react fiber are these new features :-
-
Incremental Rendering :- React v16.0 includes a completely rewritten server renderer. It’s really fast. It supports streaming, so you can start sending bytes to the client faster
-
Handle errors in the render API : To make class component an error boundary we define a new lifecycle method called componentDidCatch(error, info). Error Boundaries – React https://reactjs.org/docs/error-boundaries.html
-
Return multiple elements from render : With this new feature in React v16.0 now we can also return an array of elements, and string from component’s render method.
-
Portals : Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
-
Fragments : A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.
react fiber is using: https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback
React Async Rendering Demo. Contribute to ivan-ha/react–async–rendering–demodevelopment by creating an account on GitHub. https://github.com/ivan-ha/react-async-rendering-demo ; https://ivan-ha.github.io/react-async-rendering-demo/