隆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

Luis Arturo Lira Cerda

Luis Arturo Lira Cerda

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.

React Redux

Seguramente conoces react-redux, aqu铆 podr谩s encontrar dos custom hooks que son muy 煤tiles al momento de usar esta biblioteca: useSelector y useDispatcher. Estos los encontrar谩s a partir de la versi贸n 7.1.0 de la biblioteca y a continuaci贸n te explicar茅 para qu茅 sirven:

  • useSelector: nos permite elegir de qu茅 contenido en nuestro estado queremos leer informaci贸n para usarla en nuestro componente.
// Primero debemos importar el hook desde react-redux
import { useSelector } from 'react-redux';

// El hook recibe una funci贸n y aqu铆 indicamos qu茅 parte del estado queremos
const myProperty= useSelector(state => state.myProperty);
  • useDispatcher: nos permite ejecutar las acciones hacia nuestro estado.
// Importamos el hook
import { useDispatcher} from 'react-redux';

// Creamos una variable donde vivir谩 nuestro dispatcher
const dispatcher = useDispatcher();

// Ahora solo debemos pasarle la informaci贸n de la acci贸n que se ejecutar谩 en nuestro reducer
dispatcher({ type: actionType, payload });

Si quieres aprender a crear un sencillo contador de clics, pero usando esta configuraci贸n de hooks y toda la configuraci贸n de Redux en React, te recomiendo seguir este tutorial: Redux es f谩cil si usas React Hooks.

React Router

React Router tambi茅n contiene diferentes custom hooks para acceder a varias funcionalidades e informaci贸n de la navegaci贸n del usuario en nuestra aplicaci贸n.

  • useHistory: nos permite acceder a los m茅todos de navegaci贸n para movernos a trav茅s de ella de la forma que lo veamos m谩s conveniente. Por ejemplo:
import { useHistory } from 'react-router-dom';
let history = useHistory();
history.push('/home');
  • useLocation: nos permite acceder a la informaci贸n de la URL actual en la que se encuentran nuestros usuarios.
import { useLocation } from 'react-router-dom';
let location = useLocation();
console.log(location.pathname);
  • useParams: nos permite acceder a un objeto con la informaci贸n de los par谩metros que tendremos en la ruta que estamos navegando, por ejemplo, el slug de un blogpost.
import { useParams } from 'react-router-dom';
let { slug } = useParams();
console.log(slug);
  • useRouteMatch: funciona al igual que los componentes <Route>, pero este hook tambi茅n nos permitir谩 saber si existe alg煤n match adicional que podremos usar para mostrar o no otra informaci贸n en la misma vista.
import { useRouteMatch } from 'react-router-dom';
let match = useRouteMatch('/blog/:slug');

return (
	<div>
		<h1>Hello World</h1>
		{match && <p>Route matches</p>}
	</div>
)

Conclusi贸n

Ahora sabes c贸mo utilizar los React Hooks de ambas bibliotecas. Podr谩s darte cuenta de que usarlas nos facilita bastante el desarrollo con React porque, adem谩s de escribir menos c贸digo, lo hace m谩s legible y r谩pido de leer.

Te recomiendo seguir investigando sobre este tema. Tambi茅n te invito a compartir en la secci贸n de comentarios si las bibliotecas que m谩s te gustan en React cuentan con la implementaci贸n de sus funcionalidades en React Hooks.

隆Nunca pares de aprender! 馃挌

Aportes 22

Preguntas 3

Ordenar por:

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

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

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.

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 馃槃

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.

驴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?

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

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

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

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.