Third Party Custom Hooks de Redux y React Router

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);

👀
React Hooks y Redux funcionando juntos

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.