Probablemente has estado pasando accesorios de componentes padre a hijo y te has preguntado: "Hmm... pero ¿qué pasa si quiero pasar accesorios de un componente hijo a un componente padre? Quiero decir... al revés ?", ¿bien? ? Yo también me lo he preguntado, pero en realidad hay soluciones.

Los revisaremos.

¿Cuál es el flujo típico de accesorios?

El flujo típico de accesorios es de padres a hijos. Básicamente, digamos que tiene un componente principal que se ve así:

El componente secundario que tenemos a continuación utiliza un componente de botón de la muy querida biblioteca de componentes shadcn/ui. El componente Botón tiene un accesorio secundario, que se pasa desde el componente Principal.

Arriba, estamos pasando un accesorio secundario del componente principal al componente secundario. Todo bien hasta ahora, ¿verdad?

¿Qué pasa si queremos pasar accesorios de niño a padre?

Ahora bien, aquí es donde las cosas se ponen un poco complicadas, especialmente si es la primera vez que implementas dicha lógica. La parte complicada probablemente no sea cómo hacerlo, sino más bien cómo visualizarlo. De cualquier manera, he estado allí y espero que mi experiencia te ayude.

Debido a que la mejor manera de aprender es haciendo, tomemos el ejemplo anterior y modifíquelo un poco para ver cómo podemos pasar accesorios del niño al padre. El objetivo de este ejemplo es mostrar cómo podemos modificar el estado del componente principal pasando datos del componente secundario.

Y esto es lo que hacemos desde el componente Niño:

Para que sea más sencillo de entender en forma escrita, lo que estamos tratando de lograr con los dos componentes es que inicializamos el estado en el componente principal y luego pasamos las variables al componente secundario y la función respectiva para actualizar. el valor del estado en el componente principal. En este caso, supongamos que el valor del estado primero se establece en falso. Cuando hacemos clic en el botón del componente secundario, tomará ese valor y lo cambiará al opuesto de falso (! en el valor lo niega) cuando se llame a la función en el evento de clic.

Un error común al pasar datos de un niño a un padre

Pasar datos del componente secundario al principal tiene sus peculiaridades. Uno de los errores más comunes es olvidar pasar la función de devolución de llamada como accesorio al componente secundario, pero eso también significa que estás pasando más lógica de la que necesitas pasar. Esto puede generar errores más molestos y más difíciles de depurar.

Una forma de evitar esto es usar el enlace useCallback, que garantiza que la función que pasa como devolución de llamada al componente secundario permanezca estable en todos los renderizados, lo que evita renderizaciones innecesarias y mejora el rendimiento. Lo que sucede con useCallback es que pasa una función como accesorio al componente secundario, y el componente secundario tendrá acceso a la función y podrá llamarla cuando sea necesario. Veamos cómo podemos hacer esto.

Ahora veamos cómo se ve en el componente secundario:

¿No es esto más limpio que pasar la función, luego actualizarla desde el hijo y luego pasarla nuevamente al padre? Más limpio y más fácil de implementar, ¿verdad? ?

¡Gracias por leer!

Aunque seguramente hay más formas, y potencialmente incluso más limpias y atractivas, de pasar datos de un niño a un padre en React, espero que después de leer mi artículo, te resulte más fácil comprender el flujo de cómo pasan los datos. de niño a padre, y cómo implementarlo de dos maneras diferentes. Quién sabe, tal vez encuentres una forma más creativa de hacerlo tú mismo. ? Si es así, ¡te agradeceríamos mucho que explicaras tus ideas en los comentarios!

Sobre el autor

Soy desarrollador de software y redactor técnico con sede en Portugal. ¿Me apasiona la ingeniería de software?‍? y me encanta explorar nuevas herramientas en mi día a día y encontrar soluciones interesantes y creativas a problemas técnicos y comerciales comunes. Puedes encontrarme en GitHub. Si tiene alguna pregunta o comentario, ¡no dude en comunicarse! ?