¡Bienvenida! Este es un curso especial de React Hooks

1

¿Qué aprenderás en el Curso Profesional de React Hooks?

2

¿Qué son los React Hooks y cómo cambian el desarrollo con React?

Introducción a React Hooks

3

useState: estado en componentes creados como funciones

4

useEffect: olvida el ciclo de vida, ahora piensa en efectos

5

useContext: la fusión de React Hooks y React Context

6

useReducer: como useState, pero más escalable

7

¿Qué es memoization? Programación funcional en JavaScript

8

useMemo: evita cálculos innecesarios en componentes

9

useRef: manejo profesional de inputs y formularios

10

useCallback: evita cálculos innecesarios en funciones

11

Optimización de componentes en React con React.memo

12

Custom hooks: abstracción en la lógica de tus componentes

13

Third Party Custom Hooks de Redux y React Router

Configura un entorno de desarrollo profesional

14

Proyecto: análisis y retos de Platzi Conf Store

15

Git Hooks con Husky

16

Instalación de Webpack y Babel: presets, plugins y loaders

17

Configuración de Webpack 5 y webpack-dev-server

18

Configuración de Webpack 5 con loaders y estilos

19

Loaders de Webpack para Preprocesadores CSS

20

Flujo de desarrollo seguro y consistente con ESLint y Prettier

Estructura y creación de componentes para Platzi Conf Store

21

Arquitectura de vistas y componentes con React Router DOM

22

Maquetación y estilos del home

23

Maquetación y estilos de la lista de productos

24

Maquetación y estilos del formulario de checkout

25

Maquetación y estilos de la información del usuario

26

Maquetación y estilos del flujo de pago

27

Integración de íconos y conexión con React Router

Integración de React Hooks en Platzi Conf Merch

28

Creando nuestro primer custom hook

29

Implementando useContext en Platzi Conf Merch

30

useContext en la página de checkout

31

useRef en la página de checkout

32

Integrando third party custom hooks en Platzi Conf Merch

Configura mapas y pagos con PayPal y Google Maps

33

Paso a paso para conectar tu aplicación con la API de PayPal

34

Integración de pagos con la API de PayPal

35

Completando la integración de pagos con la API de PayPal

36

Paso a paso para conectar tu aplicación con la API de Google Maps

37

Integración de Google Maps en el mapa de checkout

38

Creando un Custom Hook para Google Maps

Estrategias de deployment profesional

39

Continuous integration y continuous delivery con GitHub Actions

40

Compra del dominio y despliega con Cloudflare

Optimización de aplicaciones web con React

41

Integración de React Helmet para mejorar el SEO con meta etiquetas

42

Análisis de performance con Google Lighthouse

43

Convierte tu aplicación de React en PWA

Bonus: trabaja con Strapi CMS para crear tu propia API

44

Crea una API con Strapi CMS y consúmela con React.js

¿Qué sigue en tu carrera profesional?

45

Próximos pasos para especializarte en frontend

Curso Profesional de React Hooks

Curso Profesional de React Hooks

Juan David Castro Gallego

Juan David Castro Gallego

Optimización de componentes en React con React.memo

11/45

Lectura

¿En qué piensas cuando debes “optimizar un componente” de tu aplicación en React.js? Anota tu respuesta antes de leer esta clase para un análisis personal más adelante.

...

Regístrate o inicia sesión para leer el resto del contenido.

Aportes 31

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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 💚