Difference Between Functional & Pure Components in React

551
SHARES
2.5k
VIEWS

Let’s discuss the difference between React’s functional and pure components. Many new react developer get confused by the difference between a Functional Component and a Pure Component. They think both functional and pure components are same, but this is not true. When we use a Pure Component in react, we need to import PureComponent from React like:

import React, { PureComponent } from 'react';

If your React component’s render method is “pure” which means that it renders the same result, given the same props and state, you can use this function to improve the performance of your react application. A Pure Component performs a shallow comparison for the props and nextProps objects and also for the state and nextState objects.

Also, remember Pure components do not include the shouldComponentUpdate method, otherwise it will give you an error when you try to add it.

Getting Ready:

For continuing this tutorial, we need to install the Chrome extension React Developer Tools for debuggin our react applications. So, Go ahead and down React developer tools from here.

For this demo we will simple number application, it will basically sum all the numbers that we will enter in the input field. Now, create a SumNumbers Component and add the following code.


    import React, { Component } from 'react';

 
    class SumNumbers extends Component {
      state = {
        numbersToSum: '', // Here we will save the input value
        finalResult: []  // In this state we will save the results of the sums
      };

      handleNumberChange = e => {
        const { target: { value } } = e;

        // Here we are Converting the string value to an array
        // "1234" => ["1", "2", "3", "4"]
        const numbersToSum = Array.from(value);

        // Plus all numbers from the array
        // ["1", "2", "3", "4" ] => 10
        const finalResult = numbersToSum.reduce((a, b) => Number(a) + Number(b), 0);

        // Updating the local state
        this.setState({
          numbersToSum: value,
          finalResult: [...this.state.results, result]
        });
      }

      render() {
        return (
          
{/* Rendering the results array */}
    {this.state.finalResult.map((result, i) => ( ))}
) } } export default SumNumbers;

Let’s create the Result component in the same folder:

    import React, { Component } from 'react';

    class Result extends Component {
      render() {
        return 
  • {this.props.result}
  • ; } } export default Result;

    Now import the Result component into our SumNumbers component. Add the following line in SumNumbers Component:

    // Importing Result Component
    import Result from './Result';

    Go ahead in you main file, in our case let’s imagine it is App.js and add the following code:

     import React, { Component } from 'react';
    // importing SumNumbers component
        import Numbers from './SumNumbers/SumNumbers';
    
        class App extends Component {
          render() {
            return (
              
    ); } } export default App;

    Go ahead and run the application. You should be able to see an imput field and when you will type any numbers in the input field, it will sum all the numbers from that field and it will show the result to the user.

    That was a basic component, and for performance point of view it’s not a great approach. let’s migrate our Result component to be a Pure Component:

      import React, { PureComponent } from 'react';
    
        class Result extends PureComponent {
          render() {
            return 
  • {this.props.result}
  • ; } } export default Result;

    Remember, Not all the time using a Stateless component necessary will help us improve the performance of our application. If you have components that you consider are pure, consider converting them into Pure components.

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    Trending