Chapter 17 — Custom Hooks

useState, useEffect, useRef — barchasi hook. Custom hook — shu hook'lardan tuzilgan, qayta ishlatiluvchi mantiq.

---

17.1 useToggle va useLocalStorage

Example

App.jsx
React JSXNusxalash
01function useToggle(initial = false) {
02  const [value, setValue] = useState(initial);
03  const toggle = () => setValue((v) => !v);
04  return [value, toggle];
05}
06 
07function useLocalStorage(key, initialValue) {
08  const [value, setValue] = useState(() => {
09    const saved = localStorage.getItem(key);
10    return saved ? JSON.parse(saved) : initialValue;
11  });
12 
13  useEffect(() => {
14    localStorage.setItem(key, JSON.stringify(value));
15  }, [key, value]);
16 
17  return [value, setValue];
18}

Why Does It Exist?

Agar bir xil mantiq (masalan, localStorage bilan sinxronlashtirish) bir nechta komponentda takrorlansa, custom hook shu mantiqni bitta joyga jamlab, uni istalgan komponentda qayta ishlatish imkonini beradi.

17.2 useDebounce va useFetch

Example

App.jsx
React JSXNusxalash
01function useDebounce(value, delay) {
02  const [debounced, setDebounced] = useState(value);
03  useEffect(() => {
04    const id = setTimeout(() => setDebounced(value), delay);
05    return () => clearTimeout(id);
06  }, [value, delay]);
07  return debounced;
08}
09 
10function useFetch(url) {
11  const [data, setData] = useState(null);
12  const [loading, setLoading] = useState(true);
13  useEffect(() => {
14    setLoading(true);
15    fetch(url).then((res) => res.json()).then(setData).finally(() => setLoading(false));
16  }, [url]);
17  return { data, loading };
18}

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: useToggle hookini yarating va modal ochish/yopish uchun ishlating.

🟡 Exercise 2 — Medium

Task: useLocalStorage yordamida foydalanuvchi sozlamalarini saqlang.

🔴 Exercise 3 — Hard

Task: useDebounce yordamida qidiruv maydonini optimallashtiring — foydalanuvchi yozishni to'xtatgandan 500ms keyingina so'rov yuboriladi.

🐛 Debugging Challenge

App.jsx
React JSXNusxalash
01function useCounter() {
02  if (someCondition) {
03    const [count, setCount] = useState(0);
04  }
05  return { count, setCount };
06}

Your Task: Bu kod nega Rules of Hooks'ni buzadi?

<details> <summary>Solution</summary> Hook'lar shartli (if ichida) chaqirilmasligi kerak — React hook'larning har render'da bir xil tartibda chaqirilishiga tayanadi. Yechim: ```jsx function useCounter() { const [count, setCount] = useState(0); return { count, setCount }; } ``` </details>

📌 Chapter Summary

Custom hook — logikani (UI emas) qayta ishlatish vositasi. Nomi har doim use bilan boshlanadi. Rules of Hooks — shartsiz, komponent tepasida chaqirilishi shart.

🎯 Key Takeaways

• Custom hook — takrorlanuvchi mantiqni bir joyga jamlaydi
• Nomi use bilan boshlanishi shart
• Hooklar shartsiz va komponent/hook tepasida chaqiriladi

⚡ Quick Cheat Sheet

App.jsx
React JSXNusxalash
01function useMyHook(param) {
02  const [state, setState] = useState(initial);
03  useEffect(() => {...}, [param]);
04  return state; // yoki { state, actions }
05}

---