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’s components are compulsory to be pure components.
Conclusion, When there are heavy state/prop changes in components, use Normal Component.
🧮 Tags
Recent posts
Julia examples - Variable Type Nim example - Convert String to/from the Int How to get length of an array and sequence in Nim? Nim environment variables - read, set, delete, exists, and iterate examples? How to convert from single character to/from string in Nim?Related posts