M

MLOG

ગુજરાતી

રીએક્ટ કસ્ટમ હુક્સનો ઉપયોગ કરીને કમ્પોનન્ટ લોજિકને કેવી રીતે નિષ્કર્ષિત અને પુનઃઉપયોગ કરવું તે શીખો, જેનાથી કોડની જાળવણી, પરીક્ષણક્ષમતા અને એપ્લિકેશન આર્કિટેક્ચર સુધરે છે.

રીએક્ટ કસ્ટમ હુક્સ: પુનઃઉપયોગીતા માટે કમ્પોનન્ટ લોજિકનું નિષ્કર્ષણ

રીએક્ટ હુક્સે રીએક્ટ કમ્પોનન્ટ્સ લખવાની રીતમાં ક્રાંતિ લાવી છે, જે સ્ટેટ અને સાઇડ ઇફેક્ટ્સનું સંચાલન કરવાની વધુ ભવ્ય અને કાર્યક્ષમ રીત પ્રદાન કરે છે. ઉપલબ્ધ વિવિધ હુક્સ પૈકી, કસ્ટમ હુક્સ કમ્પોનન્ટ લોજિકને નિષ્કર્ષિત કરવા અને પુનઃઉપયોગ કરવા માટેના એક શક્તિશાળી સાધન તરીકે ઉભરી આવે છે. આ લેખ રીએક્ટ કસ્ટમ હુક્સને સમજવા અને અમલમાં મૂકવા માટે એક વ્યાપક માર્ગદર્શિકા પ્રદાન કરે છે, જે તમને વધુ જાળવણીક્ષમ, પરીક્ષણક્ષમ અને સ્કેલેબલ એપ્લિકેશન્સ બનાવવામાં સક્ષમ બનાવે છે.

રીએક્ટ કસ્ટમ હુક્સ શું છે?

સારમાં, કસ્ટમ હૂક એક જાવાસ્ક્રિપ્ટ ફંક્શન છે જેનું નામ "use" થી શરૂ થાય છે અને અન્ય હુક્સને કૉલ કરી શકે છે. તે તમને કમ્પોનન્ટ લોજિકને પુનઃઉપયોગી ફંક્શન્સમાં નિષ્કર્ષિત કરવાની મંજૂરી આપે છે, જેનાથી કોડ ડુપ્લિકેશન દૂર થાય છે અને સ્વચ્છ કમ્પોનન્ટ સ્ટ્રક્ચરને પ્રોત્સાહન મળે છે. નિયમિત રીએક્ટ કમ્પોનન્ટ્સથી વિપરીત, કસ્ટમ હુક્સ કોઈ UI રેન્ડર કરતા નથી; તેઓ ફક્ત લોજિકને સમાવે છે.

તેમને પુનઃઉપયોગી ફંક્શન્સ તરીકે વિચારો જે રીએક્ટ સ્ટેટ અને લાઇફસાઇકલ સુવિધાઓને ઍક્સેસ કરી શકે છે. તેઓ વિવિધ કમ્પોનન્ટ્સ વચ્ચે સ્ટેટફુલ લોજિક શેર કરવાની એક અદ્ભુત રીત છે, જેમાં હાયર-ઓર્ડર કમ્પોનન્ટ્સ અથવા રેન્ડર પ્રોપ્સનો આશ્રય લીધા વિના, જે ઘણીવાર વાંચવા અને જાળવવા મુશ્કેલ કોડ તરફ દોરી શકે છે.

કસ્ટમ હુક્સનો ઉપયોગ શા માટે કરવો?

કસ્ટમ હુક્સનો ઉપયોગ કરવાના ફાયદા અસંખ્ય છે:

તમારો પ્રથમ કસ્ટમ હૂક બનાવવો

ચાલો એક વ્યવહારિક ઉદાહરણ સાથે કસ્ટમ હૂક બનાવટ અને ઉપયોગનું વર્ણન કરીએ: API માંથી ડેટા મેળવવો.

ઉદાહરણ: useFetch - ડેટા ફેચિંગ હૂક

