Pure components in react

These are the components which do not re-render as long as the state, props passed to it are not changed. You can use them to avoid re-rendering.Let’s look at a simple working snippet below. for explanation you can watch my Youtube video here.

App.js

import { useEffect, useState } from 'react';
import './App.css';
import Parent from './Parent';
function App() {
// Pure component section
const [id, setId] =  useState(1);
const [salary, setSalary] =  useState(1000);
const [age, setAge] =  useState(30);
useEffect(() => {
setInterval(() => {
console.log('Inside setInterval');
setId(id + 1);
}, 1000);
})
return (
<div className="App">
{/* Pure component example */}
<Parent id={id} salary={salary} age={age}/>
</div>
);
}
export default App;

Parent.js

import React from 'react'
import PureComponent from './PureComponent'
export default function Parent({id, salary, age}) {
console.log('Inside parent component');
return (
<div>
<h1>Id is: {id}</h1>
<PureComponent salary={salary} age={age}/>
</div>
)
}

PureCompoennt.js

import React from 'react'
function PureComponent({salary, age}) {
console.log('Inside Pure Component ');
return (
<div>
<h1>Inside Pure component</h1>
<h2>salary: {salary}</h2>
<h2>age:{age}</h2>
</div>
)
}
export default React.memo(PureComponent);