No hay duda de que React 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 esta primera parte de la guía Mejores prácticas de React te mostraremos 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. 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
El estado de React debe ser inmutable
En React, una de las claves más importantes es 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 a React optimizar la representación y garantizar 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 uses useState para 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 entrada de tipo date dada sin almacenarla en el estado del componente. Al crear formattedDate como 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.
Fuente: https://www.freecodecamp.org/news/react-best-practices-ever-developer-should-know/?ref=dailydev