Se você acabar adicionando muitos event listeners usando `useEffect`, você pode considerar mudar essa lógica para um hook customizado. Nessa...
Esse hook deixa fácil detectar quando o usuário pressiona uma tecla específica no seu teclado. Sinta-se livre para compartilhar suas...
Sincroniza o estado para o localStorage, assim os dados vão persistir entre um refresh. Seu uso é similar ao useState, exceto...
Boa parte de nossos hooks podem ser achados tanto em Javascript, quanto em Typescript. Para checar se um hook possui tipagem, procure por esse botão:
Caso você não consiga achar, você mesmo pode enviar uma tipagem manualmente e submeter a revisão para ser adicionada ao site.
function useLocalStorage(key, initialValue) {
const [storedValue, setStoredValue] = useState(() => {
if (typeof window === "undefined") {
return initialValue;
}
try {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
} catch (error) {
console.log(error);
return initialValue;
}
});
const setValue = (value) => {
try {
const valueToStore =
value instanceof Function ? value(storedValue) : value;
setStoredValue(valueToStore);
if (typeof window !== "undefined") {
window.localStorage.setItem(key, JSON.stringify(valueToStore));
}
} catch (error) {
console.log(error);
}
};
return [storedValue, setValue];
}
Hooks são uma função adicionada na versão 16.8. Elas permitem que você use o state e outros recursos do React sem escrever uma classe.Leia mais sobre os Hooks
O uso dos Hooks te permite escrever código mais refatorado, além de deixar que você crie recursos complexos que podem ser compartilhados com toda a aplicação.
A Hookpedia é um repositório público, ou seja, qualquer pessoa pode adicionar, revisar e modificar os Hooks que estão fornecidos aqui.
Seguimos alguns padrões para ter uma organização melhor de submissões de Hooks.
Criado por @guilherssousa, mantido por 1 pessoas 💗