THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.
This is a short tutorial that explains the difference between PureComponent and Component.
Normal components are created in every application by extending React. component for Class components.
componentWillMount
etc.import React, { Component } from 'react';
import PropTypes from 'prop-types';
class NormalComponent extends Component {
constructor(props) {
super(props);
}
componentWillMount() {
}
componentDidMount() {
}
componentWillReceiveProps(nextProps) {
}
shouldComponentUpdate(nextProps, nextState) {
}
componentWillUpdate(nextProps, nextState) {
}
componentDidUpdate(prevProps, prevState) {
}
componentWillUnmount() {
}
render() {
return (
<div>
</div>
);
}
}
NormalComponent.propTypes = {
};
export default NormalComponent;
PureComponent is created by extending React.PureComponent with class keyword
import React, { PureComponent } from 'react'
export default Class PureComponentExample extends React.PureComponent{
render() {
return (
<div>
</div>
);
}
}
Normal React component does not call shouldComponentUpdate by default.
Pure components call shouldComponentUpdate and check shallow comparison logic to render a component or not, that means PureComponent is used when there are many changes in state or props
If your parent component is pure, and all children components are compulsory to be pure components.
Conclusion, When there are heavy state/prop changes in components, use Normal Component.
🧮 Tags
Recent posts
How to Convert String to Int in swift with example How to Split a String by separator into An array ub swift with example How to disable unused code warnings in Rust example Golang Tutorials - Beginner guide Slice Examples Golang Array tutorials with examplesRelated posts