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

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

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

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

કસ્ટમ હુક્સની મુખ્ય લાક્ષણિકતાઓ:

• નામકરણ સંમેલન: કસ્ટમ હુક્સ "use" શબ્દથી શરૂ થવા જોઈએ. આ રિએક્ટને સંકેત આપે છે કે ફંક્શનમાં હુક્સ છે અને તેણે હુક્સના નિયમોનું પાલન કરવું જોઈએ.
• પુનઃઉપયોગીતા: મુખ્ય હેતુ પુનઃઉપયોગી લોજિકને સમાવવાનો છે, જેથી કમ્પોનન્ટ્સ વચ્ચે કાર્યક્ષમતા શેર કરવાનું સરળ બને.
• સ્ટેટફુલ લોજિક: કસ્ટમ હુક્સ useState હુકનો ઉપયોગ કરીને પોતાની સ્ટેટનું સંચાલન કરી શકે છે, જેનાથી તેઓ જટિલ સ્ટેટફુલ વર્તણૂકને સમાવી શકે છે.
• સાઈડ ઈફેક્ટ્સ: તેઓ useEffect હુકનો ઉપયોગ કરીને સાઈડ ઈફેક્ટ્સ પણ કરી શકે છે, જેનાથી બાહ્ય API, ડેટા ફેચિંગ અને વધુ સાથે સંકલન શક્ય બને છે.
• કમ્પોઝેબલ: કસ્ટમ હુક્સ અન્ય હુક્સને કૉલ કરી શકે છે, જેનાથી તમે નાના, વધુ કેન્દ્રિત હુક્સને કંપોઝ કરીને જટિલ લોજિક બનાવી શકો છો.

કસ્ટમ હુક્સ વાપરવાના ફાયદા

કસ્ટમ હુક્સ રિએક્ટ ડેવલપમેન્ટમાં ઘણા નોંધપાત્ર ફાયદાઓ આપે છે:

• કોડની પુનઃઉપયોગીતા: સૌથી સ્પષ્ટ ફાયદો એ છે કે બહુવિધ કમ્પોનન્ટ્સમાં લોજિકનો પુનઃઉપયોગ કરવાની ક્ષમતા. આ કોડ ડુપ્લિકેશન ઘટાડે છે અને વધુ DRY (Don't Repeat Yourself) કોડબેઝને પ્રોત્સાહન આપે છે.
• વધુ સારી વાંચનીયતા: જટિલ લોજિકને અલગ કસ્ટમ હુક્સમાં એક્સટ્રેક્ટ કરવાથી, તમારા કમ્પોનન્ટ્સ સ્વચ્છ અને સમજવામાં સરળ બને છે. મુખ્ય કમ્પોનન્ટ લોજિક UI રેન્ડર કરવા પર કેન્દ્રિત રહે છે.
• ઉન્નત જાળવણીક્ષમતા: જ્યારે લોજિક કસ્ટમ હુક્સમાં સમાયેલું હોય, ત્યારે ફેરફારો અને બગ ફિક્સીસ એક જ સ્થાને લાગુ કરી શકાય છે, જેનાથી બહુવિધ કમ્પોનન્ટ્સમાં ભૂલો દાખલ થવાનું જોખમ ઘટે છે.
• પરીક્ષણક્ષમતા: કસ્ટમ હુક્સને સરળતાથી અલગથી પરીક્ષણ કરી શકાય છે, તે સુનિશ્ચિત કરે છે કે પુનઃઉપયોગી લોજિક તેનો ઉપયોગ કરતા કમ્પોનન્ટ્સથી સ્વતંત્ર રીતે યોગ્ય રીતે કાર્ય કરે છે.
• સરળ કમ્પોનન્ટ્સ: કસ્ટમ હુક્સ કમ્પોનન્ટ્સને અવ્યવસ્થિત કરવામાં મદદ કરે છે, તેમને ઓછા શબ્દાળુ અને તેમના મુખ્ય હેતુ પર વધુ કેન્દ્રિત બનાવે છે.

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

ચાલો આપણે એક વ્યવહારુ ઉદાહરણ સાથે કસ્ટમ હુકની રચનાનું વર્ણન કરીએ: એક હુક જે વિન્ડોના કદને ટ્રેક કરે છે.

ઉદાહરણ: useWindowSize

આ હુક બ્રાઉઝર વિન્ડોની વર્તમાન પહોળાઈ અને ઊંચાઈ પરત કરશે. જ્યારે વિન્ડોનું કદ બદલાશે ત્યારે તે આ મૂલ્યોને પણ અપડેટ કરશે.

import { useState, useEffect } from 'react';

function useWindowSize() {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }

    window.addEventListener('resize', handleResize);

    // ક્લીનઅપ પર ઇવેન્ટ લિસનર દૂર કરો
    return () => window.removeEventListener('resize', handleResize);
  }, []); // ખાલી એરે સુનિશ્ચિત કરે છે કે ઇફેક્ટ ફક્ત માઉન્ટ પર જ ચાલે છે

  return windowSize;
}

