Make your React components more efficient by using Pure Components or React.memo()
React is an open-source javascript library for building user interfaces. It allows us to create reusable UI components. Before diving into how to make components efficient it will be useful to take a step back and understand how React works under the hood.
Every class component in React has a render() method and every functional component returns a JSX element. It might seem like these methods are responsible for making direct updates to the DOM. However, this is not how it works!
React does not change the DOM directly with every render. It first generates a virtual DOM in pure javascript. It keeps two copies of this virtual DOM, the old virtual DOM, and then re-rendered virtual DOM which gets created when the render() is called. It then compares the old virtual DOM to the re-rendered virtual DOM. If any difference is detected, it reaches out to the real DOM and updates it. However, it does not re-render the entire real DOM. It only changes it in the places where the differences were detected. If no differences are found, it does not touch the real DOM. This process is faster than directly rendering the new DOM to the browser every time since accessing the real DOM is very slow.
