What is difference between React vs React Fiber? [closed]

Question

I just heard that react-fiber is ready. What is the big differences between react and react-fiber? Is it worth it to learn the whole new concept for that differences ?

Illjudged

github.com/koba04/react-fiber-resources – Woodenhead

medium.com/edge-coders/… – Herbert

Answer 1

React Fiber is an ongoing reimplementation of React's core algorithm, it’s just a complete internal re-write of React.

React Fiber is a complete, backwards compatible rewrite of the React core.

The goal of React Fiber is to increase its suitability for areas like animation, layout, and gestures. Its headline feature is incremental rendering: the ability to split rendering work into chunks and spread it out over multiple frames.

React Fiber is a virtual stack frame, with React Fiber being a reimplementation of a stack frame specialised 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 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 ,

1.What is React Fiber ?

2.React Fiber Architecture

3.What Does React 16 Mean for You?

Hopes this will help you !!

Herbert

Answer 2

React Fiber is an ongoing reimplementation of React's core algorithm. The main difference between react and react fiber are these new features :-

1. 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

2. Handle errors in the render API : To make class component an error boundary we define a new lifecycle method called componentDidCatch(error, info).

3. 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.

4. Portals : Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

5. 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.

Obidiah

Answer 3

React 16 beta has been released a few hours ago: https://github.com/facebook/react/issues/10294.

The rewritten React core (what was internally named as "fiber") should stay compatible with existing apps, except for a few breaking changes (see release notes on Github). As most of the changes are just under the hood, you won't need to learn a whole new concept again.

Ger

Answer 4

Everyone here has already mentioned here all the new features that are coming up with react fiber.I will emphasize on what core change react fiber is doing to improve itself. React fiber actually will allow pause and play of different task performed by the browser. It will give priority to certain tasks over another.

For example, if a specific animation is important rather than data fetching in the background. it will push animation task as the priority in the execution stack, and once the animation is done or taking too long can switch to data fetching task. To allow these modern browsers have opened up an API that is requestIdleCallback which allow tasks to be paused and play. requestIdleCallback

That what react fiber is using. This is what react fiber is using in the hood and it's amazing.

Note: I may not be exactly correct on few points. I am open to any corrections if any there

Helicograph