export default useWindowSize;

સમજૂતી:

1. જરૂરી હુક્સ ઇમ્પોર્ટ કરો: અમે રિએક્ટમાંથી useState અને useEffect ઇમ્પોર્ટ કરીએ છીએ.
2. હુકને વ્યાખ્યાયિત કરો: અમે નામકરણ સંમેલનનું પાલન કરીને useWindowSize નામનું ફંક્શન બનાવીએ છીએ.
3. સ્ટેટને ઇનિશિયલાઈઝ કરો: અમે useState નો ઉપયોગ કરીને windowSize સ્ટેટને વિન્ડોની પ્રારંભિક પહોળાઈ અને ઊંચાઈ સાથે ઇનિશિયલાઈઝ કરીએ છીએ.
4. ઇવેન્ટ લિસનર સેટ કરો: અમે useEffect નો ઉપયોગ કરીને વિન્ડોમાં રિસાઈઝ ઇવેન્ટ લિસનર ઉમેરીએ છીએ. જ્યારે વિન્ડોનું કદ બદલાય છે, ત્યારે handleResize ફંક્શન windowSize સ્ટેટને અપડેટ કરે છે.
5. ક્લીનઅપ: જ્યારે કમ્પોનન્ટ અનમાઉન્ટ થાય ત્યારે ઇવેન્ટ લિસનરને દૂર કરવા માટે અમે useEffect માંથી ક્લીનઅપ ફંક્શન પરત કરીએ છીએ. આ મેમરી લીકને અટકાવે છે.
6. મૂલ્યો પરત કરો: હુક windowSize ઑબ્જેક્ટ પરત કરે છે, જેમાં વિન્ડોની વર્તમાન પહોળાઈ અને ઊંચાઈ હોય છે.

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

હવે જ્યારે આપણે આપણો કસ્ટમ હુક બનાવી લીધો છે, ચાલો જોઈએ કે તેને રિએક્ટ કમ્પોનન્ટમાં કેવી રીતે ઉપયોગ કરવો.

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

function MyComponent() {
  const { width, height } = useWindowSize();

  return (
    

      
વિન્ડોની પહોળાઈ: {width}px
      
વિન્ડોની ઊંચાઈ: {height}px
    
  );
}

export default MyComponent;

સમજૂતી:

1. હુક ઇમ્પોર્ટ કરો: અમે useWindowSize કસ્ટમ હુક ઇમ્પોર્ટ કરીએ છીએ.
2. હુકને કૉલ કરો: અમે કમ્પોનન્ટની અંદર useWindowSize હુકને કૉલ કરીએ છીએ.
3. મૂલ્યો એક્સેસ કરો: અમે width અને height મૂલ્યો મેળવવા માટે પરત કરેલા ઑબ્જેક્ટને ડિસ્ટ્રક્ચર કરીએ છીએ.
4. મૂલ્યો રેન્ડર કરો: અમે કમ્પોનન્ટના UI માં પહોળાઈ અને ઊંચાઈના મૂલ્યો રેન્ડર કરીએ છીએ.

