React

We use React to build components that represent logical, reusable parts of the UI. The beauty of React is that the simplicity of building a component has been brought down to its theoretical minimum; it's just a JavaScript function.

React has quickly become the most popular framework on the web. There's no disputing its dominance. While other frameworks from the past, present, and future are all doing pretty well, React is the default.

What if I told you the web isn't actually what React was built for? In fact, the React package that you install to start your projects has no web code in it at all. What the hell am I talking about? Let's dive in.

It's important to understand as you get deeper into React that React itself isn't the thing that renders your application on the web. React is the virtual DOM layer, the hierarchy of components and state that tells something else what to render. The vast majority of the time somebody's using React, they're using it with a package called React DOM, which allows the virtual DOM that React manages to tell the real DOM what to render, when to render it, and when to change when it needs to change.

What is the difference between React and ReactDOM?

React is a JavaScript library for building User Interfaces whereas ReactDOM is also JavaScript library that allows React to interact with the DOM. The react package contains React.createElement(), React.Component, React.Children, and other helpers related to elements and component classes. You can think of these as the isomorphic or universal helpers that you need to build components.

What is Reconciliation in React?

Reconciliation is the process through which React updates the Browser DOM and makes React work faster. React uses a diffing algorithm so that component updates are predictable and faster. React would first calculate the difference between the real DOM and the copy of DOM (Virtual DOM) when there's an update of components. React stores a copy of Browser DOM which is called Virtual DOM. When we make changes or add data, React creates a new Virtual DOM and compares it with the previous one. Comparison is done by Diffing Algorithm. React compares the Virtual DOM with Real DOM. It finds out the changed nodes and updates only the changed nodes in Real DOM leaving the rest nodes as it is. This process is called Reconciliation.

What is React Fiber?

React Fiber is a concept of ReactJS that is used to render a system faster, smoother and smarter. The Fiber reconciler, which became the default reconciler for React 16 and above, is a complete rewrite of React’s reconciliation algorithm to solve some long-standing issues in React. Because Fiber is asynchronous, React can:

  • Pause, resume, and restart rendering work on components as new updates come in
  • Reuse previously completed work and even abort it if not needed
  • Split work into chunks and prioritize tasks based on importance

Why do we need keys in React?

A key is a special attribute you need to include when creating lists of elements in React. Keys are used in React to identify which items in the list are changed, updated, or deleted. In other words, we can say that keys are unique Identifier used to give an identity to the elements in the lists. Keys should be given to the elements within the array to give the elements a stable identity.

Example

<li key={0}>1</li>
<li key={1}>2</li>
<li key={2}>3</li>

Difference between Virtual DOM and Real DOM?

DOM stands for Document Object Model, which represents your application UI and whenever the changes are made in the application, this DOM gets updated and the user is able to visualize the changes. DOM is an interface that allows scripts to update the content, style, and structure of the document.

  • Virtual DOM
    • The Virtual DOM is a light-weight abstraction of the DOM. You can think of it as a copy of the DOM, that can be updated without affecting the actual DOM. It has all the same properties as the real DOM object, but doesn’t have the ability to write to the screen like the real DOM.
    • Virtual DOM is just like a blueprint of a machine, can do the changes in the blueprint but those changes will not directly apply to the machine.
    • Reconciliation is a process to compare and keep in sync the two files (Real and Virtual DOM). Diffing algorithm is a technique of reconciliation which is used by React.
  • Real DOM
    • The DOM represents the web page often called a document with a logical tree and each branch of the tree ends in a node and each node contains object programmers can modify the content of the document using a scripting language like javascript and the changes and updates to the dom are fast because of its tree-like structure but after changes, the updated element and its children have to be re-rendered to update the application UI so the re-rendering of the UI which make the dom slow all the UI components you need to be rendered for every dom update so real dom would render the entire list and not only those item that receives the update .
    


Comments

Post a Comment