કલ્પના કરો કે તમારે તમારી રીએક્ટ એપ્લિકેશનમાં વારંવાર વિવિધ APIs માંથી ડેટા મેળવવાની જરૂર છે. દરેક કમ્પોનન્ટમાં ફેચ લોજિકનું પુનરાવર્તન કરવાને બદલે, તમે એક useFetch હૂક બનાવી શકો છો.


import { useState, useEffect } from 'react';

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

  useEffect(() => {
    const abortController = new AbortController();
    const signal = abortController.signal;

    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch(url, { signal: signal });
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
        setError(null); // Clear any previous errors
      } catch (error) {
        if (error.name === 'AbortError') {
          console.log('Fetch aborted');
        } else {
          setError(error);
        }
        setData(null); // Clear any previous data
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    return () => {
      abortController.abort(); // Cleanup function to abort the fetch on unmount or URL change
    };
  }, [url]); // Re-run effect when the URL changes

  return { data, loading, error };
}

export default useFetch;

સમજૂતી:

કમ્પોનન્ટમાં useFetch હૂકનો ઉપયોગ કરવો

હવે, ચાલો જોઈએ કે આ કસ્ટમ હૂકનો રીએક્ટ કમ્પોનન્ટમાં કેવી રીતે ઉપયોગ કરવો:


import React from 'react';
import useFetch from './useFetch';

function UserList() {
  const { data: users, loading, error } = useFetch('https://jsonplaceholder.typicode.com/users');

  if (loading) return <p>Loading users...</p>;
  if (error) return <p>Error: {error.message}</p>;
  if (!users) return <p>No users found.</p>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name} ({user.email})</li>
      ))}
    </ul>
  );
}

export default UserList;

સમજૂતી:

એડવાન્સ્ડ કસ્ટમ હૂક પેટર્ન

સામાન્ય ડેટા ફેચિંગ ઉપરાંત, કસ્ટમ હુક્સનો ઉપયોગ વધુ જટિલ લોજિકને સમાવવા માટે થઈ શકે છે. અહીં કેટલીક એડવાન્સ્ડ પેટર્ન આપેલી છે:

1. useReducer સાથે સ્ટેટ મેનેજમેન્ટ

વધુ જટિલ સ્ટેટ મેનેજમેન્ટ પરિસ્થિતિઓ માટે, તમે કસ્ટમ હુક્સને useReducer સાથે જોડી શકો છો. આ તમને વધુ અનુમાનિત અને વ્યવસ્થિત રીતે સ્ટેટ ટ્રાન્ઝિશનનું સંચાલન કરવાની મંજૂરી આપે છે.


import { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function useCounter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  const increment = () => dispatch({ type: 'increment' });
  const decrement = () => dispatch({ type: 'decrement' });

  return { count: state.count, increment, decrement };
}

export default useCounter;

ઉપયોગ:


import React from 'react';
import useCounter from './useCounter';

