How React works behind the scenes

React is a well-liked JavaScript library for constructing person interfaces. It is declarative, environment friendly, and versatile.

However have you ever ever questioned how React really works behind the scenes? Let’s check out how React operates on a basic stage.

React is a JavaScript library that creates and maintains an in-memory illustration of a UI. When a person interacts with a React utility, React updates the in-memory illustration and the adjustments are mirrored within the UI.

React makes use of a digital DOM, which is a JavaScript illustration of the particular DOM. The digital DOM is a light-weight tree that comprises solely the required info to render a UI.

When a person interacts with a React utility, React updates the digital DOM. React then compares the digital DOM with the precise DOM. React makes the required adjustments to the precise DOM, that are mirrored within the UI.

The digital DOM is a JavaScript object. The article is made up of React parts. React parts are the smallest items of React functions.

React parts are immutable. Which means they can’t be modified. As soon as a React factor is created, it can’t be modified.

That is why React is so quick. React solely must replace the modified factor within the digital DOM. React would not have to re-render your complete UI.

React parts are additionally light-weight. React parts are simply JavaScript objects. They haven’t any extra overhead.

React parts might be created with the React.createElement() technique.

React.createElement(
  kind,
  props,
  kids
);

The sort argument specifies the kind of factor to create. The sort is usually a HTML tag, a React part, or a perform.

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

The youngsters argument specifies the factor’s kids. The youngsters might be React parts or strings.

Here is an instance of making a React factor:

const factor = React.createElement(
  'div',
  { id: 'container' },
  'Hi there, world!'
);

The above code creates a React factor of kind ‘div’. The factor has an id property of ‘container’ and a toddler of ‘Hi there, world!’.

React parts are simply JavaScript objects. They are often saved in variables and handed round like every other object.

React elements are capabilities or lessons that return React parts.

perform Welcome(props) {
  return React.createElement(
    'h1',
    null,
    'Hi there, ' + props.identify + '!'
  );
}

class Welcome extends React.Part {
  render() {
    return React.createElement(
      'h1',
      null,
      'Hi there, ' + this.props.identify + '!'
    );
  }
}

The above code defines a Welcome part. The Welcome part returns a React factor.

When a React factor is created, React assigns a key to the factor. The bottom line is used to uniquely establish the factor.

The bottom line is utilized by React to maintain monitor of the factor’s place within the digital DOM. When a person interacts with a React utility, React makes use of the important thing to rapidly discover the modified factor within the digital DOM.

React solely updates the modified factor within the digital DOM and it would not have to re-render your complete UI.

The bottom line is additionally utilized by React to determine which DOM nodes to replace. React makes use of the important thing to match the digital DOM node with the precise DOM node.

React makes use of a diffing algorithm to seek out the modified factor. The diffing algorithm is a intelligent method to determine which factor has modified.

React updates the precise DOM by making adjustments to the DOM nodes and solely updates the modified DOM nodes.