કોઈપણ કમ્પોનન્ટ જે useWindowSize નો ઉપયોગ કરે છે તે વિન્ડોનું કદ બદલાતા આપમેળે અપડેટ થશે.

વધુ જટિલ ઉદાહરણો

ચાલો કસ્ટમ હુક્સ માટે કેટલાક વધુ અદ્યતન ઉપયોગના કિસ્સાઓ જોઈએ.

ઉદાહરણ: useLocalStorage

આ હુક તમને લોકલ સ્ટોરેજમાંથી સરળતાથી ડેટા સ્ટોર કરવા અને પુનઃપ્રાપ્ત કરવાની મંજૂરી આપે છે.

import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  // આપણું મૂલ્ય સંગ્રહવા માટે સ્ટેટ
  // પ્રારંભિક મૂલ્યને useState માં પાસ કરો જેથી લોજિક ફક્ત એક જ વાર એક્ઝિક્યુટ થાય
  const [storedValue, setStoredValue] = useState(() => {
    try {
      // કી દ્વારા લોકલ સ્ટોરેજમાંથી મેળવો
      const item = window.localStorage.getItem(key);
      // સંગ્રહિત json ને પાર્સ કરો અથવા જો કંઈ ન હોય તો પ્રારંભિક મૂલ્ય પરત કરો
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      // જો ભૂલ હોય તો પણ પ્રારંભિક મૂલ્ય પરત કરો
      console.log(error);
      return initialValue;
    }
  });

  // useState ના સેટર ફંક્શનનું એક રેપ્ડ વર્ઝન પરત કરો જે...
  // ... નવા મૂલ્યને localStorage માં સાચવે છે.
  const setValue = (value) => {
    try {
      // મૂલ્યને ફંક્શન બનવાની મંજૂરી આપો જેથી અમારી પાસે useState જેવો જ API હોય
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      // લોકલ સ્ટોરેજમાં સાચવો
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
      // સ્ટેટ સાચવો
      setStoredValue(valueToStore);
    } catch (error) {
      // વધુ અદ્યતન અમલીકરણ ભૂલના કિસ્સાને હેન્ડલ કરશે
      console.log(error);
    }
  };

  useEffect(() => {
    try {
      const item = window.localStorage.getItem(key);
      setStoredValue(item ? JSON.parse(item) : initialValue);
    } catch (error) {
      console.log(error);
    }
  }, [key, initialValue]);

  return [storedValue, setValue];
}

export default useLocalStorage;

ઉપયોગ:

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

function MyComponent() {
  const [name, setName] = useLocalStorage('name', 'Guest');

  return (
    

      
નમસ્તે, {name}!
       setName(e.target.value)}
      />
    
  );
}

export default MyComponent;

ઉદાહરણ: useFetch

આ હુક API માંથી ડેટા ફેચ કરવા માટેના લોજિકને સમાવે છે.

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);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
        setLoading(false);
      } catch (error) {
        setError(error);
        setLoading(false);
      }
    }

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

ઉપયોગ:

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

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

  if (loading) return 
લોડ થઈ રહ્યું છે...
;
  if (error) return 
ભૂલ: {error.message}
;

  return (
    

      
શીર્ષક: {data.title}
      
પૂર્ણ થયું: {data.completed ? 'હા' : 'ના'}
    
  );
}

export default MyComponent;

કસ્ટમ હુક્સ માટે શ્રેષ્ઠ પ્રથાઓ

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

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

ટાળવા જેવી સામાન્ય ભૂલો

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

અદ્યતન પેટર્ન્સ

