隆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

Third Party Custom Hooks de Redux y React Router

13/45

Lectura

Los React Hooks cambiaron tanto la forma de hacer nuestro c贸digo para crear aplicaciones que otras herramientas tambi茅n han creado sus propios custom hooks, de forma que podemos usarlos para que nuestro c贸digo sea m谩s legible y f谩cil de mantener.

...

Reg铆strate o inicia sesi贸n para leer el resto del contenido.

Aportes 23

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

En useHooks.com puedes encontrar muchos custom hooks que ha creado la comunidad. 馃槂

Este tema es muy valioso, yo en lo personal uso los hooks de Redux y React Router, pero vamos aclarar unas cosas con Redux. Hay una un peque帽o problema de rendimiento al usar los hooks de Redux a la versi贸n tradicional, ya que useSelector hace una comparacion con la referencia de valor seleccionado, por ende esto va renderizar el componente una ves mas si el valor cambia. Incluso puede renderizar de nuevo aunque los props no cambien.
Esto se podr铆a solucionar con React.memo al componente pero si le铆ste mi comentario en sobre la memoizacion sabr谩s que esto tambi茅n requiere un poco perfomance si es peque帽o el cambio.

https://react-redux.js.org/api/hooks#performance

Genial! Con los Hooks de useSelector y useDispatch ya no es necesario hacer el map del state ni de los actions a las props del componente 馃槃

Por mi parte estoy utilizando una librer铆a que utiliza Hooks para la gesti贸n de querys basadas en GraphQl, esta es la libreria de graphql-react. Puede utilizarse sin el hook de useGraphql o con el. Esta bastante bien, es simple y ligera, aunque a煤n est谩 en desarrollo y por ejemplo a煤n no incluye un m茅todo de suscripci贸n como si hace Apollo. Pero me resulta mucho mas c贸moda de usar que Apollo y por lo que estuve leyendo, esta parte de suscripci贸n es algo que en general todav铆a est谩 en desarrollo para el lenguaje de GraphQl y no est谩 bien optimizado.
Aunque por otra parte, espero que con este curso acabe de entender mejor como funcionan las hooks, ya que suelo romper las normas b谩sicas de hooks cuando invoco a useGraphql. Pero de momento estoy consiguiendo grandes avances.

la libreria Reach Router, muy similar a React Router, tambien nos provee de hooks
Aca la documentacion de sus hooks

useLocation: Retorna la localizacion de cualquier componente


useMatch: Matchea un path con la location, retornando el uri, path y params


useNavigate: Para navegar programaticamente (redireccionamiento)


useParams: Retorna un objeto con los params de la ruta rederizada

驴Los Hooks useSelector y useDispatch remplazar铆an el mapStateToProps, y el mapDispatchToProps?
Ya que con estos, puedo traer mi estado, y disparar actions, no les veo utilidad?

Actualizacion, el hook de useHistory ya no se usa mas. De hecho, si crean una app con React hoy en d铆a, ni siquiera se pueda importar este hook desde react, ahora se usa useNavigate que funciona de la siguiente manera

// importing the hook
import { useNavigate } from "react"

const App = () => {
  // initializing the variable
  const navigate = useNavigate()

  const handleClick = () => {
    navigate("/about")
  }
}

Se suele usar mas con un onClick action, mas que usar anchors, de esa forma, podemos crear un bot贸n como anchor

Solo vengo a colcoar la referencia de Todos los HOOKS de REACT.JS, la pagina oficial de react

Que aporte tan tan util鈥 marcado para volver jajaja. Gracias.

Excelente informaci贸n.

隆Gracias por tu aporte!

el que mas uso es useParams, aunque he tenido algunos detalles con otras librerias que usan omponentes stateful

No os puedo decir lo que me ha ayudado este curso hasta la fecha en los desarrollos del proyecto en la empresa donde trabajo.

Platzi, eres mi ++stackoverflow ++personal y probablemente el de muchos xD.

Gracias a estas clases pude hacer un ticket del trabajo que pens茅 que me tomar铆a 8 horas en 10 minutos, wohooo!

Muy buen art铆culo.
Solo un consejo, si ya tienen una aplicaci贸n mediana o grande con muchos componentes de clase, no traten de cambiar todos a hooks. Construyan con hooks los nuevos componentes demandados. As铆 podr谩n hacer el debug solo de los nuevos components y consolidaran sus conocimientos en la marcha.

Excelente lectura, no sabia que estas librer铆as ten铆an custom hooks para agilizar y mejorar la legibilidad del c贸digo, muchas gracias!

隆Nunca pares de aprender! 馃挌

Hola a todos, en mi experiencia trabajando con react redux y hooks al utilizar un combine reducers y hacer la siguiente implementaci贸n鈥

// El hook recibe una funci贸n y aqu铆 indicamos qu茅 parte del estado queremos
const myProperty= useSelector(state => state.myProperty);

Como se sugiere en el articulo, hay que tener cuidado porque eso nos va a generar problemas de renderizaci贸n por que useSelector se quedara escuchando siempre a este reducer y generara un render infinito, pude darme cuenta por un formulario pues uno de los componentes perd铆a el foco y era por este peque帽o detalle.

as铆 que consejo siempre apunten al reducer especifico que desean usar

const myProperty= useSelector(state => state.userReducer.user);

Ojito 馃憖 es useDispatch() (no Dispatcher) 馃槄

e presentado dos errores en una apliacion en #React.
Ya tengo toda la logica y funciona bien, pero:
1.- La pagina la tengo con un home, que inicia cuando la pagina esta en la raiz ( / ), pero me renderiza por primera vez en otro componente, alguien sabe como puedo ponerlo por defecto el componente raiz para la primera carga.
2.- Si recargo el navegador, y no estoy en la raiz del sitio (aunque el componente exista) me arroja un 404, como si la direcci贸n no existiera, si alguien sabe que podr铆a estar pasando agradecer铆a su consejo

Gracias !

Antes de leer este post ten铆a en la mente que los Hooks desplazaban a Redux鈥 Pero bueno no es as铆 y es genial!! Excelente aporte.