{"id":3025,"date":"2021-10-25T12:41:38","date_gmt":"2021-10-25T17:41:38","guid":{"rendered":"https:\/\/www.pensemosweb.com\/?p=3025"},"modified":"2024-04-02T17:29:40","modified_gmt":"2024-04-02T23:29:40","slug":"useeffect-react-hooks-personalizados","status":"publish","type":"post","link":"https:\/\/pensemosweb.com\/en\/useeffect-react-hooks-personalizados\/","title":{"rendered":"Custom React Hooks with useEffect"},"content":{"rendered":"

Ya se explic\u00f3 como usar useEffect<\/strong> in esta<\/a> publicaci\u00f3n<\/a>, sin embargo a\u00fan queda una variante muy importante que de hecho es la variante m\u00e1s compleja, por esta raz\u00f3n merece ser parte de este contenido. <\/p>\n\n\n\n

Inicialmente crearemos un ejemplo con esta forma de useEffect<\/strong>, la cual tendr\u00e1 una funci\u00f3n de retorno que sirve para hacer limpieza, llamaremos limpieza<\/strong> a esta funci\u00f3n a lo largo de todo el contenido. Adicionalmente, crearemos dos React hooks personalizados para extraer la funcionalidad de la variante limpieza en piezas m\u00e1s peque\u00f1as.<\/p>\n\n\n\n

Como recordatorio, useEffect<\/strong> nos permite ejecutar y controlar efectos colaterales, como pueden ser peticiones a servicios, subscribirse a eventos, modificar el DOM o cualquier funcionalidad de manera imperativa.<\/p>\n\n\n\n

Recordando el flujo de useEffect(effectFn, [deps])<\/h2>\n\n\n\n

Primero, la funci\u00f3n effecFn<\/strong> (el primer par\u00e1metro que recibe useEffect) se ejecuta despu\u00e9s de que el navegador ya ha pintado el componente en pantalla por primera vez (montar<\/strong>). Segundo, la funci\u00f3n effectFn<\/strong> se ejecuta despu\u00e9s de cada posterior repintado (actualizar<\/strong>). Estos dos comportamientos descritos tienen el mismo prop\u00f3sito que los m\u00e9todos componentDidMount<\/strong><\/code> and componentDidUpdate<\/strong><\/code>.<\/p>\n\n\n\n

El tercer prop\u00f3sito en useEffect se le llama limpieza<\/strong>, el cual lo podemos comparar con componentDidUnmount<\/strong><\/code>. En el primer pintado (montar<\/strong>) la funci\u00f3n de limpieza no se ejecuta, solo se ejecuta en la fase de actualizar<\/strong>. Esto se debe a que la funci\u00f3n limpieza<\/strong>, en realidad no existe a\u00fan en el primer pintado porque es el valor de retorno de effectFn<\/strong>.<\/p>\n\n\n\n

El flujo de useEffect<\/strong> se representa en la imagen de abajo. Modificado de este original<\/a>.<\/p>\n\n\n\n

\"Flujo
Flujo useEffect<\/figcaption><\/figure>\n\n\n\n

Haciendo una petici\u00f3n a un servicio con useEffect(effectFn, [deps])<\/h2>\n\n\n\n

En un proyecto nuevo de codesandbox.io<\/a>, crea el archivo OldNewsPapers.js<\/strong>. Lo que se busca con este componente es hacer peticiones a un servicio, donde podemos buscar informaci\u00f3n sobre peri\u00f3dicos antiguos de USA. <\/p>\n\n\n\n

\n

En resumen, la funcionalidad de este ejemplo es que en el campo de b\u00fasqueda el usuario escriba alg\u00fan texto relacionado, cuando el usuario se detenga de escribir por un tiempo mayor al definido, entonces es cuando se dispara la petici\u00f3n.<\/p>\n<\/blockquote>\n\n\n\n

Primero vamos a hacer solo la petici\u00f3n sin preocuparnos del tiempo definido de espera para ejectuarla.<\/p>\n\n\n\n

<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
import<\/span> <\/span>{<\/span> <\/span>useEffect<\/span>,<\/span> <\/span>useState<\/span> <\/span>}<\/span> <\/span>from<\/span> <\/span>"<\/span>react<\/span>"<\/span>;<\/span><\/span>\nexport<\/span> <\/span>default<\/span> <\/span>functions<\/span> <\/span>OldNewsPapers<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>const<\/span> <\/span>[<\/span>query<\/span>,<\/span> <\/span>setQuery<\/span>]<\/span> <\/span>=<\/span> <\/span>useState<\/span>(<\/span>""<\/span>)<\/span>;<\/span><\/span>\n  <\/span>const<\/span> <\/span>[<\/span>newsPaperNumber<\/span>,<\/span> <\/span>setNewsPaperNumber<\/span>]<\/span> <\/span>=<\/span> <\/span>useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span><\/span>\n  <\/span>useEffect<\/span>(<\/span>()<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n    <\/span>if<\/span> (<\/span>query<\/span>) <\/span>{<\/span><\/span>\n      <\/span>console<\/span>.<\/span>log<\/span>(<\/span>"<\/span>fetch -> <\/span>"<\/span>,<\/span> <\/span>query<\/span>)<\/span>;<\/span><\/span>\n      <\/span>fetchOldNewsPapers<\/span>()<\/span>;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n    <\/span>async<\/span> <\/span>functions<\/span> <\/span>fetchOldNewsPapers<\/span>()<\/span> <\/span>{<\/span><\/span>\n      <\/span>const<\/span> <\/span>response<\/span> <\/span>=<\/span> <\/span>await<\/span> <\/span>fetch<\/span>(<\/span><\/span>\n        <\/span>`<\/span>https:\/\/chroniclingamerica.loc.gov\/search\/pages\/results\/?andtext=<\/span>${<\/span>query<\/span>}<\/span>&format=json<\/span>`<\/span><\/span>\n      )<\/span>;<\/span><\/span>\n      <\/span>const<\/span> <\/span>json<\/span> <\/span>=<\/span> <\/span>await<\/span> <\/span>response<\/span>.<\/span>json<\/span>()<\/span>;<\/span><\/span>\n      <\/span>setNewsPaperNumber<\/span>(<\/span>json<\/span>.<\/span>totalItems<\/span>)<\/span>;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n  <\/span>},<\/span> [<\/span>query<\/span>])<\/span>;<\/span><\/span>\n  <\/span>return<\/span> (<\/span><\/span>\n    <\/span><><\/span><\/span>\n      <\/span><<\/span>h1<\/span>><\/span>Peri\u00f3dicos viejos que contienen <\/span>{<\/span>query<\/span>}<\/<\/span>h1<\/span>><\/span><\/span>\n      <\/span><<\/span>form<\/span>><\/span><\/span>\n        <\/span><<\/span>input<\/span><\/span>\n          <\/span>type<\/span>=<\/span>"<\/span>text<\/span>"<\/span><\/span>\n          <\/span>value<\/span>={<\/span>query<\/span>}<\/span><\/span>\n          <\/span>onChange<\/span>={(<\/span>and<\/span>)<\/span> <\/span>=><\/span> <\/span>setQuery<\/span>(e<\/span>.<\/span>target<\/span>.<\/span>value)<\/span>}<\/span><\/span>\n        \/><\/span><\/span>\n      <\/span><\/<\/span>form<\/span>><\/span><\/span>\n      <\/span><<\/span>section<\/span>>{<\/span>newsPaperNumber<\/span>}<\/<\/span>section<\/span>><\/span><\/span>\n    <\/span><\/><\/span><\/span>\n  )<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
\"useEffect
useEffect usando fetch<\/figcaption><\/figure>\n\n\n\n
Al instante que el usuario empieza a escribir “texas”, se actualiza el estado de query<\/code><\/strong> provocando un \u201crepintado\u201d<\/strong> y se ejecuta la funci\u00f3n effecFn<\/strong> por cada letra que se inserte.<\/p>\n\n\n\n
Desafortunadamente hacer peticiones a un servicio cada vez que escribimos una letra no es un buen funcionamiento, es mejor solo hacer la petici\u00f3n cuando el usuario deja de escribir, tal como se plante\u00f3 al principio, asi que vamos a implementar esta mejor soluci\u00f3n en la siguiente secci\u00f3n.<\/p>\n\n\n\n
useEffect(() => { return function limpieza(){}; }, [deps])<\/h2>\n\n\n\n
Comentamos previamente que esta funci\u00f3n de limpieza se ejecuta solamente en los \u201crepintados\u201d<\/strong>, en el primer pintado no se ejecuta porque la funci\u00f3n limpieza<\/strong> es el valor de retorno de la funci\u00f3n effectFn<\/strong>.  En el pintado n\u00famero uno la funci\u00f3n limpieza<\/strong> a\u00fan no existe.<\/p>\n\n\n\n
Example<\/h3>\n\n\n\n
Para hacer la petici\u00f3n al servicio cuando el usuario deje de escribir, vamos a utilizar un temporizador, este temporizador estar\u00e1 cre\u00e1ndose y limpi\u00e1ndose despu\u00e9s de cada repintado. Cuando el usuario se detenga de escribir y pase el tiempo definido en el temporizador, ah\u00ed es donde haremos la petici\u00f3n al servicio.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
import<\/span> <\/span>{<\/span> <\/span>useEffect<\/span>,<\/span> <\/span>useState<\/span> <\/span>}<\/span> <\/span>from<\/span> <\/span>"<\/span>react<\/span>"<\/span>;<\/span><\/span>\nexport<\/span> <\/span>default<\/span> <\/span>functions<\/span> <\/span>OldNewsPapers<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>const<\/span> <\/span>[<\/span>query<\/span>,<\/span> <\/span>setQuery<\/span>]<\/span> <\/span>=<\/span> <\/span>useState<\/span>(<\/span>""<\/span>)<\/span>;<\/span><\/span>\n  <\/span>const<\/span> <\/span>[<\/span>newsPaperCount<\/span>,<\/span> <\/span>setNewsPaperCount<\/span>]<\/span> <\/span>=<\/span> <\/span>useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span><\/span>\n  <\/span>const<\/span> <\/span>[<\/span>isTyping<\/span>,<\/span> <\/span>setIsTyping<\/span>]<\/span> <\/span>=<\/span> <\/span>useState<\/span>(<\/span>false<\/span>)<\/span>;<\/span><\/span>\n  <\/span>useEffect<\/span>(<\/span>()<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n    <\/span>console<\/span>.<\/span>log<\/span>(<\/span>"<\/span>funci\u00f3n effectFn<\/span>"<\/span>)<\/span>;<\/span><\/span>\n    <\/span>if<\/span> (<\/span>query<\/span> <\/span>&&<\/span> <\/span>!<\/span>isTyping<\/span>) <\/span>{<\/span><\/span>\n      <\/span>console<\/span>.<\/span>log<\/span>(<\/span>"<\/span>  fetch--><\/span>"<\/span>,<\/span> <\/span>query<\/span>)<\/span>;<\/span><\/span>\n      <\/span>fetchOldNewsPaperTitles<\/span>()<\/span>;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n    <\/span>async<\/span> <\/span>functions<\/span> <\/span>fetchOldNewsPaperTitles<\/span>()<\/span> <\/span>{<\/span><\/span>\n      <\/span>const<\/span> <\/span>response<\/span> <\/span>=<\/span> <\/span>await<\/span> <\/span>fetch<\/span>(<\/span><\/span>\n        <\/span>`<\/span>https:\/\/chroniclingamerica.loc.gov\/search\/pages\/results\/?andtext=<\/span>${<\/span>query<\/span>}<\/span>&format=json<\/span>`<\/span><\/span>\n      )<\/span>;<\/span><\/span>\n      <\/span>const<\/span> <\/span>json<\/span> <\/span>=<\/span> <\/span>await<\/span> <\/span>response<\/span>.<\/span>json<\/span>()<\/span>;<\/span><\/span>\n      <\/span>setNewsPaperCount<\/span>(<\/span>json<\/span>.<\/span>totalItems<\/span>)<\/span>;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n    <\/span>let<\/span> <\/span>timeoutId<\/span>;<\/span><\/span>\n    <\/span>if<\/span> (<\/span>isTyping<\/span>) <\/span>{<\/span><\/span>\n      <\/span>timeoutId<\/span> <\/span>=<\/span> <\/span>setTimeout<\/span>(<\/span>()<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n        <\/span>console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>  setIsTyping(false), provoca otro "re-pintado"<\/span>'<\/span>)<\/span>;<\/span><\/span>\n        <\/span>setIsTyping<\/span>(<\/span>false<\/span>)<\/span>;<\/span><\/span>\n      <\/span>},<\/span> <\/span>1000<\/span>)<\/span>;<\/span><\/span>\n      <\/span>console<\/span>.<\/span>log<\/span>(<\/span>"<\/span>  timeout<\/span>"<\/span>,<\/span> <\/span>timeoutId<\/span>)<\/span>;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n    <\/span>return<\/span> <\/span>()<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n      <\/span>console<\/span>.<\/span>log<\/span>(<\/span>"<\/span>----------re-pintado--------------<\/span>"<\/span>)<\/span>;<\/span><\/span>\n      <\/span>console<\/span>.<\/span>log<\/span>(<\/span>"<\/span>funci\u00f3n limpieza<\/span>"<\/span>)<\/span>;<\/span><\/span>\n      <\/span>if<\/span> (<\/span>timeoutId<\/span>) <\/span>{<\/span><\/span>\n        <\/span>clearTimeout<\/span>(<\/span>timeoutId<\/span>)<\/span>;<\/span><\/span>\n        <\/span>console<\/span>.<\/span>log<\/span>(<\/span>"<\/span>  clearTimeout<\/span>"<\/span>,<\/span> <\/span>timeoutId<\/span>)<\/span>;<\/span><\/span>\n      <\/span>}<\/span><\/span>\n    <\/span>};<\/span><\/span>\n  <\/span>},<\/span> [<\/span>query<\/span>,<\/span> <\/span>isTyping<\/span>])<\/span>;<\/span><\/span>\n  <\/span>return<\/span> (<\/span><\/span>\n    <\/span><><\/span><\/span>\n      <\/span><<\/span>h1<\/span>><\/span>Peri\u00f3dicos viejos que contienen <\/span>{<\/span>query<\/span>}<\/<\/span>h1<\/span>><\/span><\/span>\n      <\/span><<\/span>form<\/span>><\/span><\/span>\n        <\/span><<\/span>input<\/span><\/span>\n          <\/span>type<\/span>=<\/span>"<\/span>text<\/span>"<\/span><\/span>\n          <\/span>value<\/span>={<\/span>query<\/span>}<\/span><\/span>\n          <\/span>onChange<\/span>={(<\/span>and<\/span>)<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n            <\/span>setIsTyping<\/span>(<\/span>true<\/span>)<\/span>;<\/span><\/span>\n            <\/span>setQuery<\/span>(<\/span>and<\/span>.<\/span>target<\/span>.<\/span>value<\/span>)<\/span>;<\/span><\/span>\n            <\/span>console<\/span>.<\/span>log<\/span>(<\/span><\/span>\n              <\/span>`<\/span>onChange: setIsTyping(true) y setQuery(<\/span>${<\/span>and<\/span>.<\/span>target<\/span>.<\/span>value<\/span>}<\/span>)<\/span>`<\/span><\/span>\n            )<\/span>;<\/span><\/span>\n          <\/span>}}<\/span><\/span>\n        \/><\/span><\/span>\n      <\/span><\/<\/span>form<\/span>><\/span><\/span>\n      <\/span><<\/span>section<\/span>>{<\/span>newsPaperCount<\/span>}<\/<\/span>section<\/span>><\/span><\/span>\n    <\/span><\/><\/span><\/span>\n  )<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
\"useEffect
useEffect con limpieza<\/figcaption><\/figure>\n\n\n\n
Explicaci\u00f3n de flujo<\/h3>\n\n\n\n
Despu\u00e9s del primer \u201cpintado\u201d <\/strong>se ejecuta effectFn<\/strong>, luego cuando el usuario empieza a escribir \u201ctexas”<\/strong> provoca un “repintado”<\/strong>, lo anterior sucede por cada letra insertada debido al evento onChange<\/strong><\/code> que actualiza el estado de query<\/strong><\/code>. <\/p>\n\n\n\n
Posterior a cada repintado se ejecuta primero la funci\u00f3n limpieza<\/strong>, eliminando el temporizador, luego la funci\u00f3n effectFn<\/strong> volviendo a activar un temporizador y retornando una nueva funci\u00f3n limpieza.<\/p>\n\n\n\n
Cuando el usuario deja de escribir, la funci\u00f3n callback<\/strong> del setTimeout<\/strong> se ejecuta, provocando la actualizaci\u00f3n del estado isTyping<\/strong> to false<\/code><\/strong>. Lo anterior causa otro repintado<\/strong> adicional, teniendo a isTyping<\/code><\/strong> equal to false<\/code> <\/strong>and query<\/code><\/strong> equal to \u201ctexas\u201d<\/code><\/strong>, siendo las condiciones (query && !isTyping<\/code>) necesarias para realizar una petici\u00f3n. En el momento que el resultado de la petici\u00f3n est\u00e1 listo, se actualiza setNewsPaperCount<\/strong><\/code> con el n\u00famero de peri\u00f3dicos antiguos que contiene la palabra “texas”<\/strong>. La actualizaci\u00f3n de setNewsPaperCount<\/code><\/strong> provoca un \u00faltimo repintado<\/strong>, solo que en este \u00faltimo repintado<\/strong> no se ejecuta la funci\u00f3n limpieza<\/strong> ni effectFn<\/strong> porque query<\/strong><\/code> and isTyping<\/strong>,<\/code> las dependencias de nuestro useEffect<\/strong>, permanecen sin cambiar.<\/p>\n\n\n\n
React Hooks personalizados<\/h2>\n\n\n\n
Las funciones son la unida esencial para la organizaci\u00f3n y reutilizaci\u00f3n de c\u00f3digo, ya sea solo para separar las responsabilidades de cada funci\u00f3n y\/o para encapsular c\u00f3digo\/funcionalidad reutilizable. Los React Hooks perzonalizados, al ser funciones tambi\u00e9n tienen esta habilidad de organizaci\u00f3n y reutilizaci\u00f3n.<\/p>\n\n\n\n
Vamos a extraer funciones de nuestro ejemplo anterior con la finalidad de hacer m\u00e1s f\u00e1cil de leer el c\u00f3digo, lo primero que podemos ver es que dentro del useEffect<\/strong>, tenemos un c\u00f3digo que realiza una petici\u00f3n usando el API de fetch y otro para llevar el control del temporizador. Tal vez valga la pena separarlos, a estas funciones separadas se les llama React hooks personalizados<\/strong> porque la separaci\u00f3n se realiza en forma de Hooks<\/p>\n\n\n\n
React Hook personalizado useCanContinueTimeout(trigger, waitTime)<\/h3>\n\n\n\n
Empezamos con el c\u00f3digo del temporizador. Aqu\u00ed est\u00e1 el c\u00f3digo extra\u00eddo, bueno, con algunas modificaciones para poder ser reutilizado.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
functions<\/span> <\/span>useCanContinueTimeout<\/span>(<\/span>trigger<\/span>,<\/span> <\/span>waitTime<\/span>)<\/span> <\/span>{<\/span><\/span>\n  <\/span>const<\/span> <\/span>[<\/span>canContinue<\/span>,<\/span> <\/span>setCanContinue<\/span>]<\/span> <\/span>=<\/span> <\/span>useState<\/span>(<\/span>false<\/span>)<\/span>;<\/span><\/span>\n  <\/span>useEffect<\/span>(<\/span>()<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n    <\/span>let<\/span> <\/span>timeoutId<\/span>;<\/span><\/span>\n    <\/span>if<\/span> (<\/span>canContinue<\/span>) <\/span>{<\/span><\/span>\n      <\/span>timeoutId<\/span> <\/span>=<\/span> <\/span>setTimeout<\/span>(<\/span>()<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n        <\/span>setCanContinue<\/span>(<\/span>false<\/span>)<\/span>;<\/span><\/span>\n      <\/span>},<\/span> <\/span>waitTime<\/span>)<\/span>;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n    <\/span>return<\/span> <\/span>()<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n      <\/span>clearTimeout<\/span>(<\/span>timeoutId<\/span>)<\/span>;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n  <\/span>},<\/span> [<\/span>trigger<\/span>,<\/span> <\/span>canContinue<\/span>])<\/span>;<\/span><\/span>\n  <\/span>return<\/span> [<\/span>canContinue<\/span>,<\/span> <\/span>setCanContinue<\/span>]<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Lo que hacemos en realidad es pasar tal cual el c\u00f3digo que queremos separar, y luego cambiar los nombres de los identificadores para mejorar su lectura y entendimiento.<\/p>\n\n\n\n
Explicaci\u00f3n del Reack hook personalizado useCanContinueTimeout<\/h3>\n\n\n\n
Este React Hook personalizado, puede ser utilizando en cualquier campo de b\u00fasqueda donde se quiera realizar una acci\u00f3n despu\u00e9s de que el usuario deja de escribir por un tiempo determinado. Recibe dos par\u00e1metros, un valor que es el trigger<\/strong><\/code> o disparador principal del efecto. Y otro valor que indica el tiempo del temporizador (waitTime<\/code><\/strong>), si no se limpia y se crea otro temporizador, canContinue<\/code><\/strong> es actualizado a false<\/code> indicando que la acci\u00f3n de escribir dejo de suceder durante el tiempo indicado por waitTime<\/strong>.<\/p>\n\n\n\n
El estado interno canContinue<\/strong><\/code> condiciona si puede seguir creando temporizadores o no, si es false<\/strong> ya no puede crear temporizadores, porque la acci\u00f3n de escribir dejo de suceder y si es true<\/strong> indica que el usuario est\u00e1 escribiendo. Se expone este estado canContinue<\/strong> al exterior regresando un par de valores tal cual lo hace useState<\/code> para su manejo.<\/p>\n\n\n\n
La raz\u00f3n por la que se expone al exterior canContinue<\/strong><\/code> es porque es m\u00e1s flexible que desde donde se use este hook se pueda definir inmediatamente en que momento puede seguir creando temporizadores o no. <\/p>\n\n\n\n
En el caso particular del ejemplo solo le interesa indicarle que si puede continuar creando temporizadores mientras el usuario siga escribiendo dentro del campo de b\u00fasqueda.<\/p>\n\n\n\n
\u00bfC\u00f3mo se puede usar el react hook personalizado useCanContinueTimeout?<\/h3>\n\n\n\n
Este Hooks se puede usar de la siguiente forma con el ejemplo que hemos estado trabajando.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
const<\/span> WAIT_TIME <\/span>=<\/span> <\/span>1000<\/span>;<\/span><\/span>\nexport<\/span> <\/span>default<\/span> <\/span>functions<\/span> <\/span>OldNewsPapers<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>const<\/span> <\/span>[<\/span>query<\/span>,<\/span> <\/span>setQuery<\/span>]<\/span> <\/span>=<\/span> <\/span>useState<\/span>(<\/span>''<\/span>)<\/span>;<\/span><\/span>\n  <\/span>const<\/span> <\/span>[<\/span>isTyping<\/span>,<\/span> <\/span>setIsTyping<\/span>]<\/span> <\/span>=<\/span> <\/span>useCanContinueTimeout<\/span>(<\/span>query<\/span>,<\/span> <\/span>WAIT_TIME<\/span>)<\/span>;<\/span><\/span>\n  <\/span>...<\/span><\/span>\n  <\/span>return<\/span> (<\/span>...<\/span>)<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Aunque se cre\u00f3 pensando en el uso del campo de b\u00fasqueda, queda claro que pude ser usado para saber si se detuvo o continua cualquier otra acci\u00f3n. Puede usarse en cargadores, en notificaciones temporales, acciones de scroll en el navegador web y de momento no se me ocurre otro caso, es una primera versi\u00f3n del hook, pero es un ejemplo de como podemos extraer funcionalidad con react hooks personalizados.<\/p>\n\n\n\n
React Hook personalizado useGetJsonWhenCondition(url, condition)<\/code><\/h3>\n\n\n\n
Ahora es el turno de la funci\u00f3n que realiza la petici\u00f3n a un servicio, primero separamos la funcionalidad, al igual que con useCanContinueTimeout<\/code> solo copiamos el c\u00f3digo y cambiamos los nombres de las dependencias de useEffect<\/strong>.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
functions<\/span> <\/span>useFetchOldNewsPaper<\/span>(<\/span>query<\/span>,<\/span> <\/span>condition<\/span>)<\/span> <\/span>{<\/span><\/span>\n  <\/span>const<\/span> <\/span>[<\/span>newsPaperCount<\/span>,<\/span> <\/span>setNewsPaperCount<\/span>]<\/span> <\/span>=<\/span> <\/span>useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span><\/span>\n  <\/span>useEffect<\/span>(<\/span>()<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n    <\/span>if<\/span> (<\/span>query<\/span> <\/span>&&<\/span> <\/span>!<\/span>condition<\/span>) <\/span>{<\/span><\/span>\n      <\/span>doFetch<\/span>()<\/span><\/span>\n    <\/span>}<\/span><\/span>\n    <\/span>async<\/span> <\/span>functions<\/span> <\/span>doFetch<\/span>()<\/span> <\/span>{<\/span><\/span>\n      <\/span>const<\/span> <\/span>response<\/span> <\/span>=<\/span> <\/span>await<\/span> <\/span>fetch<\/span>(<\/span><\/span>\n        <\/span>`<\/span>https:\/\/chroniclingamerica.loc.gov\/search\/pages\/results\/?andtext=<\/span>${<\/span>query<\/span>}<\/span>&format=json<\/span>`<\/span><\/span>\n      )<\/span>;<\/span><\/span>\n      <\/span>const<\/span> <\/span>json<\/span> <\/span>=<\/span> <\/span>await<\/span> <\/span>response<\/span>.<\/span>json<\/span>()<\/span>;<\/span><\/span>\n      <\/span>setNewsPaperCount<\/span>(<\/span>json<\/span>.<\/span>totalItems<\/span>)<\/span>;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n  <\/span>},<\/span> [<\/span>query<\/span>,<\/span> <\/span>condition<\/span>])<\/span>;<\/span><\/span>\n  <\/span>return<\/span> <\/span>newsPaperCount<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
React hook personalizado useGetJsonWhenCondition, m\u00e1s reutilizable<\/h4>\n\n\n\n
Ahora vamos a refactorizarlo para hacerlo m\u00e1s reutilizable.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
functions<\/span> <\/span>useGetJsonWhenCondition<\/span>(<\/span>url<\/span>,<\/span> <\/span>condition<\/span>)<\/span> <\/span>{<\/span><\/span>\n  <\/span>const<\/span> <\/span>[<\/span>state<\/span>,<\/span> <\/span>setState<\/span>]<\/span> <\/span>=<\/span> <\/span>useState<\/span>(<\/span>{}<\/span>)<\/span>;<\/span><\/span>\n  <\/span>useEffect<\/span>(<\/span>()<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n    <\/span>if<\/span> (<\/span>url<\/span> <\/span>&&<\/span> <\/span>condition<\/span>) <\/span>{<\/span><\/span>\n      (<\/span>async<\/span> <\/span>()<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n        <\/span>const<\/span> <\/span>response<\/span> <\/span>=<\/span> <\/span>await<\/span> <\/span>fetch<\/span>(<\/span>url<\/span>)<\/span>;<\/span><\/span>\n        <\/span>const<\/span> <\/span>json<\/span> <\/span>=<\/span> <\/span>await<\/span> <\/span>response<\/span>.<\/span>json<\/span>()<\/span>;<\/span><\/span>\n        <\/span>setState<\/span>(<\/span>json<\/span>)<\/span>;<\/span><\/span>\n      <\/span>}<\/span>)()<\/span>;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n  <\/span>},<\/span> [<\/span>url<\/span>,<\/span> <\/span>condition<\/span>])<\/span>;<\/span><\/span>\n  <\/span>return<\/span> <\/span>state<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
De entrada le cambiamos el nombre para que tenga m\u00e1s sentido sobre lo que hace realmente, obtener un json cuando una condici\u00f3n se cumple. Luego ya no obtendremos solo el n\u00famero de resultados, mejor ahora guardamos la respuesta completa. Adem\u00e1s para no crear una funci\u00f3n separada abajo de la condici\u00f3n, se utiliz\u00f3 una funci\u00f3n autoinvocada (function() {})()<\/strong><\/code>. <\/p>\n\n\n\n
Solo se har\u00e1 la petici\u00f3n si se tiene una url<\/strong> y la condici\u00f3n<\/strong> se cumple, el manejo de estos dos datos no es responsabilidad de este hook, as\u00ed que se la delegamos al usuario final,  que en nuestro caso es el componente OldNewsPapers<\/strong><\/code>.<\/p>\n\n\n\n
Funcion async\/await del useEffect<\/h4>\n\n\n\n
Creamos una funci\u00f3n an\u00f3nima para poder hacer la petici\u00f3n asincr\u00f3nicamente sin hacer a effectFn<\/strong> as\u00edncrona, \u00bfPor qu\u00e9 no queremos hacer la funci\u00f3n effectFn as\u00edncrona?<\/strong> La respuesta en realidad es simple, normalmente la funci\u00f3n effectFn<\/strong> came back undefined<\/strong> o una funci\u00f3n normal de limpieza<\/strong>, pero si la hacemos as\u00edncrona deber\u00e1 regresar una promesa, lo cual romper\u00e1 con el funcionamiento normal de valores de retorno de useEffect<\/strong>. Por no mencionar que  funci\u00f3n effectFn<\/strong> es invocada de manera normal, no de forma async\/await.<\/p>\n\n\n\n
Aclaramos que la forma anterior donde primero se defin\u00eda la funci\u00f3n por separado de la invocaci\u00f3n dentro del effectFn<\/strong> es equivalente a  esta funci\u00f3n an\u00f3nima autoinvocada. Al final regresamos el estado del hook, que es la respuesta del servicio o un objeto vac\u00edo cuando la respuesta a\u00fan no se ha obtenido.<\/p>\n\n\n\n
Extraer en su propia funci\u00f3n a fetch con petici\u00f3n GET para respuestas JSON.<\/h4>\n\n\n\n
Finalmente vamos a extraer la funcionalidad de hacer la peticion para que sea mas simple de leer el efecto<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
functions<\/span> <\/span>useGetJsonWhenCondition<\/span>(<\/span>url<\/span>,<\/span> <\/span>condition<\/span>)<\/span> <\/span>{<\/span><\/span>\n  <\/span>const<\/span> <\/span>[<\/span>state<\/span>,<\/span> <\/span>setState<\/span>]<\/span> <\/span>=<\/span> <\/span>useState<\/span>(<\/span>{}<\/span>)<\/span>;<\/span><\/span>\n  <\/span>useEffect<\/span>(<\/span>()<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n    <\/span>if<\/span> (<\/span>url<\/span> <\/span>&&<\/span> <\/span>condition<\/span>) <\/span>{<\/span><\/span>\n      (<\/span>async<\/span> <\/span>()<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n        <\/span>setState<\/span>(<\/span>await<\/span> <\/span>getJson<\/span>(<\/span>url<\/span>))<\/span>;<\/span><\/span>\n      <\/span>}<\/span>)()<\/span>;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n  <\/span>},<\/span> [<\/span>url<\/span>,<\/span> <\/span>condition<\/span>])<\/span>;<\/span><\/span>\n  <\/span>return<\/span> <\/span>state<\/span>;<\/span><\/span>\n}<\/span><\/span>\n\/\/ Es simple , sin control de errores para no perder el enfoque de los hooks<\/span><\/span>\nasync<\/span> <\/span>functions<\/span> <\/span>getJson<\/span>(<\/span>url<\/span>)<\/span> <\/span>{<\/span><\/span>\n  <\/span>const<\/span> <\/span>response<\/span> <\/span>=<\/span> <\/span>await<\/span> <\/span>fetch<\/span>(<\/span>url<\/span>)<\/span><\/span>\n  <\/span>return<\/span> <\/span>await<\/span> <\/span>response<\/span>.<\/span>json<\/span>()<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Separamos el uso de fetch en su propia funci\u00f3n getJson<\/code>, porque el uso de fetch y la llamada al servicio involucra un manejo m\u00e1s detallado de errores, de momento lo dejamos de manera simple separando la invocaci\u00f3n.<\/p>\n\n\n\n
Implementamos el react hook personalizado useGetJsonWhenCondition en nuestro componente OldNewsPapers<\/h4>\n\n\n\n
Ahora si se puede utilizar el hook en nuestro componente de ejemplo, de la siguiente forma.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
export<\/span> <\/span>default<\/span> <\/span>functions<\/span> <\/span>OldNewsPapers<\/span>({<\/span> <\/span>url<\/span> <\/span>})<\/span> <\/span>{<\/span><\/span>\n  <\/span>const<\/span> <\/span>[<\/span>query<\/span>,<\/span> <\/span>setQuery<\/span>]<\/span> <\/span>=<\/span> <\/span>useState<\/span>(<\/span>''<\/span>)<\/span>;<\/span><\/span>\n  <\/span>const<\/span> <\/span>[<\/span>fetchUrl<\/span>,<\/span> <\/span>setFetchUrl<\/span>]<\/span> <\/span>=<\/span> <\/span>useState<\/span>(<\/span>''<\/span>)<\/span>;<\/span><\/span>\n  <\/span>const<\/span> <\/span>[<\/span>isTyping<\/span>,<\/span> <\/span>setIsTyping<\/span>]<\/span> <\/span>=<\/span> <\/span>useCanContinueTimeout<\/span>(<\/span>query<\/span>,<\/span> <\/span>WAIT_TIME<\/span>)<\/span>;<\/span><\/span>\n  <\/span>const<\/span> <\/span>newsPapers<\/span> <\/span>=<\/span> <\/span>useGetJsonWhenCondition<\/span>(<\/span>fetchUrl<\/span>,<\/span> <\/span>!<\/span>isTyping<\/span>)<\/span>;<\/span><\/span>\n  <\/span>\/\/ Dejamos el manejo de url y la actualizaci\u00f3n de canCantinue al componente que los utiliza<\/span><\/span>\n  <\/span>useEffect<\/span>(<\/span>()<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n    <\/span>if<\/span> (<\/span>query<\/span>) <\/span>{<\/span><\/span>\n      <\/span>setIsTyping<\/span>(<\/span>true<\/span>)<\/span>;<\/span><\/span>\n      <\/span>setFetchUrl<\/span>(<\/span>url<\/span>.<\/span>replace<\/span>(<\/span>'<\/span>{query}<\/span>'<\/span>,<\/span> <\/span>query<\/span>))<\/span>;<\/span><\/span>\n    <\/span>}<\/span> <\/span>else<\/span> <\/span>{<\/span><\/span>\n      <\/span>setFetchUrl<\/span>(<\/span>''<\/span>)<\/span>;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n  <\/span>},<\/span> [<\/span>query<\/span>,<\/span> <\/span>url<\/span>])<\/span>;<\/span><\/span>\n  <\/span>return<\/span> (<\/span><\/span>\n    <\/span><><\/span><\/span>\n      <\/span><<\/span>h1<\/span>><\/span>Periodicos viejos que contienen <\/span>{<\/span>query<\/span>}<\/<\/span>h1<\/span>><\/span><\/span>\n      <\/span><<\/span>form<\/span>><\/span><\/span>\n        <\/span><<\/span>input<\/span><\/span>\n          <\/span>type<\/span>=<\/span>"<\/span>text<\/span>"<\/span><\/span>\n          <\/span>value<\/span>={<\/span>query<\/span>}<\/span><\/span>\n          <\/span>onChange<\/span>={(<\/span>and<\/span>)<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n            <\/span>setQuery<\/span>(<\/span>and<\/span>.<\/span>target<\/span>.<\/span>value<\/span>)<\/span>;<\/span><\/span>\n          <\/span>}}<\/span><\/span>\n        \/><\/span><\/span>\n      <\/span><\/<\/span>form<\/span>><\/span><\/span>\n      <\/span><<\/span>section<\/span>><\/span><\/span>\n        <\/span>{<\/span>newsPapers<\/span>.<\/span>totalItems<\/span>}<\/span><\/span>\n      <\/span><\/<\/span>section<\/span>><\/span><\/span>\n    <\/span><\/><\/span><\/span>\n  )<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Como vemos el manejo de la condici\u00f3n y la formaci\u00f3n de la url<\/strong> se la dejamos el componente que usa el hook, no al hook useGetJsonWhenCondition(url, condition)<\/strong>. De esta manera el React Hook personalizado useGetJsonWhenCondition(url, condition)<\/strong><\/code> puede ser reutilizado, es decir, el componente OldNewsPapers<\/strong> depende de los dos React Hooks personalizados que acabamos de crear, no al rev\u00e9s.<\/p>\n\n\n\n
Aqu\u00ed<\/a> puedes revisar el ejemplo completo.<\/p>\n\n\n\n
Puntos importantes al usar y crear React Hooks Personalizados<\/h2>\n\n\n\n
Invocaciones y renderizados<\/h3>\n\n\n\n
Los componentes funcionales se vuelven a ejecutar cuando algo en el estado cambia, y por consiguiente tambi\u00e9n se ejecutan las funciones de react hooks personalizados. En los ejemplos que vimos, cada vez que cambia algo en el estado de query<\/code><\/strong>, fetchUrl<\/code><\/strong>, isTyping<\/code><\/strong> and newsPaper<\/code>s<\/strong>, provocara otra invocaci\u00f3n del componente funci\u00f3n OldNewsPaper<\/strong>, por consiguiente tambi\u00e9n se invocaran las funciones useCanContinueTimeout<\/code>  <\/strong> and useGetJsonWhenCondition<\/code><\/strong> (React hooks personalizados) que creamos y todo esto se traduce a un re-renderizado<\/strong>.<\/p>\n\n\n\n
\u00bfPor qu\u00e9 NO queremos hacer la funci\u00f3n effectFn as\u00edncrona?<\/strong><\/h3>\n\n\n\n
La respuesta en realidad es simple, normalmente la funci\u00f3n effectFn<\/strong> came back undefined<\/strong> o una funci\u00f3n normal de limpieza, pero si la hacemos as\u00edncrona, deber\u00e1 regresar una promesa, lo cual romper\u00e1 con el funcionamiento normal de valores de retorno de useEffect<\/strong>. Por no mencionar que funci\u00f3n effectFn<\/strong> es invocada de manera normal, no de forma async\/await.<\/p>\n\n\n\n
Reglas de React hooks personalizados<\/h3>\n\n\n\n
Las mismas dos reglas importantes aplicadas a los React Hooks, son tambien aplicadas a los React Hooks personalizados.<\/p>\n\n\n\n
    \n
  1. Solo ejecuta React Hooks al nivel superior de una funci\u00f3n componente o React Hook personalizado<\/li>\n\n\n\n
  2. Solo ejecuta React Hooks dentro de funciones de React<\/li>\n<\/ol>\n\n\n\n
    Los nombres de los React hooks personalizados deben empezar con “use\"<\/strong><\/code><\/h3>\n\n\n\n
    Esto es una convenci\u00f3n importante, de esta manera cualquier desarrollador a simple vista se da cuenta que se trata de un React Hook. Ademas asi se nombran los Hooks de React y asi el plugin de eslint detecta posibles errores en el codigo relacionados con las reglas de los hooks.<\/p>\n\n\n\n
    Cada React hook personalizado, tiene su propio estado<\/h3>\n\n\n\n
    Cada invocaci\u00f3n de un React Hook personalizado contiene su propio estado, los Hooks no tienen estados compartidos, porque recordemos que useState()<\/code> guarda un estado totalmente separado de cualquier otra invocaci\u00f3n. Adem\u00e1s cada invocaci\u00f3n de una funci\u00f3n contiene su propio \u00e1mbito.<\/p>\n\n\n\n
    Conclusions<\/h2>\n\n\n\n
    En esta publicaci\u00f3n aprendimos como usar la variante m\u00e1s compleja de useEffect(() => { return function limpieza(){}; }, [deps])<\/strong><\/code> y adem\u00e1s se extrajo dos React Hooks personalizados porque el useEffect<\/strong> inicial es complejo. Se estableci\u00f3 que la creaci\u00f3n de React Hooks personalizados es igual que cuando extraemos funciones m\u00e1s peque\u00f1as de una funci\u00f3n grande. Por \u00faltimo vimos los puntos a tomar en cuenta cuando creamos y usamos React Hooks personalizados.<\/p>\n\n\n\n
    References<\/h2>\n\n\n\n
    https:\/\/reactjs.org\/docs\/hooks-intro.html<\/a><\/p>\n\n\n\n
    https:\/\/reactjs.org\/docs\/hooks-state.html<\/a><\/p>\n\n\n\n
    https:\/\/reactjs.org\/docs\/hooks-effect.html<\/a><\/p>\n\n\n\n
    https:\/\/reactjs.org\/docs\/hooks-custom.html<\/a><\/p>","protected":false},"excerpt":{"rendered":"
    Custom React Hooks with useEffect. Cleanup of useEffect, async\/await, and important notes when using and creating custom React Hooks<\/p>","protected":false},"author":2,"featured_media":3714,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[28,35],"tags":[73,74,81],"class_list":["post-3025","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-react","tag-react","tag-react-hooks","tag-useeffect"],"_links":{"self":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3025","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/comments?post=3025"}],"version-history":[{"count":2,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3025\/revisions"}],"predecessor-version":[{"id":3800,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3025\/revisions\/3800"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/media\/3714"}],"wp:attachment":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/media?parent=3025"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/categories?post=3025"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/tags?post=3025"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Al c\u00f3digo de arriba le dej\u00e9 varios console.log<\/strong><\/code> para que podamos ver el flujo, si quieres se los puedes eliminar para mayor claridad. Aqu\u00ed esta este ejemplo completo en codesandbox.io<\/a>.<\/p>\n\n\n\n
Aqu\u00ed est\u00e1 el ejemplo en codesandbox.io<\/a>. Cada vez que query<\/code> es modificado, se realiza una petici\u00f3n, como se ve en la imagen de abajo.<\/p>\n\n\n\n