React Academy · Aula

Componentes puros e prevenção de efeitos colaterais na renderização

Escreva funções de renderização sem mutações nem leituras externas.

Componentes puros e prevenção de efeitos colaterais na renderização é uma aula grátis de React Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

Boas-vindas

Nesta lição, você aprenderá o que significa um componente puro no React, por que as funções de renderização devem ser livres de efeitos colaterais e como identificar e corrigir violações comuns de pureza.

O que é uma função pura?

Uma função pura sempre retorna a mesma saída para as mesmas entradas e não causa efeitos colaterais observáveis. O React espera que a função do seu componente seja pura: dadas as mesmas propriedades e o mesmo estado, ela deve sempre retornar o mesmo JSX.

Por que a pureza é importante no React

O React pode chamar seu componente várias vezes (StrictMode, recursos concorrentes e renderização no servidor). Se seu render tiver efeitos colaterais, como chamadas de API, mutações do DOM ou gravações em variáveis globais, esses efeitos serão executados várias vezes de forma imprevisível.

Impureza comum: alterando estado externo

Nunca altere variáveis definidas fora do componente durante render. Alterações são aceitáveis dentro de manipuladores de eventos ou de useEffect, mas não durante a renderização.

let totalRenders = 0; // external
function Counter() {
  totalRenders++; // BAD: side effect in render
  return <p>{totalRenders}</p>;
}

Impureza comum: alterando propriedades

Nunca altere o objeto de propriedades dentro de um componente. As propriedades são somente leitura. Se precisar de uma versão modificada, crie uma nova variável.

// Bad
function Badge({ user }) {
  user.name = user.name.toUpperCase(); // mutates prop!
  return <p>{user.name}</p>;
}

// Good
function Badge({ user }) {
  const displayName = user.name.toUpperCase();
  return <p>{displayName}</p>;
}

Impureza comum: usando aleatório ou data na renderização

Chamar `Math.random()` ou `Date.now()` diretamente em render produz valores diferentes a cada chamada, quebrando a pureza. Mova essas chamadas para inicializadores de estado ou useEffect.

// Bad
function Token() {
  const id = Math.random(); // different every render!
  return <p>{id}</p>;
}

// Good
function Token() {
  const [id] = useState(() => Math.random());
  return <p>{id}</p>;
}

As chamadas de API pertencem a useEffect

Buscar dados diretamente no corpo da função do componente (e não em `useEffect`) é uma impureza — isso é acionado a cada renderização. Sempre mova as chamadas de busca para useEffect com as dependências apropriadas.

// Bad
function Profile({ id }) {
  fetch('/api/user/' + id); // runs on every render!
  return <div />;
}

// Good
useEffect(() => {
  fetch('/api/user/' + id).then(/*...*/);
}, [id]);

Alterações locais são aceitáveis

Criar e alterar objetos ou matrizes que foram criados *dentro* da mesma chamada de renderização é perfeitamente aceitável — ninguém mais pode observá-los. Isso é chamado de alteração local.

function List({ items }) {
  const sorted = [...items]; // new array
  sorted.sort();             // mutating a local copy: OK
  return sorted.map(i => <li key={i}>{i}</li>);
}

Usando o Modo estrito para encontrar impurezas

React StrictMode chama seu componente duas vezes em desenvolvimento. Se sua interface for inconsistente entre as duas chamadas ou se você observar efeitos colaterais duplicados, seu render será impuro. Corrija a impureza até que a chamada dupla não cause problemas.

Componentes puros e React.memo

Quando um componente é puro (mesmas propriedades → mesma saída), envolvê-lo com `React.memo` informa ao React que ele pode ignorar a nova renderização se as propriedades não tiverem mudado, melhorando o desempenho.

const Pure = React.memo(function Pure({ value }) {
  return <p>{value}</p>;
});

Verificação rápida

Qual das opções a seguir é um efeito colateral aceitável para executar diretamente dentro da função de renderização de um componente React?

Recapitulação

Componentes puros sempre retornam o mesmo JSX para as mesmas entradas. Evite alterar propriedades ou variáveis externas em render, use useEffect para efeitos colaterais e conte com StrictMode para detectar violações.

Próxima lição

Próxima lição: **Práticas recomendadas para chaves e referências** — você usará chaves estáveis corretamente, evitará o problema de usar o índice como chave e trabalhará com referências de retorno de chamada.

Perguntas Frequentes

A aula “Componentes puros e prevenção de efeitos colaterais na renderização” é grátis?

Sim — o texto completo de “Componentes puros e prevenção de efeitos colaterais na renderização” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “Componentes puros e prevenção de efeitos colaterais na renderização”?

Escreva funções de renderização sem mutações nem leituras externas. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar React Academy?

Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Componentes puros e prevenção de efeitos colaterais na renderização”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de React Academy?

Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

O que StrictMode faz
Componentes puros e prevenção de efeitos colaterais na renderização
Boas práticas para chaves e refs
Estrutura de pastas e convenções de nomenclatura

← Voltar para React Academy