purity¶

Проверяет, что компоненты и хуки чистые, по тому, что они не вызывают заведомо нечистые функции.

Подробности правила¶

Компоненты React должны быть чистыми функциями: при одних и тех же пропсах они всегда должны возвращать один и тот же JSX. Если во время рендера компонент вызывает функции вроде Math.random() или Date.now(), на каждом рендере получается разный результат. Это ломает допущения React и приводит к ошибкам: несовпадениям при гидратации, неверной мемоизации и непредсказуемому поведению.

Типичные нарушения¶

В общем случае это правило нарушает любой API, который при одних и тех же входных данных возвращает разное значение. Обычные примеры:

Math.random()
Date.now() / new Date()
crypto.randomUUID()
performance.now()

Неверно¶

Примеры неверного кода для этого правила:

// ❌ Math.random() in render
function Component() {
  const id = Math.random(); // Different every render
  return <div key={id}>Content</div>;
}

// ❌ Date.now() for values
function Component() {
  const timestamp = Date.now(); // Changes every render
  return <div>Created at: {timestamp}</div>;
}

Верно¶

Примеры верного кода для этого правила:

// ✅ Stable IDs from initial state
function Component() {
  const [id] = useState(() => crypto.randomUUID());
  return <div key={id}>Content</div>;
}

Устранение неполадок¶

Нужно показать текущее время¶

Вызов Date.now() во время рендера делает компонент нечистым:

// ❌ Wrong: Time changes every render
function Clock() {
  return <div>Current time: {Date.now()}</div>;
}

Вместо этого вынесите нечистую функцию за пределы рендера:

function Clock() {
  const [time, setTime] = useState(() => Date.now());

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(Date.now());
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <div>Current time: {time}</div>;
}

Источник — https://react.dev/reference/eslint-plugin-react-hooks/lints/purity