{

Difference between pureComponent and component in React


This is a short tutorial that explains the difference between PureComponent and Component.

Normal Component example

Normal components are created in every application by extending React. component for Class components.

  • Created a component using class keyword
  • Extends React.component
  • It has callback lifecycle methods like componentWillMount etc.
  • Also can add event handler methods, For example, Adding button and its event handler click event
  • The state can be Scalar types like Integer, String, and nested data structures.
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;

React PureComponent example

PureComponent is created by extending React.PureComponent with class keyword

  • Created components with class keyword
  • Extends React.PureComponent
  • No callback or life cycle methods
  • State can be scalar types only
import React, { PureComponent } from 'react'
export default Class PureComponentExample  extends React.PureComponent{
       render() {
        return (
            <div>

            </div>
        );
    }
}

Difference between pure component and normal Component in react

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.

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.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.





Related posts

ReactJS Append variables with strings, jsx state and prop concatenate html

How to display the content of a JSON file in React with example

Reactjs Fix Must call a super constructor in derived class before accessing this

How to change default port in React with create-react-app command?

How to create an react typescript application | Create-react-app typescript application

How to handle broken images in React | fallback for broken images

Fixing an error You are running create-react-app 4.0.3, which is behind the latest release (5.0.0) in React