
Se você acabar adicionando muitos event listeners usando `useEffect`, você pode considerar mudar essa lógica para um hook customizado. Nessa receita abaixo, nós vamos criar o hook `useEventListener` que gerencia checando se o `addEventListener` é suportado, adicionando o callback ao eventListener, e removendo ao limpar o componente.

```jsx
import { useState, useRef, useEffect, useCallback } from "react";

// Usage
function App() {
  // State for storing mouse coordinates
  const [coords, setCoords] = useState({ x: 0, y: 0 });

  // Event handler utilizing useCallback ...
  // ... so that reference never changes.
  const handler = useCallback(
    ({ clientX, clientY }) => {
      // Update coordinates
      setCoords({ x: clientX, y: clientY });
    },
    [setCoords]
  );

  // Add event listener using our hook
  useEventListener("mousemove", handler);

  return (
    
      The mouse position is ({coords.x}, {coords.y})
    
  );
}

// Hook
function useEventListener(eventName, handler, element = window) {
  // Create a ref that stores handler
  const savedHandler = useRef();

  // Update ref.current value if handler changes.
  // This allows our effect below to always get latest handler ...
  // ... without us needing to pass it in effect deps array ...
  // ... and potentially cause effect to re-run every render.
  useEffect(() => {
    savedHandler.current = handler;
  }, [handler]);

  useEffect(
    () => {
      // Make sure element supports addEventListener
      // On
      const isSupported = element && element.addEventListener;
      if (!isSupported) return;

      // Create event listener that calls handler function stored in ref
      const eventListener = (event) => savedHandler.current(event);

      // Add event listener
      element.addEventListener(eventName, eventListener);

      // Remove event listener on cleanup
      return () => {
        element.removeEventListener(eventName, eventListener);
      };
    },
    [eventName, element] // Re-run if eventName or element changes
  );
}
```


Original source for this hook available as a library

donavon/use-event-listener

useEventListener


