3 Buenas prácticas de React que puede que no conozcas y ¡te urgen en 2023!

Hay una inmensidad de tutoriales y contenido sobre React desactualizado. 😰

La mayoría de cuando utilizábamos clases y ciclos de vida del componente, lo que hace muy difícil tener claridad sobre cuáles son las mejores prácticas hoy en día.

Por eso, en esta breve entrada, te voy a explicar 3 de las que a mi parecer son las mejores prácticas en React para 2023, para que mejores tu toma de decisiones a la hora de crear tus componentes y te mantengas fresco en tu carrera.

Primer buena práctica: No evites usar <React.StrictMode />

El modo estricto apareció en React en la versión 17 de la librería.

Su intención es ayudarte con "warnings" y linterna para que tu código se libere de prácticas "legacy" descontinuadas que ya no debemos usar. Lo cual nos habla de lo madura que es la herramienta hoy en día.

Emplea este wrapper en todos tus proyectos y tomate el tiempo de corregir cualquier warning que aparezca con relación al modo estricto, pues te evitará problemas inesperados en las nuevas y futuras versiones de React.

Algunas de las características que StrictMode nos ayuda a evitar son:

  • Identificar legacy string refs.

  • Detectar el método caduco findDOMNode .

  • Detectar el uso caduco del Context API.

  • Detectar los ciclos de vida no seguros que han sido «deprecados» por React.

  • Detectar efectos secundarios inesperados en los componentes.

Hace poco vi un anuncio de un bootcamp popular, que intenta venderte un curso para "aprender React con clases", ¿en 2023, en serio?, 😫 si estás por comprarte un curso, por favor, asegúrate de que no sea con clases y que el StrictMode esté siempre presente. Considera aprender con Fixtergeek en vivo 😉

Segunda buena práctica: Los componentes son mejores, pequeños y específicos

Cuando trabajaba en una startup internacional, me levantaba todos los días nervioso.

Nervioso de que no me tocara trabajar con los «componentes» "legacy", porque eran ¡componentes monstruosos!, enormes, sucios, hacían de todo y cualquier cosa que les tocaras o quisieras cambiar, seguro romperías el trabajo de otras áreas del app que lo usaban. Era horrible.

Es curioso que me toco la suerte de aprender todas las malas prácticas en empresas muy grandes, mientras que en pequeñas startups con un puñado de developers talentosos, aprendí las buenas.

Siempre mantén tus componentes pequeños, intenta que sean lo que su nombre insinúa: Componentes.

Un componente debería hacer una sola cosa, y mostrar solo un elemento en pantalla, si tu componente requiere hacer muchas cosas, considera convertir esas «cosas» en customHooks a los que le puedes delegar la lógica y mantener tu componente simplificado.

A fin de cuentas, los componentes son funciones, aplica el principio SOLID también a tus componentes.

Tercera buena práctica: Sí, debes escribir tests para tus componentes

De la mano del punto anterior, cuando tus componentes son pequeños y específicos, crearles tests es más fácil y sin tanto dolor.

A nadie nos gusta escribir tests, «la neta», pero cuando ya te tomaste tu carrera como developer en serio, bueno, caes en la cuenta de que debes escribir tests.

Además de que con la práctica te vuelves más desconfiado de ti mismo. 🫣 También cuando llegas a un puesto de liderazgo, siempre vas a preferir que los «unit tests» estén presentes en el día a día de tu equipo de desarrollo.

Mi recomendación es que siempre, tanto para cuando desarrollas para ti mismo, como cuando desarrollas para un empleador, mantengas la calidad de tu código visible y con evidencia, y esa calidad es mucho mejor percibida con tests.

Otra recomendación es que le eches un ojo a Vitest, que podría ser una herramienta que te haga sonreír nuevamente, incluso al hablar de testing, y si andas por las veredas full stack, checa también Cypress

Estas 3 buenas prácticas pueden ser simples, pero recuerda que la simplicidad es el rey en este oficio.

No dejes de empujarte a mantenerte actualizado, el StrictMode te va a ayudar mucho a saber que ya no usar.

De igual forma y como disco rayado, te recuerdo que leer es muy importante en tu carrera como desarrollador, regularmente las herramientas como React mantienen a la comunidad actualizada primeramente a través de su Blog.

Suscríbete a nuestro newsletter, te mantendremos actualizado sobre todo lo nuevo e importante de la web.

No dejes de leer sobre concurrencia y Server Components que son el futuro. Para que mantengas las buenas prácticas como parte de tu perfil profesional.

Abrazo. Bliss.

Did you find this article valuable?

Support Héctor BlisS by becoming a sponsor. Any amount is appreciated!