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.
¡Bienvenida! Este es un curso especial de React Hooks
¿Qué aprenderás en el Curso Profesional de React Hooks?
¿Qué son los React Hooks y cómo cambian el desarrollo con React?
Introducción a React Hooks
useState: estado en componentes creados como funciones
useEffect: olvida el ciclo de vida, ahora piensa en efectos
useContext: la fusión de React Hooks y React Context
useReducer: como useState, pero más escalable
¿Qué es memoization? Programación funcional en JavaScript
useMemo: evita cálculos innecesarios en componentes
useRef: manejo profesional de inputs y formularios
useCallback: evita cálculos innecesarios en funciones
Optimización de componentes en React con React.memo
Custom hooks: abstracción en la lógica de tus componentes
Third Party Custom Hooks de Redux y React Router
Configura un entorno de desarrollo profesional
Proyecto: análisis y retos de Platzi Conf Store
Git Hooks con Husky
Instalación de Webpack y Babel: presets, plugins y loaders
Configuración de Webpack 5 y webpack-dev-server
Configuración de Webpack 5 con loaders y estilos
Loaders de Webpack para Preprocesadores CSS
Flujo de desarrollo seguro y consistente con ESLint y Prettier
Estructura y creación de componentes para Platzi Conf Store
Arquitectura de vistas y componentes con React Router DOM
Maquetación y estilos del home
Maquetación y estilos de la lista de productos
Maquetación y estilos del formulario de checkout
Maquetación y estilos de la información del usuario
Maquetación y estilos del flujo de pago
Integración de íconos y conexión con React Router
Integración de React Hooks en Platzi Conf Merch
Creando nuestro primer custom hook
Implementando useContext en Platzi Conf Merch
useContext en la página de checkout
useRef en la página de checkout
Integrando third party custom hooks en Platzi Conf Merch
Configura mapas y pagos con PayPal y Google Maps
Paso a paso para conectar tu aplicación con la API de PayPal
Integración de pagos con la API de PayPal
Completando la integración de pagos con la API de PayPal
Paso a paso para conectar tu aplicación con la API de Google Maps
Integración de Google Maps en el mapa de checkout
Creando un Custom Hook para Google Maps
Estrategias de deployment profesional
Continuous integration y continuous delivery con GitHub Actions
Compra del dominio y despliega con Cloudflare
Optimización de aplicaciones web con React
Integración de React Helmet para mejorar el SEO con meta etiquetas
Análisis de performance con Google Lighthouse
Convierte tu aplicación de React en PWA
Bonus: trabaja con Strapi CMS para crear tu propia API
Crea una API con Strapi CMS y consúmela con React.js
¿Qué sigue en tu carrera profesional?
Próximos pasos para especializarte en frontend
Juan David Castro Gallego
Lectura
Memoization es una técnica ú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.
...
Regístrate o inicia sesión para leer el resto del contenido.
Aportes 37
Preguntas 3
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.
Que gran articulo, todo muy bien explicado y redactado, ¡¡ Gracias !!
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.
Esto es programación dinámica?
buenisimo el aporte, no se me habia ocurrido realizar de esa forma un fibo. interesante!
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
Brillante!
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
este es el tipo de contenido por el que pago platzi
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
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.
Que buena técnica, efectivamente va a ayudar a gestionar mejor los recursos
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 😦
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?