કસ્ટમ હુક્સને કંપોઝ કરવું

વધુ જટિલ લોજિક બનાવવા માટે કસ્ટમ હુક્સને એકસાથે કંપોઝ કરી શકાય છે. ઉદાહરણ તરીકે, તમે useLocalStorage હુકને useFetch હુક સાથે જોડી શકો છો જેથી ફેચ કરેલ ડેટાને આપમેળે લોકલ સ્ટોરેજમાં સાચવી શકાય.

હુક્સ વચ્ચે લોજિક શેર કરવું

જો બહુવિધ કસ્ટમ હુક્સ સામાન્ય લોજિક શેર કરે છે, તો તમે તે લોજિકને એક અલગ યુટિલિટી ફંક્શનમાં એક્સટ્રેક્ટ કરી શકો છો અને બંને હુક્સમાં તેનો પુનઃઉપયોગ કરી શકો છો.

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

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

વાસ્તવિક-વિશ્વના ઉદાહરણો

અહીં કેટલાક ઉદાહરણો છે કે વાસ્તવિક-વિશ્વની એપ્લિકેશન્સમાં કસ્ટમ હુક્સનો ઉપયોગ કેવી રીતે કરી શકાય:

• ફોર્મ વેલિડેશન: ફોર્મ સ્ટેટ, વેલિડેશન અને સબમિશનને હેન્ડલ કરવા માટે useForm હુક બનાવો.
• ઓથેન્ટિકેશન: વપરાશકર્તા ઓથેન્ટિકેશન અને ઓથોરાઇઝેશનનું સંચાલન કરવા માટે useAuth હુકનો અમલ કરો.
• થીમ મેનેજમેન્ટ: વિવિધ થીમ્સ (લાઇટ, ડાર્ક, વગેરે) વચ્ચે સ્વિચ કરવા માટે useTheme હુક વિકસાવો.
• જીઓલોકેશન: વપરાશકર્તાના વર્તમાન સ્થાનને ટ્રેક કરવા માટે useGeolocation હુક બનાવો.
• સ્ક્રોલ ડિટેક્શન: વપરાશકર્તાએ પેજ પર ચોક્કસ બિંદુ સુધી સ્ક્રોલ કર્યું છે તે શોધવા માટે useScroll હુક બનાવો.

ઉદાહરણ : મેપિંગ અથવા ડિલિવરી સેવાઓ જેવી ક્રોસ-કલ્ચરલ એપ્લિકેશન્સ માટે useGeolocation હુક

import { useState, useEffect } from 'react';

function useGeolocation() {
  const [location, setLocation] = useState({
    latitude: null,
    longitude: null,
    error: null,
  });

  useEffect(() => {
    if (!navigator.geolocation) {
      setLocation({
        latitude: null,
        longitude: null,
        error: 'આ બ્રાઉઝર દ્વારા જીઓલોકેશન સપોર્ટેડ નથી.',
      });
      return;
    }

    const watchId = navigator.geolocation.watchPosition(
      (position) => {
        setLocation({
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
          error: null,
        });
      },
      (error) => {
        setLocation({
          latitude: null,
          longitude: null,
          error: error.message,
        });
      }
    );

    return () => navigator.geolocation.clearWatch(watchId);
  }, []);

  return location;
}

export default useGeolocation;

નિષ્કર્ષ

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

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

શ્રેષ્ઠ પ્રથાઓનું પાલન કરવાનું, સામાન્ય ભૂલો ટાળવાનું અને કસ્ટમ હુક્સમાંથી સૌથી વધુ મેળવવા માટે અદ્યતન પેટર્ન્સની શોધ કરવાનું યાદ રાખો. પ્રેક્ટિસ અને અનુભવ સાથે, તમે કસ્ટમ હુક્સના માસ્ટર અને વધુ અસરકારક રિએક્ટ ડેવલપર બનશો.