purity

Detalhes da Regra

Componentes React devem ser funções puras - dadas as mesmas props, eles devem sempre retornar o mesmo JSX. Quando componentes usam funções como Math.random() ou Date.now() durante a renderização, eles produzem saídas diferentes a cada vez, quebrando as suposições do React e causando erros como incompatibilidades de hidratação, memoização incorreta e comportamento imprevisível.

Violações Comuns

Em geral, qualquer API que retorna um valor diferente para as mesmas entradas viola esta regra. Exemplos comuns incluem:

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

Inválido

Exemplos de código incorreto para esta regra:

// ❌ Math.random() na renderização
function Component() {
  const id = Math.random(); // Diferente a cada renderização
  return <div key={id}>Content</div>;
}

// ❌ Date.now() para valores
function Component() {
  const timestamp = Date.now(); // Muda a cada renderização
  return <div>Created at: {timestamp}</div>;
}

Válido

Exemplos de código correto para esta regra:

// ✅ IDs estáveis a partir do estado inicial
function Component() {
  const [id] = useState(() => crypto.randomUUID());
  return <div key={id}>Content</div>;
}

Solução de Problemas

Preciso mostrar a hora atual

Chamar Date.now() durante a renderização torna seu componente impuro:

// ❌ Errado: A hora muda a cada renderização
function Clock() {
  return <div>Current time: {Date.now()}</div>;
}

Em vez disso, mova a função impura para fora da renderização:

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>;
}