Mantener los componentes puros

Algunas funciones de JavaScript sonpuras.Las funciones puras solo realizan un cálculo y nada más. Al escribir estrictamente tus componentes como funciones puras, puedes evitar toda una clase de errores desconcertantes y comportamientos impredecibles a medida que crece tu base de código. Sin embargo, para obtener estos beneficios, hay algunas reglas que debes seguir.

Pureza: Componentes como fórmulas

En informática (y especialmente en el mundo de la programación funcional),una función puraes una función con las siguientes características:

• Se ocupa de sus propios asuntos.No cambia ningún objeto o variable que existiera antes de ser llamada.
• Mismas entradas, misma salida.Dadas las mismas entradas, una función pura siempre debe devolver el mismo resultado.

Quizás ya estés familiarizado con un ejemplo de funciones puras: las fórmulas en matemáticas.

Considera esta fórmula matemática:y= 2x.

Six= 2entoncesy= 4. Siempre.

Six= 3entoncesy= 6. Siempre.

Six= 3,yno será a veces9 o –1 o 2.5dependiendo de la hora del día o del estado del mercado de valores.

Siy= 2x y x= 3,yserásiempre 6.

Si convertimos esto en una función de JavaScript, se vería así:

En el ejemplo anterior,doublees unafunción pura.Si le pasas3, devolverá6. Siempre.

React está diseñado en torno a este concepto.React asume que cada componente que escribes es una función pura.Esto significa que los componentes de React que escribas siempre deben devolver el mismo JSX dadas las mismas entradas:

Cuando pasasdrinkers={2} a Recipe, devolverá JSX que contiene2 cups of water. Siempre.

Si pasasdrinkers={4}, devolverá JSX que contiene4 cups of water. Siempre.

Al igual que una fórmula matemática.

Puedes pensar en tus componentes como recetas: si las sigues y no introduces nuevos ingredientes durante el proceso de cocción, obtendrás el mismo plato cada vez. Ese "plato" es el JSX que el componente sirve a React pararenderizar.

Ilustrado porRachel Lee Nabors

Efectos secundarios: Consecuencias (no)intencionadas

El proceso de renderizado de React siempre debe ser puro. Los componentes solo debendevolversu JSX, y nocambiarningún objeto o variable que existiera antes del renderizado—¡eso los haría impuros!

Aquí hay un componente que rompe esta regla:

Este componente está leyendo y escribiendo una variableguestdeclarada fuera de él. Esto significa que¡llamar a este componente varias veces producirá JSX diferente!Y lo que es más, siotroscomponentes leenguest, también producirán JSX diferente, ¡dependiendo de cuándo se renderizaron! Eso no es predecible.

Volviendo a nuestra fórmulay= 2x, ahora incluso six= 2, no podemos confiar en quey= 4. Nuestras pruebas podrían fallar, nuestros usuarios quedarían desconcertados, los aviones caerían del cielo—¡puedes ver cómo esto llevaría a errores confusos!

Puedes arreglar este componentepasando guest como prop en su lugar:

Ahora tu componente es puro, ya que el JSX que devuelve solo depende de la propguest.

En general, no debes esperar que tus componentes se rendericen en un orden particular. No importa si llamas ay= 2xantes o después dey= 5x: ambas fórmulas se resolverán independientemente una de la otra. De la misma manera, cada componente solo debe "pensar por sí mismo", y no intentar coordinarse o depender de otros durante el renderizado. ¡Renderizar es como un examen escolar: cada componente debe calcular su JSX por sí solo!

Mutación local: El pequeño secreto de tu componente

En el ejemplo anterior, el problema era que el componente cambiaba una variablepreexistentemientras se renderizaba. Esto a menudo se llama"mutación"para que suene un poco más aterrador. Las funciones puras no mutan variables fuera del alcance de la función u objetos que se crearon antes de la llamada—¡eso las hace impuras!

Sin embargo,está completamente bien cambiar variables y objetos queacabasde crear mientras renderizas.En este ejemplo, creas un array[], lo asignas a una variablecupsy luegopushuna docena de tazas en él:

Si la variablecupso el array[]se crearon fuera de la funciónTeaGathering, ¡esto sería un gran problema! Estarías cambiando un objetopreexistenteal insertar elementos en ese array.

Sin embargo, está bien porque los has creadodurante el mismo renderizado, dentro deTeaGathering. Ningún código fuera deTeaGatheringsabrá nunca que esto sucedió. Esto se llama"mutación local"—es como el pequeño secreto de tu componente.

Dóndesípuedes causar efectos secundarios

Aunque la programación funcional depende en gran medida de la pureza, en algún momento, en algún lugar,algotiene que cambiar. ¡Ese es más o menos el punto de la programación! Estos cambios—actualizar la pantalla, iniciar una animación, cambiar los datos—se llamanefectos secundarios.Son cosas que suceden"al margen", no durante el renderizado.

En React,los efectos secundarios generalmente pertenecen a loscontroladores de eventos.Los controladores de eventos son funciones que React ejecuta cuando realizas alguna acción—por ejemplo, cuando haces clic en un botón. Aunque los controladores de eventos se definendentrode tu componente, no se ejecutanduranteel renderizado.Por lo tanto, los controladores de eventos no necesitan ser puros.

Si has agotado todas las demás opciones y no puedes encontrar el controlador de eventos adecuado para tu efecto secundario, aún puedes adjuntarlo al JSX devuelto con una llamada auseEffecten tu componente. Esto le dice a React que lo ejecute más tarde, después del renderizado, cuando se permiten los efectos secundarios.Sin embargo, este enfoque debería ser tu último recurso.

Cuando sea posible, intenta expresar tu lógica solo con el renderizado. ¡Te sorprenderá lo lejos que puedes llegar!

Resumen

• Un componente debe ser puro, lo que significa:
  • Se ocupa de sus propios asuntos.No debe cambiar ningún objeto o variable que existiera antes de la renderización.
  • Mismas entradas, misma salida.Dadas las mismas entradas, un componente siempre debe devolver el mismo JSX.
• La renderización puede ocurrir en cualquier momento, por lo que los componentes no deben depender de la secuencia de renderización de los demás.
• No debes mutar ninguna de las entradas que tus componentes usan para renderizar. Eso incluye props, estado y contexto. Para actualizar la pantalla,"establece" el estadoen lugar de mutar objetos preexistentes.
• Esfuérzate por expresar la lógica de tu componente en el JSX que devuelves. Cuando necesites "cambiar cosas", normalmente querrás hacerlo en un controlador de eventos. Como último recurso, puedes usaruseEffect.
• Escribir funciones puras requiere un poco de práctica, pero desbloquea el poder del paradigma de React.