Você provavelmente tem passado adereços de componentes pai para filho e se questionou: "Hmm... mas e se eu quiser passar adereços de um componente filho para um componente pai? Quero dizer... o contrário ?", certo? ? Eu também me questionei isso, mas na verdade existem soluções.

Vamos analisá-los.

Qual é o fluxo típico de adereços?

O fluxo típico de adereços é de pai para filho. Basicamente, digamos que você tenha um componente Pai parecido com este:

O componente filho que temos abaixo usa um componente Button da adorada biblioteca de componentes shadcn/ui. O componente Button possui uma propriedade children, que é passada do componente Parent.

Acima, estamos passando uma propriedade children do componente Parent para o componente Child. Tudo bem até agora, certo?

E se quisermos passar acessórios de filho para pai?

Agora, é aqui que as coisas ficam um pouco complicadas, especialmente se for a primeira vez que você implementa essa lógica. A parte complicada provavelmente não é como fazê-lo, mas sim como visualizá-lo. De qualquer forma, eu estive lá e espero que minha experiência ajude você?

Como aprender é melhor feito fazendo, vamos trazer o exemplo anterior e modificá-lo um pouco para ver como podemos passar acessórios de filho para pai. O objetivo deste exemplo é mostrar como podemos modificar o estado do componente Pai passando dados do componente Filho.

E aqui está o que fazemos com o componente Filho:

Para simplificar a compreensão por escrito, o que estamos tentando realizar com os dois componentes é inicializar o estado no componente Pai e, em seguida, passar as variáveis ​​​​para o componente Filho e a respectiva função para atualizar o valor do estado no componente Pai. Neste caso, suponha que o valor do estado seja primeiro definido como falso. Quando clicamos no botão do componente Child, ele pegará esse valor e o alterará para o oposto de false (! no valor o nega) quando a função for chamada no evento click.

Uma armadilha comum ao passar dados de filho para pai

Passar dados do componente filho para o pai tem suas peculiaridades. Uma das armadilhas mais comuns é esquecer de passar a função de retorno de chamada como um suporte para o componente filho, mas isso também significa que você está passando mais lógica do que precisa. Isso pode levar a bugs mais irritantes e mais difíceis de depurar.

Uma maneira de evitar isso é usar o gancho useCallback, que garante que a função que você passa como retorno de chamada para o componente filho permaneça estável nas renderizações, evitando novas renderizações desnecessárias e melhorando o desempenho. O que acontece com useCallback é que você passa uma função como suporte para o componente filho, e o componente filho terá acesso à função e poderá chamá-la quando necessário. Vamos ver como podemos fazer isso.

Agora vamos mostrar como fica no componente Filho:

Isso não é mais limpo do que passar a função e, em seguida, atualizá-la do filho e depois passá-la novamente para o pai? Mais limpo e mais fácil de implementar também, certo? ?

Obrigado por ler!

Embora existam certamente mais maneiras, e potencialmente ainda mais limpas e mais bonitas, de passar dados de filho para pai no React, espero que, depois de ler meu artigo, você ache mais fácil entender o fluxo de como os dados passam de filho para pai, e como implementar isso de duas maneiras diferentes. Quem sabe você mesmo encontre uma maneira mais criativa de fazer isso? ? Se sim, ficaríamos muito gratos em explicar suas idéias nos comentários!

Sobre o autor

Sou desenvolvedor de software e redator técnico baseado em Portugal. Sou apaixonado por engenharia de software ?‍? e adoro explorar novas ferramentas no meu dia-a-dia e encontrar soluções interessantes e criativas para problemas comuns de negócios e técnicos. Você pode me encontrar no GitHub. Se você tiver alguma dúvida ou feedback, sinta-se à vontade para entrar em contato! ?