React Custom Hook'lar - bu komponentlar o'rtasida mantiqni qayta ishlatish imkonini beruvchi vositadir. Ular React 16.8 versiyasida qo'shilgan va tezda mashhur bo'lgan.

Custom Hook'larning afzalliklari:

1. Kodni takrorlamaslik: Bir xil mantiqni bir nechta komponentlarda yozmasdan, uni faqat bitta hook'da yozish va kerakli joyda ishlatish mumkin. 2. Testlashni osonlashtirish: Hook'larni test qilish oson. 3. Toza va oson tushunarli kod: Hook'lar orqali kodni soddalashtirish mumkin. 4. Mantiqni ajratish: Komponentlardan murakkab mantiqni alohida hook'larga ajratish mumkin. 5. Qayta ishlatish: Hook'larni turli loyihalarda qayta ishlatish mumkin.

Custom Hook yaratish va ishlatish misollari:

1. useWindowSize hook:

import { useState, useEffect } from 'react';

function useWindowSize() {
  const [windowSize, setWindowSize] = useState({
    width: undefined,
    height: undefined,
  });

  useEffect(() => {
    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }
    
    window.addEventListener("resize", handleResize);
    handleResize();
    
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return windowSize;
}

// Ishlatish
function MyComponent() {
  const size = useWindowSize();
  return (
    <div>
      {size.width}px / {size.height}px
    </div>
  );
}

2. useLocalStorage hook:

import { useState } from 'react';

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    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);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.log(error);
    }
  };

  return [storedValue, setValue];
}

// Ishlatish
function App() {
  const [name, setName] = useLocalStorage('name', 'Bob');

  return (
    <div>
      <input
        type="text"
        placeholder="Enter your name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
    </div>
  );
}

3. useFetch hook:

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        const json = await response.json();
        setData(json);
        setLoading(false);
      } catch (error) {
        setError(error);
        setLoading(false);
      }
    }
    fetchData();
  }, [url]);

  return { data, loading, error };
}

// Ishlatish
function App() {
  const { data, loading, error } = useFetch('https://api.example.com/data');

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.description}</p>
    </div>
  );
}