function Counter() {
  const { count, increment, decrement } = useCounter();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default Counter;

2. useContext સાથે કન્ટેક્સ્ટ ઇન્ટિગ્રેશન

કસ્ટમ હુક્સનો ઉપયોગ રીએક્ટ કન્ટેક્સ્ટ સુધી પહોંચને સરળ બનાવવા માટે પણ કરી શકાય છે. તમારા કમ્પોનન્ટ્સમાં સીધા useContext નો ઉપયોગ કરવાને બદલે, તમે એક કસ્ટમ હૂક બનાવી શકો છો જે કન્ટેક્સ્ટ ઍક્સેસ લોજિકને સમાવે છે.


import { useContext } from 'react';
import { ThemeContext } from './ThemeContext'; // Assuming you have a ThemeContext

function useTheme() {
  return useContext(ThemeContext);
}

export default useTheme;

ઉપયોગ:


import React from 'react';
import useTheme from './useTheme';

function MyComponent() {
  const { theme, toggleTheme } = useTheme();

  return (
    <div style={{ backgroundColor: theme.background, color: theme.color }}>
      <p>This is my component.</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

export default MyComponent;

3. ડીબાઉન્સિંગ અને થ્રોટલિંગ

ડીબાઉન્સિંગ અને થ્રોટલિંગ એ એવી તકનીકો છે જેનો ઉપયોગ ફંક્શનને અમલમાં મૂકવાના દરને નિયંત્રિત કરવા માટે થાય છે. કસ્ટમ હુક્સનો ઉપયોગ આ લોજિકને સમાવવા માટે કરી શકાય છે, જેનાથી ઇવેન્ટ હેન્ડલર્સમાં આ તકનીકોને લાગુ પાડવી સરળ બને છે.


import { useState, useEffect, useRef } from 'react';

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

export default useDebounce;

ઉપયોગ:


import React, { useState } from 'react';
import useDebounce from './useDebounce';

function SearchInput() {
  const [searchValue, setSearchValue] = useState('');
  const debouncedSearchValue = useDebounce(searchValue, 500); // Debounce for 500ms

  useEffect(() => {
    // Perform search with debouncedSearchValue
    console.log('Searching for:', debouncedSearchValue);
    // Replace console.log with your actual search logic
  }, [debouncedSearchValue]);

  const handleChange = (event) => {
    setSearchValue(event.target.value);
  };

  return (
    <input
      type="text"
      value={searchValue}
      onChange={handleChange}
      placeholder="Search..."
    />
  );
}

export default SearchInput;

કસ્ટમ હુક્સ લખવા માટેની શ્રેષ્ઠ પદ્ધતિઓ

તમારા કસ્ટમ હુક્સ અસરકારક અને જાળવણીક્ષમ છે તેની ખાતરી કરવા માટે, આ શ્રેષ્ઠ પદ્ધતિઓનું પાલન કરો:

વૈશ્વિક વિચારણાઓ

વૈશ્વિક પ્રેક્ષકો માટે એપ્લિકેશન્સ વિકસાવતી વખતે, નીચેની બાબતો ધ્યાનમાં રાખો:

ઉદાહરણ: કસ્ટમ હૂક સાથે આંતરરાષ્ટ્રીયકૃત તારીખ ફોર્મેટિંગ


import { useState, useEffect } from 'react';
import { DateTimeFormat } from 'intl';

function useFormattedDate(date, locale) {
  const [formattedDate, setFormattedDate] = useState('');

  useEffect(() => {
    try {
      const formatter = new DateTimeFormat(locale, {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
      });
      setFormattedDate(formatter.format(date));
    } catch (error) {
      console.error('Error formatting date:', error);
      setFormattedDate('Invalid Date');
    }
  }, [date, locale]);

  return formattedDate;
}

export default useFormattedDate;

ઉપયોગ:


import React from 'react';
import useFormattedDate from './useFormattedDate';

function MyComponent() {
  const today = new Date();
  const enDate = useFormattedDate(today, 'en-US');
  const frDate = useFormattedDate(today, 'fr-FR');
  const deDate = useFormattedDate(today, 'de-DE');

  return (
    <div>
      <p>US Date: {enDate}</p>
      <p>French Date: {frDate}</p>
      <p>German Date: {deDate}</p>
    </div>
  );
}

export default MyComponent;

નિષ્કર્ષ

રીએક્ટ કસ્ટમ હુક્સ કમ્પોનન્ટ લોજિકને નિષ્કર્ષિત કરવા અને પુનઃઉપયોગ કરવા માટે એક શક્તિશાળી પદ્ધતિ છે. કસ્ટમ હુક્સનો લાભ લઈને, તમે સ્વચ્છ, વધુ જાળવણીક્ષમ અને પરીક્ષણક્ષમ કોડ લખી શકો છો. જેમ જેમ તમે રીએક્ટમાં વધુ નિપુણ બનશો, તેમ તેમ કસ્ટમ હુક્સમાં નિપુણતા મેળવવાથી જટિલ અને સ્કેલેબલ એપ્લિકેશન્સ બનાવવાની તમારી ક્ષમતામાં નોંધપાત્ર સુધારો થશે. યાદ રાખો કે શ્રેષ્ઠ પદ્ધતિઓનું પાલન કરો અને કસ્ટમ હુક્સ વિકસાવતી વખતે વૈશ્વિક પરિબળોને ધ્યાનમાં લો જેથી તેઓ વૈવિધ્યસભર પ્રેક્ષકો માટે અસરકારક અને સુલભ હોય. કસ્ટમ હુક્સની શક્તિને અપનાવો અને તમારી રીએક્ટ ડેવલપમેન્ટ કુશળતાને ઉન્નત કરો!