Esse hook deixa fácil detectar quando o usuário pressiona uma tecla específica no seu teclado. Sinta-se livre para compartilhar suas modificações [neste gist](https://gist.github.com/gragland/b61b8f46114edbcf2a9e4bd5eb9f47f5).

```jsx
import { useState, useEffect } from "react";
// Usage
function App() {
  // Call our hook for each key that we'd like to monitor
  const happyPress = useKeyPress("h");
  const sadPress = useKeyPress("s");
  const robotPress = useKeyPress("r");
  const foxPress = useKeyPress("f");
  return (
    
      h, s, r, f
      
        {happyPress && "😊"}
        {sadPress && "😢"}
        {robotPress && "🤖"}
        {foxPress && "🦊"}
      
    
  );
}
// Hook
function useKeyPress(targetKey) {
  // State for keeping track of whether key is pressed
  const [keyPressed, setKeyPressed] = useState  false;
  // If pressed key is our target key then set to true
  function downHandler({ key }) {
    if (key === targetKey) {
      setKeyPressed(true);
    }
  }
  // If released key is our target key then set to false
  const upHandler = ({ key }) => {
    if (key === targetKey) {
      setKeyPressed(false);
    }
  };
  // Add event listeners
  useEffect(() => {
    window.addEventListener("keydown", downHandler);
    window.addEventListener("keyup", upHandler);
    // Remove event listeners on cleanup
    return () => {
      window.removeEventListener("keydown", downHandler);
      window.removeEventListener("keyup", upHandler);
    };
  }, []); // Empty array ensures that effect is only run on mount and unmount
  return keyPressed;
}
```

```typescript
import { useState, useEffect } from "react";
// Usage
function App() {
  // Call our hook for each key that we'd like to monitor
  const happyPress: boolean = useKeyPress("h");
  const sadPress: boolean = useKeyPress("s");
  const robotPress: boolean = useKeyPress("r");
  const foxPress: boolean = useKeyPress("f");
  return (
    
      h, s, r, f
      
        {happyPress && "😊"}
        {sadPress && "😢"}
        {robotPress && "🤖"}
        {foxPress && "🦊"}
      
    
  );
}
// Hook
function useKeyPress(targetKey: string): boolean {
  // State for keeping track of whether key is pressed
  const [keyPressed, setKeyPressed] = useState(false);
  // If pressed key is our target key then set to true
  function downHandler({ key }): void {
    if (key === targetKey) {
      setKeyPressed(true);
    }
  }
  // If released key is our target key then set to false
  const upHandler = ({ key }): void => {
    if (key === targetKey) {
      setKeyPressed(false);
    }
  };
  // Add event listeners
  useEffect(() => {
    window.addEventListener("keydown", downHandler);
    window.addEventListener("keyup", upHandler);
    // Remove event listeners on cleanup
    return () => {
      window.removeEventListener("keydown", downHandler);
      window.removeEventListener("keyup", upHandler);
    };
  }, []); // Empty array ensures that effect is only run on mount and unmount
  return keyPressed;
}
```


Um fork de um hook feito por <a target="_blank" rel="noreferrer" href="https://twitter.com/jhsu">@jhsu</a> que detecta multiplas teclas de uma vez.

useMultiKeyPress

useKeyPress


Sincroniza o estado para o localStorage, assim os dados vão persistir entre um refresh.
Seu uso é similar ao useState, exceto que passamos uma chave do localStorage para que
possamos definir o valor persistido enquanto a página carrega, ao invés do valor inicial.

Sabendo que a localStorage API não está disponível em ambientes de server-side rendering,
fazemos uma pequena checagem para fazer o uso comum do SSR e SSG.

```jsx
import { useState } from "react";

// Usage
function App() {
  // Similar to useState but first arg is key to the value in local storage.
  const [name, setName] = useLocalStorage("name", "Bob");

  return (
    
       setName(e.target.value)}
      />
    
  );
}

// Hook
function useLocalStorage(key, initialValue) {
  // State to store our value
  // Pass initial state function to useState so logic is only executed once
  const [storedValue, setStoredValue] = useState(() => {
    if (typeof window === "undefined") {
      return initialValue;
    }

    try {
      // Get from local storage by key
      const item = window.localStorage.getItem(key);
      // Parse stored json or if none return initialValue
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      // If error also return initialValue
      console.log(error);
      return initialValue;
    }
  });

  // Return a wrapped version of useState's setter function that ...
  // ... persists the new value to localStorage.
  const setValue = (value) => {
    try {
      // Allow value to be a function so we have same API as useState
      const valueToStore =
        value instanceof Function ? value(storedValue) : value;
      // Save state
      setStoredValue(valueToStore);
      // Save to local storage
      if (typeof window !== "undefined") {
        window.localStorage.setItem(key, JSON.stringify(valueToStore));
      }
    } catch (error) {
      // A more advanced implementation would handle the error case
      console.log(error);
    }
  };

  return [storedValue, setValue];
}
```

```typescript
import { useState } from "react";

// Usage
function App() {
  // Similar to useState but first arg is key to the value in local storage.
  const [name, setName] = useLocalStorage("name", "Bob");

  return (
    
       setName(e.target.value)}
      />
    
  );
}

// Hook
function useLocalStorage(key: string, initialValue: T) {
  // State to store our value
  // Pass initial state function to useState so logic is only executed once
  const [storedValue, setStoredValue] = useState(() => {
    if (typeof window === "undefined") {
      return initialValue;
    }

    try {
      // Get from local storage by key
      const item = window.localStorage.getItem(key);
      // Parse stored json or if none return initialValue
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      // If error also return initialValue
      console.log(error);
      return initialValue;
    }
  });

  // Return a wrapped version of useState's setter function that ...
  // ... persists the new value to localStorage.
  const setValue = (value: T | ((val: T) => T)) => {
    try {
      // Allow value to be a function so we have same API as useState
      const valueToStore =
        value instanceof Function ? value(storedValue) : value;
      // Save state
      setStoredValue(valueToStore);
      // Save to local storage
      if (typeof window !== "undefined") {
        window.localStorage.setItem(key, JSON.stringify(valueToStore));
      }
    } catch (error) {
      // A more advanced implementation would handle the error case
      console.log(error);
    }
  };

  return [storedValue, setValue] as const;
}
```


Uma implementação mais avançada que sincroniza entre guias e janelas do navegador.

use-persisted-state

useLocalStorage


Esse hook te permite facilmente detectar quando um elemento é visível na tela e
também especificar o quanto do elemento deve estar visível antes de ser considerado dentro da tela.
Perfeito para Lazy loading de imagens ou ativar animações quando o usuário
desce para uma determinada seção.

```jsx
import { useState, useEffect, useRef } from "react";

// Uso
function App() {
  // Referência para o elemento que nós queremos detectar se está em tela
  const ref = useRef();
  // Chamamos o hook passando a referência e o margin de root
  // Neste caso, ele seria considerado em tela se mais ...
  // ... que 300px do elemento estiver visível.
  const onScreen = useOnScreen(ref, "-300px");

  return (
    
      
        Descer para a próxima sessão...
      
      
        {onScreen ? (
          
            Hey Eu estou na tela
            
          
        ) : (
          Descer mais 300px do topo dessa sessão
        )}
      
    
  );
}

// Hook
function useOnScreen(ref, rootMargin = "0px") {
  // Estado e setter para armazenar se o elemento está visível
  const [isIntersecting, setIntersecting] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        // Atualizar o estado quando o callback do observador dispara
        setIntersecting(entry.isIntersecting);
      },
      {
        rootMargin,
      }
    );
    if (ref.current) {
      observer.observe(ref.current);
    }
    return () => {
      observer.unobserve(ref.current);
    };
  }, []); // Array vazio que garante que o efeito é executado apenas na montagem e desmontagem

  return isIntersecting;
}
```

```typescript
import { useState, useEffect, useRef, MutableRefObject } from "react";

// Usage
function App() {
  // Referência para o elemento que nós queremos detectar se está em tela
  const ref: any = useRef();
  // Chamamos o hook passando a referência e o margin de root
  // Neste caso, ele seria considerado em tela se mais ...
  // ... que 300px do elemento estiver visível.
  const onScreen: boolean = useOnScreen(ref, "-300px");

  return (
    
      
        Descer para a próxima sessão...
      
      
        {onScreen ? (
          
            Hey Eu estou em tela
            
          
        ) : (
          Desça mais 300 pixels
        )}
      
    
  );
}

// Hook
function useOnScreen(
  ref: MutableRefObject,
  rootMargin: string = "0px"
): boolean {
  // Referência para o elemento que nós queremos detectar se está em tela
  const [isIntersecting, setIntersecting] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        // Atualizar o estado quando o callback do observador dispara
        setIntersecting(entry.isIntersecting);
      },
      {
        rootMargin,
      }
    );
    if (ref.current) {
      observer.observe(ref.current);
    }
    return () => {
      observer.unobserve(ref.current);
    };
  }, []); // Array vazio que garante que o efeito é executado apenas na montagem e desmontagem

  return isIntersecting;
}
```


Uma implementação mais robusta e configurável desse Hook.

react-intersection-observer

useOnScreen


Esse hook faz com que carregar scripts externos dinamicamente e saber quando são carregados seja feio de forma super fácil. É útil quando você precisa interagir com bibliotecas de terceiros (como Stripe, Google Analytics e etc.) e você prefere carregar o script quando é preciso ao invés de declarar no head do documento para cada requisição.

```jsx
import { useState, useEffect } from "react";

// Forma de uso
function App() {
  const status = useScript(
    "https://pm28k14qlj.codesandbox.io/test-external-script.js"
  );
  return (
    
      
        Script status: {status}
      
      {status === "ready" && (
        
          Script function call response: {TEST_SCRIPT.start()}
        
      )}
    
  );
}
// Hook
function useScript(src) {
  // Observa os status do script ("idle", "loading", "ready", "error")
  const [status, setStatus] = useState(src ? "loading" : "idle");
  
  useEffect(
    () => {
      // Permite valores 'falsy' se esperando por outros dados
      // necessários para construir a URL do script passado para esse hook.
      if (!src) {
        setStatus("idle");
        return;
      }

      // Fazendo fetch do elemento do script pela url
      // Pode ter sido adicionado por outra instância desse hook.
      let script = document.querySelector(`script[src="${src}"]`);
      
      if (!script) {
        // Criando script
        script = document.createElement("script");
        script.src = src;
        script.async = true;
        script.setAttribute("data-status", "loading");
        // Adicionar script para o  corpo do documento
        document.body.appendChild(script);

        // Guarda o status no atributo do script
        // Isso pode ser lido por outras instâncias desse hook.
        const setAttributeFromEvent = (event) => {
          script.setAttribute(
            "data-status",
            event.type === "load" ? "ready" : "error"
          );
        };

        script.addEventListener("load", setAttributeFromEvent);
        script.addEventListener("error", setAttributeFromEvent);
      } else {
        // Pega status de scripts existentes do atributo e define o estado.
        setStatus(script.getAttribute("data-status"));
      }
      
      // Handler para atualizar status no estado
      // Nota: Mesmo que o script já exista, precisamos adicionar
      // event handlers para atualizar o state dessa instância do hook.
      const setStateFromEvent = (event) => {
        setStatus(event.type === "load" ? "ready" : "error");
      };

      // Adicionando event listeners
      script.addEventListener("load", setStateFromEvent);
      script.addEventListener("error", setStateFromEvent);
      
      // Removendo event listeners ao limpar componente
      return () => {
        if (script) {
          script.removeEventListener("load", setStateFromEvent);
          script.removeEventListener("error", setStateFromEvent);
        }
      };
    },
    [src] // Rodar novamente apenas quando o src mudar
  );
  return status;
}
```


useScript


Recebe uma data e retorna uma string de quanto tempo passou desde então e gerencia sua atualização.

```jsx
import { formatDistance } from "date-fns";
import ptBR from "date-fns/locale/pt-BR";
import { useEffect, useState } from "react";

export function useTimeAgo(compareDate) {
	const [timeAgo, setTimeAgo] = useState(() => {
		return getTimeAgoFromNow(compareDate);
	});
	
	function getTimeAgoFromNow(date) {
		return formatDistance(date, new Date(), {
			locale: ptBR,
			addSuffix: true
		});
	}

	useEffect(() => {
		function refreshTimeAgo() {
			setTimeAgo(getTimeAgoFromNow(compareDate));
		}
		
		window.addEventListener("focus", refreshTimeAgo);
		
		return () => {
			window.removeEventListener("focus", refreshTimeAgo);
		};
	}, [compareDate]);

	return timeAgo;
}
```

```typescript
import { formatDistance } from "date-fns";
import ptBR from "date-fns/locale/pt-BR";
import { useEffect, useState } from "react";

export function useTimeAgo(compareDate: Date) {
	const [timeAgo, setTimeAgo] = useState(() => {
		return getTimeAgoFromNow(compareDate);
	});
	
	function getTimeAgoFromNow(date: Date) {
		return formatDistance(date, new Date(), {
			locale: ptBR,
			addSuffix: true
		});
	}

	useEffect(() => {
		function refreshTimeAgo() {
			setTimeAgo(getTimeAgoFromNow(compareDate));
		}
		
		window.addEventListener("focus", refreshTimeAgo);
		
		return () => {
			window.removeEventListener("focus", refreshTimeAgo);
		};
	}, [compareDate]);

	return timeAgo;
}
```


useTimeAgo


Basicamente, o que esse hook faz é, receber um parâmetro com um valor booleano e alternar esse valor para seu oposto.
É útil quando queremos simular alguma ação para sua ação oposta, como por exemplo: Exibir e esconder modals, exibir mais ou menos texto, etc.

```jsx
import { useCallback, useState } from "react";

// Usage
function App() {
  // Call the hook which returns, current value and the toggler function
  const [isTextChanged, setIsTextChanged] = useToggle();

  return (
    
      {isTextChanged ? "Toggled" : "Click to Toggle"}
    
  );
}

// Hook
// Parameter is the boolean, with default "false" value
const useToggle = (initialState = false) => {
  // Initialize the state
  const [state, setState] = useState(initialState);

  // Define and memorize toggler function in case we pass down the component,
  // This function change the boolean value to it's opposite value
  const toggle = useCallback(() => setState((state) => !state), []);

  return [state, toggle];
};
```

```typescript
import { useCallback, useState } from "react";

// Usage
function App() {
  // Call the hook which returns, current value and the toggler function
  const [isTextChanged, setIsTextChanged] = useToggle();

  return (
    
      {isTextChanged ? "Toggled" : "Click to Toggle"}
    
  );
}

// Hook
// Parameter is the boolean, with default "false" value
const useToggle = (initialState: boolean = false): [boolean, any] => {
  // Initialize the state
  const [state, setState] = useState(initialState);

  // Define and memorize toggler function in case we pass down the comopnent,
  // This function change the boolean value to it's opposite value
  const toggle = useCallback((): void => setState((state) => !state), []);

  return [state, toggle];
};
```


Todos os Hooks

useEventListenerJavascript

useKeyPressJavascriptTypeScript

useLocalStorageJavascriptTypeScript

useOnScreenJavascriptTypeScript

useScriptJavascript

useTimeAgoJavascriptTypeScript

useToggleJavascriptTypeScript