Full Stack Development

Pure Components

by Tomas Trescak t.trescak@westernsydney.edu.au

Optimisations

Unpure components

      import React, { render } from 'react';

const NonPureComponent = ({ message }) => {
  console.log('rendered');
  return <div>{message}</div>;
};

const ParentComponent = () => {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        Increment Count: {count}
      </button>
      <NonPureComponent message="Hello from Non-Pure Component!" />
    </div>
  );
};

render(<ParentComponent />);

      body, button {
  font-size: 24px;
}

#root > div {
  padding: 16px;
}

Often, the problem is the number of unnecessary re-renders. Let’s first create a scenario where a child component re-renders every time the parent component re-renders, even if its input (props) remains unchanged.
How this works? The ParentComponent holds a count state and provides a button to increment this count. Each time the button is clicked, setCount triggers a re-render of the ParentComponent
The NonPureComponent is a simple functional component that displays a message prop. Even though the message prop remains constant, the child component is re-rendered every time the parent updates its state.
When you interact with the button, you will notice that console-log statement runs every time, even though the message prop hasn’t changed. This happens because React functional components are not "pure" by default—they re-render when their parent re-renders. While a simple example like this doesn’t cause noticeable issues, in larger applications, unnecessary renders can lead to Performance Bottlenecks and Unintended Side Effects.

Optimisations

Pure components

      import React, { render, memo } from 'react';

let PureComponent = ({ message }) => {
  console.log('rendered');
  return <div>{message}</div>;
};

PureComponent = memo(PureComponent)

const ParentComponent = () => {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        Increment Count: {count}
      </button>
      <PureComponent 
        message="Hello from Pure Component!" 
      
      />
    </div>
  );
};

render(<ParentComponent />);

      body, button {
  font-size: 24px;
}

#root > div {
  padding: 16px;
}