React rendering process must always be pure. Components should return the same JSX and not modify variables that exist before rendering.

Example of impure component:

let count = 0;
export function Counter() {
  count += 1; // Bad: Can't a preexisting variable!
  return <h2>Counter: {count}</h2>;
}

Example of pure component:

export function Counter({count}) {
  // This component will return same JSX
  return <h2>Counter: {count}</h2>;
}