What is a pure functional component in ReactJS ?

What is a JavaScript function?

A JavaScript function is a block of code designed to perform a particular task which is executed when it is called.

How React functional components are similar to JavaScript functions?

Conceptually, components are like JavaScript functions.  A functional component is a JavaScript function that returns JSX in React. These functions accept arbitrary inputs (often called “props”) and return React elements describing what should appear on the screen.

When a React Component is Pure?

A function is said to be pure if the return value is determined by its input values only and the return value is always the same for the same input values.

A React component is said to be pure if it renders the same output for the same state and props. For React pure class components, React provides the PureComponent base class. Class components that extend the React.PureComponent classes are treated as pure components.

Create React Application:

• Step 1: Create a React application using the following command:

  npx create-react-app pure-react

• Step 2: After creating your project folder i.e. pure-react, move to it using the following command:

  cd pure-react

Project Structure: It will look like the following.

Filename: App.js

App.js import React from 'react';
import GeeksScore from './geekscore';

export default function App() {
  return (
    <div>
      <GeeksScore score="100" />
    </div>
  );
}

import React from 'react';

class GeeksScore extends React.PureComponent {

  render() {
    const { score, total = Math.max(1, score) } = this.props;

    return (
      <div>
        <h6>Geeks Score</h6>
        <span>{ Math.round(score / total * 100) }%</span>
      </div>
    )
  }

}

export default GeeksScore;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Why Pure Components?

Pure components have some performance improvements and render optimizations because React implements the shouldComponentUpdate() method for them with a shallow comparison for props and state.

What is a pure functional component in React?

Functional components are very useful in React, especially when we want to isolate state management from the React component. That’s why they are often called stateless components.

However, functional components cannot leverage the performance improvements and render optimizations that come with React.PureComponent since they are not classes by definition.

Optimizing a functional component, so that React can treat it as a pure component shouldn’t necessarily require that the component be converted to a class component. To create a pure functional component in React, React provides a React.memo() API. Using the React.memo() API, the React functional component can be wrapped as follows to get React Pure Functional Component.

Some important things about React.memo() API are:

• React.memo() is a higher-order component that takes a React component as its first argument and returns a pure React component.
• React component type returned using React.memo() allows the renderer to render the component while memoizing the output.
• React.memo() also works with components w using ReactDOMServer.

import React from 'react';
import GeeksScore from './geekscore';

export default function App() {
  return (
    <div>
      <GeeksScore score="100" />
    </div>
  );
}

import React, { memo } from 'react';

function GeeksScore({ score = 0, total = Math.max(1, score) }) {
  return (
    <div>
      <h2>Geeks Score</h2>
      <span>{ Math.round(score / total * 100) }%</span>
    </div>
  )
}

export default memo(GeeksScore);

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output: