React Learning Path - Day 5 🚀

React Fragment vs <></>

React fragment is used when you want to group multiple elements into one root element. To return multiple elements from a React component, you'll need to wrap the element in a root element.
We can use <div> also instead of react fragment. The main difference between the two is that "Fragment" clears out all extra divs from a DOM tree while "Div" adds a div to the DOM tree. The div element has more methods and properties, which causes it to consume more memory which can make the page slow load time The prototype chain is like HTMLDivElement -> HTMLElement -> Element -> Node -> EventTarget, whereas the React fragment has fewer methods with the prototype chain DocumentFragment -> Node -> EventTarget.

function TableData () {
  return  (
    <div>
      <td>Eat</td>
      <td>Learn</td>
      <td>Code</td>
    </div>
  );
}

So when do we use React.Fragment and when to use the <></> . When we need to use the props along with the root element then we use the React.fragment and when prop is not required then we can use the <></>. There is a tradeoff between the two concerning Load time and memory Consumption , <></> has faster load time and lesser memory consumtion than the React.fragment.

function TableData () {
  return  (
    <React.Fragment key={id}>
      <td>Eat</td>
      <td>Learn</td>
      <td>Code</td>
    </React.Fragment>
  );
}

function TableData () {
  return  (
    <>
      <td>Eat</td>
      <td>Learn</td>
      <td>Code</td>
    </>
  );
}

Comments in JSX

You can write comments in JSX using {} since what comesinde the {} is the javascript so we can write the comments in the {}.

{/* This is a JSX comment */}

Virtual DOM

The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This abstracts out the attribute manipulation, event handling, and manual DOM updating that you would otherwise have to use to build your app. The virtual DOM is a much lighter replica of the actual DOM in the form of objects. The virtual DOM can be saved in the browser memory and doesn’t directly change what is shown on the user’s browser. Virtual DOM provides a mechanism that allows the actual DOM to compute minimal DOM operations when re-rendering the UI. It is an object representing the real DOM hence checking the snapshot of older Virtual DOM and newer virtual DOM react figures out the updated part recursively for the element.

React's Diffing Algorithm Reconciliation

The algorithm React uses to diff one tree with another to determine which parts need to be changed. Diffing of lists is performed using keys. Keys should be "stable, predictable, and unique." When React diffs two virtual DOM trees, it begins by comparing whether or not both snapshots have the same root element**.** If they have the same elements React moves on and recurses on the attributes. If no attribute is present or updated on the root element. React then repeats the procedure on the children. Upon seeing that the updated node has changed, React will only update that particular actual node in the real DOM.

React Fiber

React Fiber is a backward-compatible, complete rewrite of the React core. In other words, it is a reimplementation of older versions of the React reconciler. Fiber Reconciler is the new reconciliation algorithm in React. The term Fiber refers to React's data structure (or) architecture and originates from 'fiber' - a representation of a node of the DOM tree.

Fiber brings in different levels of priority for updates in React. Fiber allows the reconciliation and rendering of the DOM to be split into two separate phases:

Phase 1: Reconciliation:

In the first phase, React creates a list of all changes to be rendered in the UI. Once the list is fully computed, React will schedule these changes to be executed in the next phase. Note that React doesn't make any actual changes in this phase.

Phase 2: Commit

In phase two, also called the 'commit' phase, React tells the DOM to render the effect list that was created in the previous phase. While the Reconciliation phase can be interrupted, the Commit phase cannot.

Fiber is a JavaScript object, a unit of work. It represents a node of the DOM tree, or a React element, and contains data about a component, its I/P and O/P.

A component instance, at any single point in time, has two fibers associated with it:

• The current, flushed fiber, and

• The work-in-progress fiber

Importance of Keys in React

Keys in React help in rendering the component when any of the components are updated. Imagine that files on your desktop didn't have names. Instead, if you refer them by the order, what would happen if any of the files are deleted? Similar is the case with React rendering. Keys help React in rendering and also optimize the process of rendering.
Note that your components won’t receive a key as a prop. It’s only

You might be tempted to use an item’s index in the array as its key. That’s what React will use if you don’t specify a key at all. But the order in which you render items will change over time if an item is inserted, deleted, or if the array gets reordered. Index as a key often leads to subtle and confusing bugs.

Similarly, do not generate keys on the fly, e.g. with key={Math.random()}. This will cause keys to never match up between renders, leading to all your components and DOM being recreated every time. Not only is this slow, but it will also lose any user input inside the list of items. Instead, use a stable ID based on the data. used as a hint by React itself. If your component needs an ID, you have to pass it as a separate prop: <Profile key={id} userId={id} />

Reacts Hooks

Hooks let you use different React features from your components. You can either use the built-in Hooks or combine them to build your own.

State Hooks

This hook lets the component remember information. For example, an Image component can use the state to store a selected Index. To add state to a component, use one of these Hooks:

• useState : declares a state variable that you can update directly.

• useReducer : declares a state variable with update logic inside a reducer function.