Notes

import React from 'react';

// This is a regular React component
class MyComponent extends React.Component {
render() {
console.log('MyComponent has rendered.');
return (
<div>
<h1>{this.props.title}</h1>
<p>{this.props.description}</p>
</div>
);
}
}

// This is a PureComponent that performs a shallow comparison of its props and state
class MyPureComponent extends React.PureComponent {
render() {
console.log('MyPureComponent has rendered.');
return (
<div>
<h1>{this.props.title}</h1>
<p>{this.props.description}</p>
</div>
);
}
}

// This is the root component that renders both MyComponent and MyPureComponent
const App = () => {
const [count, setCount] = React.useState(0);

const handleButtonClick = () => {
setCount(count + 1);
}

return (
<div>
<MyComponent title="Regular Component" description="This is a regular React component." />
<MyPureComponent title="Pure Component" description="This is a PureComponent that performs a shallow comparison of its props and state." />
<button onClick={handleButtonClick}>Update State</button>
</div>
);
};

export default App;