React fiber got easy !

React have a rendering enviornment such as ReactDOM , lets learn about VirtualDOM,

Reconciliation

• It is an algorithm used in diffing of trees it is what we call a VirtualDOM and tells what parts need to be changed .

• Diffing of trees is when you created a simple thing and update that the dom will unmount the old tree and keep it updated .

• To do smart work here's the key comes to an action , it will have a unique id and when you will add something there it will know that the older ones where just moved and the newer with its own unique id gets added .

Reconciliation vs Rendering

• The best part or the strength of React is Reconciliation and Rendering are separate steps ,

• Reconciler: This part (often referred to as the reconciler) focuses on figuring out what needs to be updated. It computes the "diff" between the old and new states of your components.

• Renderer: Once the reconciler does its job, the renderer takes over. It's responsible for applying the changes to the actual user interface.

Scheduling

• scheduling

  the process of determining when work should be performed.

• work

  any computations that must be performed. Work is usually the result of an update (e.g. setState).

\=> lets learn about Fiber now ,

Imagine you're a chef preparing a complex dish. Each step in the recipe is like a fiber, representing a unit of work. Instead of following the recipe from start to finish without pause, you can pause, prioritize, or skip steps based on the availability of ingredients or the need to adjust the cooking time. This flexibility allows you to optimize the cooking process and handle unexpected challenges, much like how React Fiber helps optimize the rendering of UIs.

• React Fiber are a fundamental part of React's architecture enabling it to handle scheduling and manage units of work efficiently. It helps us to manage stack frames in memory and execute them as needed , improving the scheduling process .

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