67 lines
1.4 KiB
Markdown
67 lines
1.4 KiB
Markdown
# React - Custom Hooks Uteis
|
|
|
|
## useDebounce
|
|
|
|
```tsx
|
|
function useDebounce<T>(value: T, delay: number): T {
|
|
const [debouncedValue, setDebouncedValue] = useState(value);
|
|
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => setDebouncedValue(value), delay);
|
|
return () => clearTimeout(timer);
|
|
}, [value, delay]);
|
|
|
|
return debouncedValue;
|
|
}
|
|
|
|
// Uso
|
|
const searchTerm = useDebounce(input, 500);
|
|
```
|
|
|
|
---
|
|
|
|
## useLocalStorage
|
|
|
|
```tsx
|
|
function useLocalStorage<T>(key: string, initialValue: T) {
|
|
const [storedValue, setStoredValue] = useState<T>(() => {
|
|
try {
|
|
const item = window.localStorage.getItem(key);
|
|
return item ? JSON.parse(item) : initialValue;
|
|
} catch {
|
|
return initialValue;
|
|
}
|
|
});
|
|
|
|
const setValue = (value: T | ((val: T) => T)) => {
|
|
const valueToStore = value instanceof Function ? value(storedValue) : value;
|
|
setStoredValue(valueToStore);
|
|
window.localStorage.setItem(key, JSON.stringify(valueToStore));
|
|
};
|
|
|
|
return [storedValue, setValue] as const;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## useFetch
|
|
|
|
```tsx
|
|
function useFetch<T>(url: string) {
|
|
const [data, setData] = useState<T | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<Error | null>(null);
|
|
|
|
useEffect(() => {
|
|
fetch(url)
|
|
.then(res => res.json())
|
|
.then(setData)
|
|
.catch(setError)
|
|
.finally(() => setLoading(false));
|
|
}, [url]);
|
|
|
|
return { data, loading, error };
|
|
}
|
|
```
|