Cómo usar React.memo, mejorar el rendimiento y hacer deploy con Vercel de nuestra app de React

Vamos a optimizar nuestra aplicación para evitar re-renders innecesarios gracias al uso del profiler de React y a deployar nuestra app con Vercel.
► SUBSCRÍBETE: https://bit.ly/youtube-frontend

También puedes seguirme en:
► Instagram: https://bit.ly/instagram-frontend
► Twitter: https://bit.ly/twitter-frontend

📹 SEGMENTOS:
00:00 - Bienvenida
02:50 - Presentación de la app
03:30 - ¿Qué son las React Developer Tools e instalación?
06:55 - Cambia el State al vuelo con las React Developer Tools
12:40 - Detectar renders innecesarios con el Highlight y Profiling
16:10 - Extraer componente SearchForm
24:55 - Comprobar que ahora evitamos renders innecesarios
32:43 - Profiling reiniciando la página
35:55 - useCallback para evitar crear funciones en cada render
38:45 - ¿Cómo evitamos renderizados en React?
42:12 - Usando useMemo (no recomendado)
44:35 - Usando React.memo (recomendado)
51:05 - Renderizados por el Infinite Scroll
52:45 - React.memo para solucionar el problema
54:46 - Problemas con objetos y React.memo
01:04:30 - Optimizando React.memo para evitar problemas con objetos
01:06:45 - Pestaña "Performance" de Chrome
01:09:00 - User Timings en React, modo desarrollo
01:19:45 - ¿Qué es Vercel? ¿Cómo funciona?
01:20:55 - Deploy con el CLI de Vercel
01:29:46 - Deploy a producción con Vercel
01:34:30 - Agradecimientos y despedida

También vamos a desplegar nuestra aplicación utilizando Vercel, un servicio gratuito que nos permite conseguir una URL con HTTPS

-~-~~-~~~-~~-~-
¡No te pierdas mi último vídeo! "Variables de entorno con archivos ENV y actualizaciones en tiempo real con Firestore"
https://www.youtube.com/watch?v=8ZA2p1SBssk
-~-~~-~~~-~~-~-