隆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

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

useCallback: evita c谩lculos innecesarios en funciones

10/45
Recursos

Aportes 30

Preguntas 4

Ordenar por:

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

Les recomiendo este articulo, me aclaro algunas dudas que tenia acerca de cuando usar estos hooks, y me dejo un mensaje bastante interesante:

鈥淟as optimizaciones de performance siempre vienen con un costo, y no siempre vienen con un beneficio鈥

When to useMemo and useCallback

Oscar te falto explicar un poco mas sobre este hooks 馃槮 馃槙

Apuntes

  • Cada vez que hacemos un render se vuelve a construir las referencias a las funciones
  • La soluci贸n para este problema es usar useCallback el cual solo genera una referencia para una funci贸n
  • Es decir que memoriza la funcion
  • a trav茅s de la lista de dependencias que mandamos cuando lo generamos, estamos indicando cuando debe volver a memorizar esa funci贸n, es decir cuando cambien esos valores
  • Esto es 煤til cuando se transfieren callbacks a componentes hijos optimizados que dependen de la igualdad de referencia para evitar renders innecesarios
const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

Ideas/conceptos claves

useCallback.- Memoriza una funci贸n

recursos

Referencia de la API de los Hooks - React

Definitivamente falta mucha pedagogia. Platzi debe revisar este tema.

Oscar falta la explicaci贸n de el porque utilizar estos hooks.

Por lo que indague, useCallback guarda una funci贸n en memoria, y useMemo tambi茅n puede guardar una funci贸n pero la diferencia esta en que esta retorna tambi茅n su resultado. Es por eso que useMemo se recomienda para guardar valores y useCallback para guardar funciones

Fuente:

https://medium.com/@jan.hesters/usecallback-vs-usememo-c23ad1dc60

Como feedback deber铆an de poner m谩s atenci贸n en la estructura del curso, realmente no se entendi贸 bien el uso de este Hook o los beneficios de usarlo. Tengo que buscar por fuera qu茅 hace realmente useCallback.

Espero ser el 煤nico que no entendi贸 lo que nos ayuda este hook, as铆 que busqu茅 el porqu茅 del hook y me encontr茅 este video donde lo explica s煤per bien.

Me estan pareciendo un poco vagas sus explicaciones pero estoy satisfecho ya que lo refuerzo con la documentacion o youtube, asi va mi proyecto:

Personalmente pienso que React Js es un mar de complejidad, una librer铆a innecesariamente compleja, tediosa y llena de parches para hacer bien lo que debe hacer e interactuar con otras librer铆as que inyectan complejidad extra a lo que ya de por si es complejo, a diferencia de Angular que es claro en su Arquitectura y limpio en su codificaci贸n.

Siento que falta much铆sima explicaci贸n

Sugerencia: Mejorar explicaci贸n, colocar contextos, situaciones de uso etc.

No s茅 si les pas贸, pero al implementar el useCallback la petici贸n me gener贸 error por CORS, tuve que agregar el header Access-Control-Allow-Origin a la petici贸n (fetch) y ah铆 me funcion贸.

Los t铆tulos de useMemo y useCallback son algo descriptivos con la diferencia entre estos dos y cuando usar uno y cuando usar otro. useMemo se utiliza para guardar en memoria(memoizaci贸n) valores, como componentes y useCallback se utiliza para guardar en memoria funciones que se podr铆an llegar a llamar de nuevo. Los dos hooks necesitan dependencias y estas ser谩n el valor del cual depende su cambio. Como ya estan guardados en memoria a la hora de realizar la navegaci贸n por la p谩gina(entre componentes y funciones) pues se mejora el performance.

Fuentes:

https://medium.com/@jan.hesters/usecallback-vs-usememo-c23ad1dc60
https://www.youtube.com/watch?v=S8h2R71MuZU

Esa manera de ense帽ar platzi :V!!

En re-render peque帽os no es necesario usar useMemo/useCallback, al final es una pueque帽a optimizaci贸n y no lo vale (para sus co-workers se vuelve m谩s complejo y es la misma funci贸n).

Una buena utilizaci贸n ser铆a al ser calculos computacionales extensivos/pesados, o para crear renders de Graphs/BigData.

Las dependencias de los hooks conllevan a muchos bugs la mayor铆a de veces.

En una entrevista de React me preguntaron porque se agrega esta linea: " import React from 鈥榬eact鈥; " a cada archivo que tiene codigo react porque en los componentes funcionales no llamamos a nada que sea React.[algo mas].
Y divague y no lo pude explicar, alguno tiene la respuesta exacta?

Hola, estoy siguiendo este proyecto en Nextjs. Les dejo mi repositorio:

https://github.com/danyel117/platzi-conf-store

Pueden encontrar aqu铆 m谩s informaci贸n sobre useCallback

Este video Midudev explica muy buen cuando es recomendable usar el useCallback, me sirvi贸 bastante: https://youtu.be/duh3uKn0qnU

No me qued贸 muy claro para que sirve useCallback 馃

Muy pobre la explicaci贸n de los hooks, se explica simplemente como funcionan y no el porq o cuando

Aqui otra explicacion mas para enreiquecer esta clase
https://www.youtube.com/watch?v=duh3uKn0qnU

Comparto un video si quieren revisar mas este hook, incluso comparando lo con useMemo, muy interesante:
https://youtu.be/_AyFP5s69N4

TypeError: can鈥檛 define property 鈥渃urrent鈥: Object is not extensible

En caso de que alguno se encuentre con este error al igual que yo. Para solucionarlo se debe de utilizar la propiedad React.forwardRef. Esto hara que la propiedad ref sea valida in un componente de funcion.

const Search = ({ search, handleSearch }, searchInputRef) => {
  return (
    <div className="Search">
      <input
        type="text"
        value={search}
        ref={searchInputRef}
        onChange={handleSearch}
      />
    </div>
  );
};
export default React.forwardRef(Search);

Otro cambio que se debe hacer es cambiar la propiedad searchInputRef (en el video se nombro SearchInput)

      <Search
        search={search}
        handleSearch={handleSearch}
        ref={searchInputRef}
      />

Pueden hacer est谩 comprobaci贸n si les cambia algo utilizar useCallback o useMemo.

const handleSearch = () => {
    console.log('using...')
    setSearch(searchInput.current.value)
 }

Ahora ingresen datos al Search y vean en la consola cuantas veces se realiza el console.

Luego crean la funci贸n con el hook

const handleSearch = React.useCallback(() => {
    console.log('using...')
    setSearch(searchInput.current.value)
 }, [])

Ahora ingresen datos al Search y vean en la consola cuantas veces se realiza el console.

Comparen el n煤mero de logs y de esta forma sencila ven si merece agregar complejidad.

鈥渋mr y slr鈥 te ayudan a escribir mucho mas r谩pido, pero no olvides tener el plugin instalado de ES7 React/Redux/GraphQL/React-Native snippets

Lee un poco sobre esto, tambi茅n se pueden crear sus propios snippets si desean pero es otra cosa

Excelente!!!

useCallback(fn, deps)

es equivaliente a

useMemo(() => fn, deps)

tengo este error, he estado siguiendo todo lo que ha hecho Oscar

  const [search, setSearch] = useState('')
  const searchInput = useRef(null)
...
  const handleSearch = useCallback(() => {
    setSearch(searchInput.current.value)
  }, [])
...
<Search search={search} searchInput={searchInput} handleSearch={handleSearch} />

el error es este: