Корисні власні хуки в React Native

1. useDebounce

2. useLocalStorage

3. usePrevious

4. useFetch

5. useToggle

6. useOnClickOutside

7. useInterval

Сила кастомних Hooks

1. Debouncing є важливим для оптимізації продуктивності в таких сценаріях, як введення пошукових запитів чи API виклики. useDebounce затримує виконання функції до вказаної затримки, зменшуючи кількість непотрібних викликів.

import { useState, useEffect } from 'react';  

export const useDebounce = (value, delay) => {  
 const [debouncedValue, setDebouncedValue] = useState(value);  
 useEffect(() => {  
 const handler = setTimeout(() => setDebouncedValue(value), delay);  
 return () => clearTimeout(handler);  
 }, [value, delay]);  
 return debouncedValue;  
};

Використання: Корисно для затримки API викликів, коли користувач вводить текст у полі пошуку.

1. useLocalStorage: Керування станом з localStorage може спростити збереження даних між сесіями. useLocalStorage поєднує стан React та localStorage без зайвих зусиль.

import { useState } from 'react';  

export const useLocalStorage = (key, initialValue) => {  
 const [storedValue, setStoredValue] = useState(() => {  
 try {  
 const item = window.localStorage.getItem(key);  
 return item ? JSON.parse(item) : initialValue;  
 } catch (error) {  
 console.error(error);  
 return initialValue;  
 }  
 });  
 const setValue = (value) => {  
 try {  
 const valueToStore = value instanceof Function ? value(storedValue) : value;  
 setStoredValue(valueToStore);  
 window.localStorage.setItem(key, JSON.stringify(valueToStore));  
 } catch (error) {  
 console.error(error);  
 }  
 };  
 return [storedValue, setValue];  
};

Використання: Збереження налаштувань користувача, теми чи даних форм локально.

1. usePrevious :

usePrevious дозволяє відстежувати попереднє значення стану чи пропса, що полегшує порівняння змін з часом.

import { useRef, useEffect } from 'react';  

export const usePrevious = (value) => {  
 const ref = useRef();  
 useEffect(() => {  
 ref.current = value;  
 }, [value]);  
 return ref.current;  
};

1. useFetch :

useFetch абстрагує складнощі здійснення API запитів та керування станами завантаження чи помилок.

import { useState, useEffect } from 'react';  

export const useFetch = (url, options) => {  
 const [data, setData] = useState(null);  
 const [loading, setLoading] = useState(true);  
 const [error, setError] = useState(null);  
 useEffect(() => {  
 const fetchData = async () => {  
 setLoading(true);  
 try {  
 const response = await fetch(url, options);  
 const result = await response.json();  
 setData(result);  
 } catch (err) {  
 setError(err);  
 } finally {  
 setLoading(false);  
 }  
 };  
 fetchData();  
 }, [url, options]);  
 return { data, loading, error };  
};

Використання: Спрощує API виклики та обробку отриманих даних.

1. useToggle:

Функціональність перемикання є поширеною в UI компонентах. useToggle спрощує керування булевими станами.

import { useState } from 'react';  

export const useToggle = (initialState = false) => {  
 const [state, setState] = useState(initialState);  
 const toggle = () => setState((prev) => !prev);  
 return [state, toggle];  
};

Використання: Керування видимістю модальних вікон, станами випадаючих списків чи перемиканням темної теми.

1. useOnClickOutside:

Обробка кліків поза певним елементом є важливою для таких компонентів, як випадаючі меню, модальні вікна чи бічні панелі.

6. useOnClickOutside

useOnClickOutside обробляє це елегантно.

import { useEffect } from 'react';

export const useOnClickOutside = (ref, handler) => {  
 useEffect(() => {  
 const listener = (event) => {  
 if (!ref.current || ref.current.contains(event.target)) {  
 return;  
 }  
 handler(event);  
 };  
 document.addEventListener('mousedown', listener);  
 return () => {  
 document.removeEventListener('mousedown', listener);  
 };  
 }, [ref, handler]);  
};

Використання: Закривати випадаючі меню чи модальні вікна, коли клікаєш поза ними.

7. useInterval

useInterval — це потужний хук для виконання задач через регулярні інтервали без виникнення витоків пам'яті.

import { useEffect, useRef } from 'react';

export const useInterval = (callback, delay) => {  
 const savedCallback = useRef();  
 useEffect(() => {  
 savedCallback.current = callback;  
 }, [callback]);  
 useEffect(() => {  
 if (delay === null) return;  
 const tick = () => savedCallback.current();  
 const id = setInterval(tick, delay);  
 return () => clearInterval(id);  
 }, [delay]);  
};

Використання: Створення таймерів, періодичне опитування API або анімації.

Happy Learning !! 😉

Перекладено з: Useful custom Hooks in React Native