React 18

Last Updated: 10/14/2023

Keep Components Pure

  • A pure function is one that always returns the same result given the same input. Pure functions should not modify objects/variables outside of the function.
  • A pure component should always return the same JSX given the same input.
  • React expects our function components to be pure for performance reasons. If the inputs are not changed react can skip re-rendering the component

Pure Component

let count = 0;

function Hello() {
  return <h1>Hello - {count}</h1>;
}

export default Hello;

Impure Component

let count = 0;

function Hello() {
  count++;
  return <h1>Hello - {count}</h1>;
}

export default Hello;
Previous
Next