Optimización de componentes en React con React.memo

Aunque esto suene voy hermoso y quieras aplicar React.memo a todos tus componentes también puede generarte problemas de rendimiento, para entenderlo de una forma fácil imaginalo como un supervisor que tiene que estar checando si se renderiza o no tiene que checar las props y todo eso. Es un filtro que en vez de ayudar puede perjudicar la aplicación.
La reocmendación lo mismo que el autor marca, solo usarlo cuando veas que el componente no va a tener actualizaciones.

¿En qué piensas cuando debes “optimizar un componente” de tu aplicación en React.js?
Respuesta: Evitar renders innecesarios.

En los ejemplos de éste artículo hay un detalle con el método shouldComponentUpdate, básicamente los parámetros que recibe ésta función son nextProps y nextState (nuevasProps, nuevoEstado) NO prevProps y newProps, en el ejemplo el nombre colocado y la comparación están erróneos. Lo comento por si alguno se dio cuenta o si tratan de implementarlo tal cual, no les funcionaría.

Doc de shouldComponentUpdate -> https://reactjs.org/docs/react-component.html#shouldcomponentupdate

Existen patrones de diseño para React o algo que nos ayude a pensar desde un principio la aplicación optimizada?

Hace poco, hice un proyecto donde tenia que crea un modal para realizar el CRUD de datos. Y no sabia por que era tan pesado cada vez que alteraba algún estado. Ahora me pongo a pensar q cada vez renderizaba el modal con todos sus componentes a cada rato. Creo q ya tengo donde empezar a optimizar.

Evitar renderizados innecesarios a favor del cliente y del performance de la app.

Empezar a aplicar esto creo que será un avance muy grande en mi progreso profesional, ya que vi y trabaje en proyectos donde esto no se tomaba en cuenta, mas ahora podré empezar a trabajar para optimizarlos al máximo.

Uff optimiza un monton, React.memo debe ser como un standar al usar componentes padres con diferentes estados e hijos

¿En qué piensas cuando debes “optimizar un componente” de tu aplicación en React.js?
Respuesta: Para evitar que la aplicación se vuelva lenta, y que sea más fácil de modificar ese componente en el futuro

Bastante practico

Me gusta que nos den este punto de un “algo” especifico que debemos tener en cuenta para poder hacer nuestros desarrollos lo mejor posible, ya que realmente son cosas que no se aprenden de otra forma.
Estaría genial agregar este tema en un foro de react en Platzi!!

Optimizar un componente (antes de leer la clase): Evitar consumo de memoria, separar en componentes aún más pequeños para que se entienda mejor el código

¿En qué piensas cuando debes “optimizar un componente” de tu aplicación en React.js?. R/
hacerlo mas simple de entender y poder dejarlo funcional para que se adapte a diferentes componentes.

Evitar ejecucíones no deseadas de funciones.

Optimizar un componente para mi es normalizar datos, refactorizar, dividir un componente presentacional a otro que tiene la logica.

Hasta el momento cuando escucho optimizar un componente pienso en evitar procedimientos que no sean necesarios, como no hacer la misma búsqueda dos veces, o no hacer render de un componente hijo, al menos de que sea modificado. Esto ayuda a ahorrar memoria y hacer cálculos más rápidos.

Increibleeeeeeee 😄 !! Cambio muchisimo

al principio pensé que eran diferentes por el ‘vs’, pues son los mismos, solamente para distintos casos como son los componentes stateful y stateless

Me gustaría leer en el código fuente de React las partes en donde se implementa la “reactividad” para entender más a fondo cómo funciona la librería y el concepto de “reactividad” como tal 🤔

Genial

Al leer este artículo se pone de manifiesto que el hecho de optimizar ayuda a que el código sea mas definido y sus recursos mejor utilizados, evitando usos innecesario o como en este caso, re-renderizados de todos los componentes de padre a hijo.

Ahora que veo como funciona la optimizacion pienso que puede aplicar para optmizar el listado de MyOrder (curso anterior: ReactJS Practico), y la pagina total no tener esta optimizacion del render. Si tuvieramos en este curso un componente hijo donde listar los personajes favoritos tambien aplicaria la optimizacion del render.

Tambien se me ocurre que puedo tener en mi pagina un componente hijo que muestre un listado de productos, este listado surge de consumir una api, es probable que al hacer el efecto de paginacion, sea necesaria esta optimizacion.

en pocas palabras:
usar useMemo cuando las consultas que hagamos siempre tendran los mismos resultados

no usarla cuando vallamos a tener actualizaciones constantes del servidor ejemplo una consulta a una API

¿En qué piensas cuando debes “optimizar un componente” en tu aplicación con React.js?

Pienso en q no se debe hacer renders innecesarios

Optimizar un componente lo relaciono a escribir menos líneas de código.

La verdad este documento es sencillamente brutal! Que genial. Muchas gracias Juan por detallar y ejemplificar de esta forma el contenido.

Thanks #TeamPlatzi 😎

Excelente aporte 👏🏻

Visualmente para el usuario, ¿Esto es notorio.?

Gracias.

Gracias por la clase, esto me recuerda siempre tener presente lo importante de la optimización dentro de nuestros proyectos!

Ooooooorale, esto me ayudará bastante en mis proyectos, Gracias 💚