How React works behind the scenes

React is a popular JavaScript library for building user interfaces. It's declarative, efficient, and flexible.

But have you ever wondered how React actually works behind the scenes? Let's take a look at how React operates on a fundamental level.

React is a JavaScript library that creates and maintains an in-memory representation of a UI. When a user interacts with a React application, React updates the in-memory representation and the changes are reflected in the UI.

React uses a virtual DOM, which is a JavaScript representation of the actual DOM. The virtual DOM is a lightweight tree that contains only the necessary information to render a UI.

When a user interacts with a React application, React updates the virtual DOM. React then compares the virtual DOM with the actual DOM. React makes the necessary changes to the actual DOM, which are reflected in the UI.

The virtual DOM is a JavaScript object. The object is made up of React elements. React elements are the smallest units of React applications.

React elements are immutable. That means they cannot be changed. Once a React element is created, it cannot be modified.

This is why React is so fast. React only needs to update the changed element in the virtual DOM. React doesn't need to re-render the entire UI.

React elements are also lightweight. React elements are just JavaScript objects. They don't have any additional overhead.

React elements can be created with the React.createElement() method.

React.createElement(
  type,
  props,
  children
);

The type argument specifies the type of element to create. The type can be a HTML tag, a React component, or a function.

The props argument specifies the element's properties. The props are an object of key-value pairs.

The children argument specifies the element's children. The children can be React elements or strings.

Here's an example of creating a React element:

const element = React.createElement(
  'div',
  { id: 'container' },
  'Hello, world!'
);

The above code creates a React element of type 'div'. The element has an id property of 'container' and a child of 'Hello, world!'.

React elements are just JavaScript objects. They can be stored in variables and passed around like any other object.

React components are functions or classes that return React elements.

function Welcome(props) {
  return React.createElement(
    'h1',
    null,
    'Hello, ' + props.name + '!'
  );
}

class Welcome extends React.Component {
  render() {
    return React.createElement(
      'h1',
      null,
      'Hello, ' + this.props.name + '!'
    );
  }
}

The above code defines a Welcome component. The Welcome component returns a React element.

When a React element is created, React assigns a key to the element. The key is used to uniquely identify the element.

The key is used by React to keep track of the element's position in the virtual DOM. When a user interacts with a React application, React uses the key to quickly find the changed element in the virtual DOM.

React only updates the changed element in the virtual DOM and it doesn't need to re-render the entire UI.

The key is also used by React to figure out which DOM nodes to update. React uses the key to match the virtual DOM node with the actual DOM node.

React uses a diffing algorithm to find the changed element. The diffing algorithm is a clever way to figure out which element has changed.

React updates the actual DOM by making changes to the DOM nodes and only updates the changed DOM nodes.

---

Looking for a great community of people interested in Javascript and Crypto? Join our Discord server! 💙🧪

Discord: https://discord.gg/ZJ8wARrN9Y

Comments

[Amr Tawfik]

Thanks for sharing💗

[Rahul yadu]

Good explanation

[Amr Tawfik]

Thank you💗