隆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 鈥渙ptimizar 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?

o inicia sesi贸n.

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 鈥渙ptimizar 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 鈥渙ptimizar 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 鈥渁lgo鈥 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 鈥渙ptimizar 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 鈥榲s鈥, 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 鈥渞eactividad鈥 para entender m谩s a fondo c贸mo funciona la librer铆a y el concepto de 鈥渞eactividad鈥 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 鈥渙ptimizar 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 馃挌