Platzi
Platzi

LA EDUCACIÓN ES UN REGALO ¡ACCEDE AL PRECIO ESPECIAL!

Antes:$249
$149
Currency
Antes:$249
Ahorras:$100
COMIENZA AHORA
32

Los 5 mejores Custom Hooks en React.js: Reutiliza tu Código de Manera Inteligente

37688Puntos

hace 21 días

Curso de Introducción a React.js
Curso de Introducción a React.js

Curso de Introducción a React.js

¡Aprende React.js, la librería más popular de JavaScript para crear aplicaciones web interactivas! Trabaja con componentes, propiedades, estado y efectos. Almacena tu información en Local Storage, implementa React Context para comunicar componentes y teletransporta componentes con React Portals. Crea tu primer proyecto web con React junto a tu profesor JuanDC.

Los React Hooks llegaron en la versión 16.8 y han traído un montón de ventajas para trabajar de una forma mucho más cómoda. En particular porque ahora tenemos una alternativa a los class components, la cual son los functional components para manejar el estado y cambios en nuestra aplicación de una forma más fácil.

Uno de sus efectos colaterales es que abrieron un mundo de posibilidades, ya que podemos abstraer la lógica de nuestros componentes creando tus propios custom hooks.

Para dejar bien en claro que son, la propia documentación de React los define de la siguiente forma:

Un Hook personalizado es una función de JavaScript cuyo nombre comienza con ”use” y que puede llamar a otros Hooks

Algo que me gustaría compartir con todo aquel que este interesado en este tema, es una colección de custom hooks que les pueden servir en sus proyectos profesionales

Cómo y cuándo crear tus propios custom hooks

La mayoría de veces los protagonistas serán los hooks de estado y efecto, aunque puedes incluir otros si así lo necesitas.

Teniendo en cuenta lo anterior, puedes empezar a analizar cuándo es que realmente requieres crear un custom hook. Un ejemplo que puede pasar desapercibido cuando estás desarrollando es el siempre repetir código para consumir una API en dos o más componentes de tus aplicaciones, estas son esas áreas de oportunidad para mejorar tu código con esta práctica.

En lugar de tener 2 componentes con la siguiente estructura:

// ./components/Characters.jsximport React, { useState, useEffect } from'react'exportconst PrincipalCharacters = () => {
  const [data, setData] = useState([])
  
  useEffect(() => {
    fetch("https://example.com/api/principal")
      .then(data => data.json())
      .then(json => setData(json))
  }, [])
  
  return (
    <div>
     ...
    </div>
  )
}

exportconst ExtraCharacters = () => {
  const [data, setData] = useState([])
  
  useEffect(() => {
    fetch("https://example.com/api/extra")
      .then(data => data.json())
      .then(json => setData(json))
  }, [])
  
  return (
    <div>
     ...
    </div>
  )
}

Podrías crear un custom hook cuya función solo sea el consumir la API proveída, devolver un objeto con la data extraída y un estado que indique si se está cargando o no (para mostrar un componente que le indique al usuario esta acción si es el caso).

// ./hooks/usApi.jsimport React, {useState, useEffect} from'react'// Recuerda siempre usar la palabra "use" al principio de cada custom hookexportconst useApi = (API) => {
  const [loading, setLoading] = useState(false)
	const [data, setData] = useState()  
	
	useEffect(() => {
	  setLoading(true)
	  fetch(API)
	    .then(data => data.json())
	    .then(json => {
	      setData(json)
	      setLoading(false)
	    })
	 
	}, [])

  return {loading, data}
}

De esta forma se reduce una considerable cantidad de líneas de código en ambos componentes:

// ./components/Characters.jsximport React from'react'import { useApi } from'@hooks/useApi.js'exportconst PrincipalCharacters = () => {
  const {loading, data} = useApi("https://example.com/api/principal")  
  
  return (
    <div>
     ...
    </div>
  )
}

exportconst ExtraCharacters = () => {
  const {loading, data} = useApi("https://example.com/api/extra")

  return (
    <div>
     ...
    </div>
  )
}

¿Ves lo limpio que quedan los componentes abstrayendo la lógica repetitiva?

💡 Tip:
No hay una regla establecida sobre cuantos parámetros pasar a un custom hook, por lo que puedes encontrarte con algunos que solo devuelvan valores tal como sería el caso de useGeolocation que se ve aquí abajo.

5 custom hooks que salvan vidas

useGeolocation

Este hook, a diferencia de los siguientes, puedes optar por no usar el objeto de configuración y llamarlo para obtener los valores de position y error.

Usa este hook cuando necesites obtener la ubicación de tus usuarios usando la API de localización (recuerda que aún puedes mejorarlo haciendo un par de validaciones).

import { useEffect, useState } from'react';

functionuseGeolocation(options) {
	const [position, setPosition] = useState();
	const [error, setError] = useState();
	
	useEffect(() => {
		let canceled = false;
		navigator.geolocation.getCurrentPosition(
			(position) => {
				if (!canceled) {
					setPosition(position);
				}
			},
			(error) => {
			if (!canceled) {
				setError(error);
			}
		},
		options
	);
	
	return () => {
		canceled = true;
		};
	}, [options]);
	
	return [position, error];
}

