Cuanto más estudio React.js, más me enamoro de él. No hay duda de que es una de las bibliotecas de JavaScript para front-end más útiles y queridas que existen. Y las mejoras que el equipo de React ha realizado últimamente no solo afectan a los desarrolladores, sino también a quienes usan aplicaciones creadas con React.
En un artículo anterior , hablé sobre varios React Hooks y cómo funcionan junto con ejemplos de código y explicaciones detalladas.
En esta guía, voy a hablar sobre algunas cosas importantes que aprendí mientras desarrollaba aplicaciones React. Y estos aprendizajes están optimizados en función del uso de React Hooks. Desmentiremos algunos mitos comunes, simplificaremos conceptos comunes y optimizaremos su código para obtener el mejor rendimiento.
Lo que cubriremos:
- ¿Cómo le beneficiará esta guía?
- Prerrequisitos
- El estado de React debe ser inmutable
- No utilices el estado para todo
- Derivar valores sin estado
- Calcular valores sin efectos
- Las claves deben ser únicas
- Utilice useEffect Last
- Conclusión:
¿Cómo le beneficiará esta guía?
Digamos que tienes un cuchillo y te pido que recortes algunas formas de un trozo de tela. Podrías hacerlo, pero te llevaría un tiempo y sería un desafío usar un cuchillo. En cambio, ¿qué pasaría si te diera un par de tijeras muy afiladas y luego te pidiera que cortaras los patrones? Sería mucho más fácil, ¿verdad?
Esta guía es como ese enfoque optimizado de cortar tela con tijeras en lugar de un cuchillo. Te enseñaré a usar React de forma más sencilla y sin tanto esfuerzo. Analizaremos los aspectos importantes de cómo funcionan los Hooks de React y también cubriremos algunos consejos sobre qué hacer y qué no hacer.
Prerrequisitos
Solo hay un requisito previo fundamental para seguir esta guía: debes haber usado los hooks de React al menos una vez. Y con esto me refiero a haber desarrollado una aplicación con React que aproveche el poder de los hooks.
Este artículo es para todos aquellos que quieran aprovechar al máximo los hooks de React.
El estado de React debe ser inmutable
¿Alguna vez te preguntaste por qué React hace tanto alboroto por la inmutabilidad? 🤔 Como novato, podrías pensar que las mutaciones de JavaScript están perfectamente bien. Después de todo, agregamos o eliminamos propiedades de los objetos y manipulamos matrices con facilidad.
Pero aquí está el giro: en React, la inmutabilidad no se trata de nunca cambiar de estado, se trata de garantizar la consistencia.
Cuando se modifica el estado directamente, React no puede detectar los cambios de forma fiable. Esto significa que la interfaz de usuario podría no actualizarse como se esperaba. ¿El truco? Reemplazar los datos antiguos con copias nuevas.
Por ejemplo, si necesita agregar un usuario, debe crear una nueva matriz con el nuevo usuario incluido, en lugar de insertarlo directamente en la matriz existente.
const updatedUsers = [...users, newUser];
El código const updatedUsers = [...users, newUser];utiliza el operador de propagación para crear una nueva matriz, updatedUsers, que combina la existente userscon newUser.
Este enfoque mantiene la inmutabilidad en React al no modificar la usersmatriz original. En cambio, crea una nueva representación de estado, lo que permite que React optimice la representación y garantice cambios de estado predecibles. Cuando actualiza el estado con setUsers(updatedUsers);, React vuelve a representar el componente en función de esta nueva matriz, siguiendo las mejores prácticas para la gestión de estados.
Esto garantiza que React detecte el cambio y vuelva a renderizar el componente sin problemas.
No lo use useStatepara todo
Es hora de confesar: solía arrojar todo useStatesin pensarlo dos veces. 🚀 Pero aquí está la primicia: no todo tiene que estar en estado. El estado es poderoso, pero usarlo en exceso puede generar código complejo e ineficiente.
Considere alternativas como el estado del servidor, el estado de la URL o el almacenamiento local. Para los datos del servidor, las bibliotecas como React Query son un punto de inflexión. Se encargan de la obtención y el almacenamiento en caché para que no tenga que hacerlo manualmente. Para el estado de la URL, aproveche los ganchos como useLocationlos de React Router o los métodos integrados de Next.js.
Lista de verificación antes de utilizar useState:
- ¿Este valor es simple y derivable durante la renderización?
- ¿Alguna biblioteca ya gestiona este estado?
- ¿Es necesario activar una nueva renderización?
- Si respondes “no” a todo, es posible que no necesites
useStatenada.
Derivar valores sin estado
Aquí hay un truco poco conocido: los valores derivados no necesitan vivir en el estado. 🚀 Si sus datos se pueden calcular a partir de estados o propiedades existentes, calcúlelos directamente durante la renderización.
Por ejemplo, el formato de una fecha se puede realizar sobre la marcha sin necesidad de ganchos adicionales:
const formattedDate = new Date(date).toLocaleDateString();
El código const formattedDate = new Date(date).toLocaleDateString();deriva una cadena de fecha formateada a partir de una dateentrada dada sin almacenarla en el estado del componente. Al crearla formattedDatecomo una constante, calcula el valor sobre la marcha cada vez que se la llama, lo que refleja el estado actual de date.
Este enfoque evita la gestión innecesaria de estados, simplifica la lógica de renderizado y mantiene la eficiencia del componente, ya que los valores derivados se recalculan solo cuando cambian los datos subyacentes. Por lo tanto, promueve un estilo de programación limpio y funcional en React.
Esto mantiene sus componentes limpios y evita actualizaciones de estado innecesarias.
Calcular valores sin efectos
¡Deja de usar useEffect para cálculos simples! 🛑 Si tu valor se puede calcular directamente a partir del estado o las propiedades y no implica efectos secundarios, hazlo durante la renderización. Para cálculos costosos, inclúyelos en useMemo para optimizar el rendimiento:
const expensiveValue = useMemo(() => computeExpensiveValue(data), [data]);This reduces the complexity of your code and keeps your components focused.
El código const expensiveValue = useMemo(() => computeExpensiveValue(data), [data]);utiliza el useMemogancho para calcular un valor ( expensiveValue) basado en la dataentrada sin provocar efectos secundarios.
Memoriza el resultado de computeExpensiveValue(data), y lo vuelve a calcular solo cuando datacambia. Este enfoque evita recálculos innecesarios en cada renderización, lo que mejora el rendimiento de los cálculos costosos.
Al confiar en useMemo, el componente deriva eficientemente el valor en función de sus propiedades o estado actuales, manteniendo el proceso de renderizado eficiente y enfocado en los datos más recientes.
Las claves deben ser únicas
Culpable de la acusación: he usado índices de matrices como claves en listas antes. 😅 Pero, ¿sabías que esto puede generar errores? React depende de claves únicas para identificar elementos, y el uso de valores no únicos puede complicar las cosas.
Genere identificadores únicos mediante crypto.randomUUID(), pero asegúrese de hacerlo solo cuando se actualice su estado, no en cada renderización. Para los objetos, considere agregar una propiedad de identificador:
const itemWithId = items.map(item => ({ ...item, id: generateUniqueId() }));
El código crea una nueva matriz, itemWithId, donde cada elemento de la matriz de elementos se amplía con una identificación única.const itemWithId = items.map(item => ({ ...item, id: generateUniqueId() }));
El operador de propagación ( ...item) copia las propiedades de cada elemento y generateUniqueId()genera un identificador nuevo y único. Esto garantiza que cada elemento tenga una clave distinta, lo que es crucial para los componentes de React al representar listas.
Las claves únicas ayudan a React a administrar de manera eficiente las actualizaciones, identificar cambios y optimizar el rendimiento de la representación al distinguir entre diferentes elementos de la lista.
No omita las dependencias
Una de las crueles peculiaridades de React: olvidar dependencias useEffectpuede llevar a cierres obsoletos. 😱 Por ejemplo, si useEffectno incluye las dependencias que necesita, es posible que no se actualice como se espera.
Siempre verifique dos veces sus matrices de dependencia:
useEffect(() => {// Effect logic}, [dependency]);
El código useEffect(() => { /* Effect logic */ }, [dependency]);define un efecto secundario en un componente React que se ejecuta cuando se produce un dependencycambio especificado. Es esencial incluir todas las dependencias relevantes en la matriz de dependencias para garantizar que el efecto se comporte correctamente.
Omitir dependencias puede provocar que se utilicen valores obsoletos o incorrectos en el efecto, ya que React podría no volver a ejecutarlo cuando sea necesario. Incluir todas las dependencias ayuda a mantener la sincronización entre el estado del componente y el efecto, lo que garantiza un comportamiento predecible y evita posibles errores relacionados con actualizaciones omitidas.
Si su interfaz de usuario no se actualiza correctamente, este suele ser el culpable.
Usar useEffectúltimo
Aquí tienes un consejo de experto: no te apresures a usar useEffect. 🙅♂️ Es potente, pero puede generar un código desordenado si se usa en exceso. Los frameworks de React proporcionan soluciones para gestionar los efectos secundarios de forma más elegante. Para la obtención de datos, considera bibliotecas como TanStack Query o SWR que gestionan las solicitudes y el almacenamiento en caché de forma eficiente, lo que genera una mejor experiencia de usuario.
Estrategias alternativas:
- Derivar valores directamente.
- Responder a eventos con controladores.
Obtenga datos en el servidor o con bibliotecas dedicadas.
Conclusión
React es una biblioteca robusta, pero saber cómo usarla de manera efectiva puede marcar la diferencia. Estas lecciones son solo el comienzo.
Tener una idea profunda de los detalles de cualquier tecnología le ayudará durante el desarrollo y la optimización.
React Js es la biblioteca perfecta para el desarrollo moderno. Tiene todo para ofrecer para el desarrollo y la optimización.
¡Gracias por leer y feliz codificación! 🎉
- Sígueme en X: Twitter de Oscar
- Sígueme en LinkedIn: Linkedin de Oscar
- Mira mi portafolio aquí: Portafolio de Oscar
