Callback Props Props de callback
Última atualização: 2026-11-03
Callback Props Props de callback
As props podem carregar funções além de dados. O filho chama o callback que o pai passou no momento certo e relata a própria mudança, o que permite que um filho atualize o estado do pai — o jeito padrão de se comunicar de baixo para cima enquanto o fluxo de dados continua unidirecional. O filho continua responsável pela apresentação, e o pai continua responsável pelos dados.
| Grupo | Renderização e Estado |
|---|---|
| Tipo | Padrão |
| Desde | Primeiras versões do React |
ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.
📝 Sintaxe
// Pai: passe a função de atualização como prop
<Counter value={count} onChange={setCount} />
// Filho: chame o callback no momento certo para "relatar" a mudança
<button onClick={() => onChange(value + 1)}>+1</button>⚙️ Parâmetros
| onXxx (callback) | Uma prop de função fornecida pelo pai; o filho pode chamá-la com argumentos para devolver o resultado da interação e deixar o pai cuidar dele. |
|---|
Retorna：Sem valor de retorno — uma convenção de código e um modelo mental.
▶ Exemplo
O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.
Saída：
Um total centralizado e um botão de contagem; cada clique aumenta o número dentro do botão e atualiza o total acima dele — o filho modificou o estado do pai pelo callback.💡 Pontos-chave
💡 Dica Convenção de nomes: props de callback usam o prefixo on (onChange), enquanto o handler definido no pai usa o prefixo handle (handleChange).
ℹ️ Informação Quando vários componentes precisam do mesmo estado, eleve-o para o pai comum e combine com props de callback para fechar o ciclo.
⚠️ Aviso Um callback é uma função nova a cada render, então ao otimizar com memo lembre-se de estabilizar a referência com useCallback.
🏷️ Mais Renderização e Estado
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ Perguntas Frequentes
P Como um filho modifica o estado do pai?
R O pai passa a sua função setState (ou um handler que a envolva) como prop, e o filho a chama para disparar uma atualização de estado no pai.
P Qual a diferença entre onXxx e handleXxx?
R onXxx nomeia uma prop de callback entregue a um filho e diz o que aconteceu; handleXxx nomeia o handler real dentro do pai e diz como ele é tratado.
P Props de callback afetam a performance?
R A chamada em si é irrelevante, mas uma função criada a cada render invalida o memo do filho; use useCallback para estabilizar a referência quando otimizar em profundidade.