useUpdate

Cuando desarrollas con React, lo más común es dejarle el trabajo de decidir cuándo sí y cuándo no hacer un re-render de nuestros componentes. Este hook ayuda a forzar un re-render de forma manual cuando es llamado.

import { useReducer } from'react';

const updateReducer = (num) => (num + 1) % 1_000_000;

functionuseUpdate(){
  const [, update] = useReducer(updateReducer, 0);
  return update;
}

useLocalStorage

Ya vimos como JuanDC en el curso de Introducción a React.js nos dio una cátedra de cómo abstraer lógica para crear este hook, así queno podría quedar fuera de esta serie de recomendaciones:

import React, { useState } from'react'functionuseLocalStorage(itemName, initialValue){ 
	const localStorageItem = localStorage.getItem(itemName); 
	let parsedItem; 
	
	if (!localStorageItem) { 
		localStorage.setItem(itemName, JSON.stringify(initialValue)); 
		parsedItem = initialValue; 
	} else { 
		parsedItem = JSON.parse(localStorageItem); 
	}
	 
	const [item, setItem] = useState(parsedItem); 
	
	const saveItem = (newItem) => { 
	  const stringifiedItem = JSON.stringify(newItem);
	  localStorage.setItem(itemName, stringifiedItem); 
          setItem(newItem); 
   };
    
   return [ item, saveItem ]; 
 }

useIntersectionObserver

Dentro del navegador existen múltiples API’s y una de las que a mi parecer es de las más interesantes es la del intersectionObserver, cuya funcionalidad es notificar cuando un elemento está dentro o fuera de la pantalla. Este hook ayuda a emplearlo de manera sencilla, pasándole la referencia de nuestro elemento y un objeto de configuración propio del intersectionObserver de manera opcional.

import { useEffect, useState } from'react';

functionuseIntersectionObserver(target, options) {
	const [entries, setEntries] = useState([]);
	
	useEffect(() => {
		const observer = new IntersectionObserver(
		  entries => setEntries(entries),
		  options
		);
		observer.observe(target.current);
		return () => {
			observer.unobserve(target.current);
		};
		}, [options, target]
	);
	return entries;
}

useDocumentTitle

Es bien sabido que las SPA no tienen un gran SEO, por lo que debes apoyarte de dependencias como React helmet para mejorar este aspecto, aunque este hook no lo reemplaza, es de gran ayuda cuando no es de tanta importancia pero tienes la intención de mostrarle al usuario que cambió de vista con esta ligera actualización en el document title

import React, { useRef, useEffect } from'react';

functionuseDocumentTitle(title, retainOnUnmount = false) {
  const defaultTitle = useRef(document.title);
  
  useEffect(() => {
    document.title = title;
  }, [title]);
  
  useEffect(() => {
    return () => {
      if (!retainOnUnmount) {
        document.title = defaultTitle.current;
      }
    };
  }, []);
}

¿No es más fácil usar solo JavaScript?🤔

Recuerda que React tiene un ciclo de vida, el cual lo hace poder ser “reactivo” y responder a los cambios que existen dentro de tus aplicaciones. No puedes simplemente alterar el valor de tus variables en cualquier lugar de tu código, sino que debes notificárselo a React mediante el hook de efecto y estado.

Si tienes alguna duda más, puedes dejarla aquí abajo en la sección de comentarios y trataré de responderte lo más rápido posible.

Dentro de Platzi hay una gran cantidad de contenido referente a este framework, aquí tienes una gran saga de cursos que te ayudarán a convertirte en un maestro o maestra Jedi con React:

¿Te animas a hacerlos? 👀

#NuncaParesDeAprender

Curso de Introducción a React.js
Curso de Introducción a React.js

Curso de Introducción a React.js

¡Aprende React.js, la librería más popular de JavaScript para crear aplicaciones web interactivas! Trabaja con componentes, propiedades, estado y efectos. Almacena tu información en Local Storage, implementa React Context para comunicar componentes y teletransporta componentes con React Portals. Crea tu primer proyecto web con React junto a tu profesor JuanDC.
Leonardo de los angeles
Leonardo de los angeles
LeoCode0

37688Puntos

hace 21 días

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
4
2380Puntos

Muy útiles todos, me parece más divertido React desde que apostó por los functional components y los hooks.

2
37688Puntos
21 días

Concuerdo! hicieron que React fuera más fácil de aprender y abrieron un mundo de posibilidades

3
21716Puntos

Muy buena, yo agregaria otro customHook para medir el tamaño de pantalla y poder hacer optimizaciones desde JS y no hacerlo todo con CSS

2
37688Puntos
21 días

Súper interesante la propuesta, aunque siento que sería dejarle mucho trabajo a JS. Pero podríamos comparar que tanto mejoran nuestras SPA manejándolo con un custom hook o con css puro

3
12280Puntos

Los hooks son lo mejor de React 😍

2
37688Puntos
21 días

Y nos dejan la puerta abierta para hacer un montón de combinaciones!

Vamos a ver que trae de nuevo la siguiente versión 👀