Reglas de React
Así como los diferentes lenguajes de programación tienen sus propias formas de expresar conceptos, React tiene sus propios idioms - o reglas - para expresar patrones de una forma que resulte fácil de entender y que permita crear aplicaciones de alta calidad.
Esta sección describe las reglas que necesitas seguir para escribir código React idiomático. Escribir código React idiomático puede ayudarte a crear aplicaciones bien organizadas, seguras y componibles. Estas propiedades hacen que tu aplicación sea más resistente a los cambios y facilitan el trabajo con otros desarrolladores, librerías y herramientas.
Estas reglas son conocidas como las Reglas de React. Son reglas – y no solo directrices – en el sentido de que si se rompen, es probable que tu aplicación tenga errores. Tu código también se vuelve poco idiomático y más difícil de entender y de razonar.
Recomendamos encarecidamente usar Strict Mode junto con el ESLint plugin para ayudar a que tu base de código siga las Reglas de React. Seguir las Reglas de React te permitirá encontrar y abordar estos errores y mantener tu aplicación.
Los components y Hooks deben ser puros
La Pureza en Componentes y Hooks es una regla clave de React que hace que tu aplicación sea predecible, fácil de depurar y permite que React optimice automáticamente tu código.
- Los Components y Hooks deben ser idempotentes – Se asume que los componentes de React siempre devuelven la misma salida con respecto a sus entradas – props, estado, y contexto.
- Los efectos secundarios deben ejecutarse fuera del renderizado – Los efectos secundarios no deben ejecutarse en el renderizado, ya que React puede renderizar los componentes múltiples veces para crear la mejor experiencia posible para el usuario.
- Las props y el estado son inmutables – Las props y el estado de un componente son instantáneas inmutables con respecto a un único renderizado. Nunca las mutes directamente.
- Los valores de retorno y los argumentos de los Hooks son inmutables – Una vez que los valores se pasan a un Hook, no debes modificarlos. Como las props en JSX, los valores se vuelven inmutables cuando se pasan a un Hook.
- Los valores son inmutables después de ser pasados a JSX – No mutes valores después de que se han utilizado en JSX. Mueve la mutación antes de que se cree el JSX.
React llama a los Components y Hooks
React se encarga de renderizar los componentes y hooks cuando sea necesario para optimizar la experiencia del usuario. Es declarativo: le dices a React qué renderizar en la lógica de tu componente, y React se encargará de decidir cómo mostrarlo de la mejor manera a tu usuario.
- Nunca llames a funciones de componentes directamente – Los componentes solo deben ser utilizados en JSX. No los llames como funciones regulares.
- Nunca pases Hooks como valores regulares – Los Hooks solo deben ser llamados dentro de componentes. Nunca los pases como un valor regular.
Reglas de los Hooks
Los Hooks se definen mediante funciones JavaScript, pero representan un tipo especial de lógica de UI reutilizable con restricciones sobre dónde se pueden llamar. Debes seguir las Reglas de los Hooks cuando los uses.
- Sólo llama a los Hooks en el nivel más alto – No llames a los Hooks dentro de bucles, condicionales o funciones anidadas. En su lugar, utilízalos siempre en el nivel más alto de tu función React, antes de cualquier retorno anticipado.
- Sólo llama a los Hooks desde funciones React – No llames a los Hooks desde funciones convencionales de JavaScript.