¡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

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

16

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

17

Configuración de Webpack 5 con loaders y estilos

18

Loaders de Webpack para Preprocesadores CSS

19

Flujo de desarrollo seguro y consistente con ESLint y Prettier

20

Git Hooks con Husky

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

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

7/45

Lectura

Memoization, o en español memoización (sí, sin r) es una técnica muy útil para evitar cálculos innecesarios en nuestro código. Guardamos el resultado de nuestros cálculos cada vez que los hacemos para no tener que repetirlos en el futuro. En otras palabras, estamos ahorrando grandes cantidades de tiempo a cambio de “mucho” espacio de almacenamiento.

La memoria de JavaScript no es infinita, existe un máximo de funciones y cálculos que podemos hacer. Incluso si no la usamos toda, gastarla excesivamente causará que nuestras aplicaciones corran lento, con mucho lag o sencillamente briden una muy mala experiencia a los usuarios.

Nuestro código puede parecer pequeño cuando utilizamos técnicas de programación funcional como currying y recursividad. Pero no te dejes engañar. Así estemos llamando a la misma función una y otra vez recursivamente, cada cálculo o llamado a esta función genera nuevos “bloques” en la pila de ejecuciones que debe hacer JavaScript. Esto afecta a la memoria de JavaScript y puede estropear nuestra aplicación.

La buena noticia es que muy seguramente no tienes de qué preocuparte. Este “problema” no será realmente un problema a menos que construyas aplicaciones muy, muy grandes (por ejemplo, videojuegos en el navegador) donde la optimización de memoria es vital.

¡Pero tampoco te relajes! Tu responsabilidad como desarrolladora web profesional es siempre prepararte para resolver cualquier problema de programación, incluso si requieren técnicas “avanzadas” de optimización para que nuestro programa funcione a la perfección y para todos nuestros usuarios.

Pongamos esto en práctica con dos buenos ejemplos.

Ejemplo práctico de memoization : calcular el factorial

El factorial de un número es su multiplicación por todos los números anteriores a este hasta llegar al 1. La implementación por defecto de una función factorial utilizando recursividad en JavaScript se vería así:

function factorial(n) {
	if (n === 1) {
		return 1;
	} else {
		return n * factorial(n - 1);
	}
}
Función Factorial en JavaScript con Recursividad

Al calcular el factorial de 5 estamos multiplicando 5 * 4 * 3 * 2 * 1. Y si calculamos el factorial de 10 estamos multiplicando 10 * 9 * 8 * 7 * 6 * 5 * 4 * 3 * 2 * 1. Si te fijas bien, ambos cálculos terminan igual, con las multiplicaciones del 5 hasta el 1. Esto significa que al ejecutar el factorial de 5 y luego el factorial de 10, estamos repitiendo la última parte del cálculo.

Vamos a crear una variable de tipo array que nos permita ir guardando el resultado de todos nuestros cálculos. Luego actualizaremos nuestra función para que antes de hacer los cálculos inspeccionamos nuestra variable para encontrar si el factorial de nuestro número ya fue realizado antes y no debemos volver a hacer el cálculo.

const memo = [];

function memoFactorial(n) {
	if (n === 1) {
		return 1;
	} else if (!memo[n]) {
		memo[n] = n * memoFactorial(n - 1);
	}  
	return memo[n];
}
Función Factorial en JavaScript con Recursividad y Memoización

Segundo ejemplo práctico: la secuencia Fibonacci

La función Fibonacci es una sucesión de números que llega hasta el infinito. Cada nuevo número en la sucesión es la suma del cálculo Fibonacci de los dos números anteriores en la sucesión (que empieza con cero y uno).

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377...
Cálculo Fibonacci

El código en JavaScript para encontrar el número que ocupa X posición en la secuencia Fibonacci utilizando recursividad sería el siguiente:

function fibonacci(n) {
	if (n === 0 || n === 1) {
		return 1;
	} else {
		return fibonacci(n - 1) + fibonacci(n - 2);
	}
}
Función Fibonacci en JavaScript con Recursividad

El cálculo es correcto, el cuarto número en la sucesión Fibonacci es 5. El problema es que estamos repitiendo muchas veces el cálculo de varios números.

Función Fibonacci en JavaScript con Recursividad

Repetimos 5 veces el cálculo de fibonacci(0), 3 veces fibonacci(1) y 2 veces fibonacci(2). Para calcular el fibonacci de 4 puede no ser tan grave, pero mientras más grande sean los números, más cálculos debemos realizar y, por lo tanto, más cálculos estaremos repitiendo.

Para darte una idea, este es nuestro log al calcular fibonacci de 8.

Función Fibonacci en JavaScript con Recursividad

La buena noticia es que utilizando memoization podemos evitar hacer los mismos cálculos una y otra vez. Así como en el ejemplo anterior, vamos a guardar el resultado de cada cálculo Fibonacci en una variable memo, así cuando debamos volver a calcular el Fibonacci de un número, podemos simplemente utilizar el resultado que previamente calculamos.

const memo = [];

function memoFibonacci(n) {
	if (n === 0 || n === 1) {
		return 1;
	} else if (!memo[n]) {
		memo[n] = memoFibonacci(n - 1) + memoFibonacci(n - 2);
	}  
	return memo[n];
}

Ahora el cálculo de memoFibonacci(4) es mucho más corto:

Función Fibonacci en JavaScript con Recursividad y Memoización

Incluso memoFibonnacci de 8 está increíblemente más optimizado que antes, sobre todo si anteriormente hemos calculado algún otro número Fibonacci:

