React Academy · Aula

Boas práticas para chaves e refs

Use chaves estáveis, evite problemas de índices como chaves e trabalhe com refs de retorno de chamada.

Boas práticas para chaves e refs é uma aula grátis de React Academy no CoddyKit. Esta é a aula 3 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á a usar chaves de listas corretamente, por que usar o índice da matriz como chave causa erros e como trabalhar com referências de retorno de chamada e referências encaminhadas.

Por que as chaves são importantes

O React usa propriedades `key` para acompanhar quais itens de uma lista mudaram, foram adicionados ou foram removidos entre as renderizações. Uma chave correta permite que o React reutilize nós DOM existentes; uma chave incorreta causa desmontagens e remontagens desnecessárias.

Chaves exclusivas e estáveis

A melhor chave é um ID estável e exclusivo dos seus dados — como o ID de uma linha de banco de dados ou um UUID. Essa chave precisa ser exclusiva apenas entre os elementos irmãos, não globalmente em toda a página.

users.map(user => (
  <UserCard key={user.id} user={user} />
))

Por que o índice como chave é problemático

Usar o índice da matriz como chave funciona bem para listas estáticas, mas causa erros em listas ordenadas ou filtradas. Quando os itens mudam de ordem, o React associa os componentes pelo índice e reutiliza os nós DOM errados, corrompendo os valores de entrada e o estado das animações.

// Risky when list can reorder or filter
items.map((item, i) => <Row key={i} {...item} />)

Quando o índice como chave é aceitável

Usar o índice como chave só é aceitável quando: (1) a lista nunca é reordenada nem filtrada, (2) os itens não têm um ID estável e (3) os itens não têm estado local (por exemplo, valores de entrada). Listas de exibição estáticas não apresentam problema.

Gerando IDs estáveis

Se seus dados não tiverem um ID, gere um no momento em que criar o item (não durante a renderização). Você pode usar `crypto.randomUUID()` ou a biblioteca `nanoid`.

const newItem = { id: crypto.randomUUID(), text: 'Buy milk' };

Noções básicas de useRef

`useRef` retorna um objeto mutável cujo valor `.current` persiste entre as renderizações sem causar novas renderizações. Ele é usado para armazenar referências do DOM e valores mutáveis, como IDs de temporizadores.

const inputRef = useRef(null);
<input ref={inputRef} />
// Access DOM node: inputRef.current.focus();

Referências de retorno de chamada

Em vez de passar um objeto de referência, você pode passar uma **referência de retorno de chamada** — uma função que o React chama com o nó DOM quando ele é montado e com `null` quando é desmontado. Isso permite configurar a lógica exatamente quando o nó fica disponível.

function Input() {
  return (
    <input
      ref={node => {
        if (node) node.focus();
      }}
    />
  );
}

forwardRef para referências de componentes

Componentes funcionais não aceitam `ref` como uma propriedade comum. Envolva o componente em `React.forwardRef` para permitir que os componentes pais anexem uma referência a um nó DOM interno.

const FancyInput = React.forwardRef((props, ref) => (
  <input ref={ref} className="fancy" {...props} />
));

// Parent
const inputRef = useRef(null);
<FancyInput ref={inputRef} />

useImperativeHandle

Quando um componente pai mantém uma referência a um componente filho, você pode controlar exatamente o que ele expõe usando `useImperativeHandle`. Isso mantém o DOM interno do filho privado e fornece uma API imperativa limpa.

const Child = forwardRef((_, ref) => {
  const innerRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => innerRef.current.focus(),
  }));
  return <input ref={innerRef} />;
});

Verificação rápida

Por que você deve evitar usar o índice da matriz como chave em uma lista que pode ser reordenada?

Recapitulação

Use IDs estáveis dos dados como chaves, evite chaves baseadas em índices em listas dinâmicas, use useRef para acessar o DOM e armazenar valores mutáveis, use referências de retorno de chamada para a lógica de montagem e desmontagem e use forwardRef para expor referências de componentes filhos.

Próxima lição

Próxima lição: **Estrutura de pastas e convenções de nomenclatura** — você organizará um projeto React com pastas baseadas em recursos e nomes consistentes para os arquivos.

Perguntas Frequentes

A aula “Boas práticas para chaves e refs” é grátis?

Sim — o texto completo de “Boas práticas para chaves e refs” é 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 “Boas práticas para chaves e refs”?

Use chaves estáveis, evite problemas de índices como chaves e trabalhe com refs de retorno de chamada. 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 3 de 4.

Quanto tempo leva a aula “Boas práticas para chaves e refs”?

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