Pure Component React
React enables us to partition the code logic into distinct, reusable portions known as elements, allowing the developer to concentrate on a single element at a time.
When the state or the props are changed, these components are re-rendered. Although the state or prop changes don't affect them frequently, the rendering is still done. The speed of react apps can be improved by avoiding this unnecessary re-render.
We use pure elements in React for these speed gains.
What does React's Pure Component indicate?
We need to familiarise ourselves with pure functions to comprehend pure components in React. Any function is considered to be pure if it satisfies the following criteria. Simple functions are a programming notion.
Same input, same result. Time the function is given the same input, it produces the same outcome.
Any variables or objects generated before calling the function are left unchanged.
To further understand pure functions, let's look at an example.
Example:
const addition= (a1,b1) => a1+b1;
console.log(addition(3,8))
Output:
11
This code has a pure add method that returns the sum of two parameters, a1 and b1. This function is simple since the same input values will produce the same output when the code is used.
How do Pure Functions work?
When a function gives the same result when the same input is supplied, it is a pure function in Javascript.
To return the exact data for the same input is like that. Therefore, the result of a pure function depends exclusively on its input parameters. Pure functions also don't have any adverse side effects. You could have already developed a lot of pure functions in the past.
function Additiion(n1, n2){
return n1 + n2;
{
}
If we use the Addition(4,4) code mentioned before, the outcome will always be 8. Therefore, the above method will always produce 8 outputs if you run it numerous times with identical input values. A pure function can therefore optimize and enhance function performance.
Example:
var res= 0;
function addition(num){
return res+=num;
}
console.log(addition(20))
console.log(addition(10))
Output:
20
30
Because the function in this code depends on the outside variable res, its value will vary even though the input remains the same.
These illustrations demonstrate the deterministic nature of pure functions.
React's pure components also use a similar idea. Pure components do not affect variables outside their scope; they rely only on the state or variables supplied to them. When the contents of props and state have been modified with the same principles, react pure elements don't re-render. These components enhance performance by preventing re-rendering when the same data are given.
Let's explain a few characteristics of the react pure component.
- If the props & state were the same, they would restrict the re-rendering.
- They automatically handle shouldComponentUpdate, which improves speed.
- Shallow contrast between the state and props.
An example of React pure components:
import React from 'react';
class App extends React.PureComponent {
render() {
const { count= 0 } = this.props;
return (
<div>
<span>{ count }</span>
</div>
)
}
}
export default App;
A React pure component that shows the value of points obtained from props inside a span can be found in the code. This is a pure component since no external variables are modified, and it produces the same result for identical input values.
How is the React Process for a Pure Component?
Technical fundamentals include the ability to work on anything.
A shouldComponentUpdate() lifecycle function in React may be used to determine whether a component must re-render or not to optimize re-rendering. The Pure Component is another thing that React offers us.
The shouldComponentUpdate() lifecycle function is not required because we can extend a class using PureComponent. The PureComponent class checks the old props and variables with the new ones to decide how much the React component can re-render itself.
Example:
Class App extends React.PureComponent {
render() {
const { count = 0 } = this.props;
return (
<div>
<span>{ count}</span>
</div>
)
}
}
Are react functional components are pure?
React functional components, also known as stateless elements since they lack states, are not considered technically classes, so they do not benefit from the performance advantages or render enhancements offered by React.PureComponent.
As a result, we must convert them into a class that extends React.PureComponent to make them pure.
Consider an example of the functional component in react:
const App = (count = 0) => {
return (
<div>
<span> {count} </span>
</div>
)
}
We must change it into a Class component extending from React to maintain it pure.PureComponent
Class App extends React.PureComponent {
render() {
const { count= 0 } = this.props;
return (
<div>
<span>{ count}</span>
</div>
)
}
}