Función Fibonacci en JavaScript con Recursividad y Memoización

Recuerda que solo debemos implementar memoización en funciones puras, es decir, funciones que siempre devuelven el mismo resultado cuando enviamos los mismos argumentos. No implementes memoización en llamados a una API o para trabajar con fechas y horas en JavaScript.

Un breve repaso de la programación funcional

En la Escuela de Desarrollo Web encontrarás muchos cursos para profundizar en cómo funciona JavaScript por dentro y cómo podemos implementar elementos de programación funcional y declarativa en nuestras aplicaciones:

Además, si quieres llevar tu conocimiento de algoritmos al siguiente nivel, te recomiendo tomar la saga de introducción al pensamiento computacional con Python (sí, usamos Python, pero eso no debe ser un impedimento para permitirte crecer profesionalmente):

Ahora tienes todo listo para aplicar memoización en tus proyectos. En las próximas clases aprenderemos a usar la implementación de React para realizar esta optimización con useMemo y useCallback.

Aportes 37

Preguntas 2

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Que gran articulo, todo muy bien explicado y redactado, ¡¡ Gracias !!

Hacen falta mas de estos textos para explicar la teoria antes del video práctico. Si con un video no se logra transmitir claramente la idea.

Excelente artículo C: quizá me equivoco pero creo que la condicional debería ser:

if (n === 1 || n === 0) {
	return n;
}

En lugar de retornar ‘1’ en ambos casos, retornamos ‘n’. Lo cual podría quedar también como:

if (n <= 1) {
	return n;
}

El código final quedaría:

let memo = []

var fibonacci = function(n) {
    if (n <= 1) {
	return n;
    } else if (!memo[n]) {
	memo[n] = fibonacci(n - 1) + fibonacci(n - 2);
    }  

   return memo[n];
}

Porque la secuencia es:
Fib(1) = 1
Fib(2) = 1
Fib(3) = 2
https://es.wikipedia.org/wiki/Sucesi%C3%B3n_de_Fibonacci
Buen día 💚

No implementes memoización en llamados a una API o para trabajar con fechas y horas en JavaScript.

buenisimo el aporte, no se me habia ocurrido realizar de esa forma un fibo. interesante!

Brillante!

este es el tipo de contenido por el que pago platzi

Esto es programación dinámica?

Por si fuera poco, aprendi teoria acerca de programacion funcional
Muchas gracias

Excelente articulo! Muy buena explicación y super útil!!

Excelente articulo, muy bien explicado, me recordó a las clases de estructura de datos de la universidad

Qué excelente! Hoy entendí mejor éste tema de Memoización. De hecho quiero agregar que si alguien no entiende bien, coloque un **debugger** para que pueda seguir un paso a paso de lo que se realiza. Abren herramienta para desarrolladores, van al Tab de Sources y ahí le dan " click a Step into next function call " para ver paso a paso.
Pueden ver como el stack se va llenando de las funciones de fibonacci y así verán bien todo

Excelente

Excelente la forma de ahorrar recursos (procesos), cuando son repetitivos. Aunque se debe tener en cuenta, en algunos casos, la cantidad de memoria que se necesite para guardar los resultados de ciertos procesos.

Muchas Gracias, gran aporte 😄

Muy enriquecedor! ⭐⭐⭐⭐⭐

Excelente aporte

Excelente articulo, muchas gracias.

Wow!!
Excelente articulo para tener en cuenta.

Wow!! Excelente explicación

No sé si a alguien más le pasa, pero a mí el contraste de las letras con el color de fondo me molesta para leer.

En 3 meses de platzi por mucho Juan David Castro es el profe mas comprometido que he visto, siempre con grandes aportes y una excelente actitud.
Gran articulo

Que buena técnica, efectivamente va a ayudar a gestionar mejor los recursos

Les recomiendo este video en donde habla acerca de la programación dinámica y donde se usa la memoización

Me costó entenderlo, así que espero ayudar a entender más fácil memoization:

En memo estamos guardando hasta el número que hemos llegado, Ej: Cuando pasamos memoFactorial(5) hacemos
5x4x3x2 = 120; la variable memo guarda los resultados por partes de la siguiente forma:
//Recordemos que 1 no lo guarda porque toda multiplicación x1 da el mismo resultado
2 = 2
3 = 6 //Multiplica 3 por el resultado anterior
4 = 24 //Multiplica 4 por el resultado anterior
5 = 120 // Multiplica 5 por el resultado anterior

Es decir aunque hagamos memoFactorial(10)
la función ya no tendrá que hacer 5x4x3x2 siempre será igual a 120 simplemente hará 10x9x8x7x6 y el resultado lo multiplicará por el resultado del número 5, para este caso
120

Que pasa si en vez de guardar el ultimo resultado anterior guardamos los ultimos 10 y al ejecutar buscamos el numero mas cercano para continuar desde ahi, o si vemos ejemplo que siempre se usa el 10, que en el valor por default del memo sea el restulado de 10

Este es un artículo muy completo.

Muchas gracias. Buena explicación

Excelente!!!

se entiende la idea ahora veamos la practica.

Gracias

¡Excelente artículo! No entendía mucho sobre memoization, muy buena explicación ¡Gracias!

Excelente!, no conocía este termino, me muestra lo mucho que me falta por aprender, para programar usando las mejores practicas y técnicas.

Excelente Aporte !

Genial Articulo!

muy completo ⭐⭐⭐⭐

No entendí del todo 😦