A React component should not modify variables that existed before rendering. Such mutation makes the component impure because the same inputs can produce different JSX across renders.

let count = 0;

export function Counter() {
  count += 1; // Impure: modifies a preexisting variable
  return <h2>Counter: {count}</h2>;
}

Pass the changing value as input instead:

export function Counter({ count }) {
  return <h2>Counter: {count}</h2>;
}

The second component returns the same JSX whenever it receives the same count prop.