M

MLOG

മലയാളം

കോഡ് മെയിന്റനബിലിറ്റി, ടെസ്റ്റബിലിറ്റി, മൊത്തത്തിലുള്ള ആപ്ലിക്കേഷൻ ആർക്കിടെക്ചർ എന്നിവ മെച്ചപ്പെടുത്തി, കോമ്പോണന്റ് ലോജിക് എക്‌സ്‌ട്രാക്റ്റ് ചെയ്യാനും വീണ്ടും ഉപയോഗിക്കാനും React കസ്റ്റം ഹുക്കുകൾ എങ്ങനെ ഉപയോഗിക്കാമെന്ന് മനസിലാക്കുക.

React കസ്റ്റം ഹുക്കുകൾ: വീണ്ടും ഉപയോഗിക്കാനായി കോമ്പോണന്റ് ലോജിക് എക്‌സ്‌ട്രാക്റ്റ് ചെയ്യുക

React ഹുക്കുകൾ നമ്മൾ React കോമ്പോണന്റുകൾ എഴുതുന്ന രീതിയിൽ വിപ്ലവം സൃഷ്ടിച്ചു, സ്റ്റേറ്റും സൈഡ് ഇഫക്റ്റുകളും കൈകാര്യം ചെയ്യാൻ കൂടുതൽ മികച്ചതും കാര്യക്ഷമവുമായ മാർഗ്ഗം വാഗ്ദാനം ചെയ്യുന്നു. ലഭ്യമായ വിവിധ ഹുക്കുകളിൽ, കോമ്പോണന്റ് ലോജിക് എക്‌സ്‌ട്രാക്റ്റ് ചെയ്യാനും വീണ്ടും ഉപയോഗിക്കാനും കഴിയുന്ന ശക്തമായ ഒരു ടൂളായി കസ്റ്റം ഹുക്കുകൾ വേറിട്ടുനിൽക്കുന്നു. React കസ്റ്റം ഹുക്കുകൾ മനസ്സിലാക്കുന്നതിനും നടപ്പിലാക്കുന്നതിനുമുള്ള ഒരു സമഗ്ര ഗൈഡ് ഈ ലേഖനം നൽകുന്നു, ഇത് കൂടുതൽ മെയിന്റനബിൾ, ടെസ്റ്റ് ചെയ്യാവുന്നതും, സ്കേലബിളുമായ ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കാൻ നിങ്ങളെ സഹായിക്കുന്നു.

എന്താണ് React കസ്റ്റം ഹുക്കുകൾ?

ഒരു കസ്റ്റം ഹുക്ക് എന്നത് അടിസ്ഥാനപരമായി "use" എന്ന് പേര് ആരംഭിക്കുന്ന ഒരു JavaScript ഫംഗ്‌ഷനാണ്, കൂടാതെ മറ്റ് ഹുക്കുകളെ വിളിക്കാനും കഴിയും. കോമ്പോണന്റ് ലോജിക് വീണ്ടും ഉപയോഗിക്കാവുന്ന ഫംഗ്‌ഷനുകളിലേക്ക് എക്‌സ്‌ട്രാക്റ്റ് ചെയ്യാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു, അതുവഴി കോഡ് ഡ്യൂപ്ലിക്കേഷൻ ഇല്ലാതാക്കുകയും കൂടുതൽ നല്ല കോമ്പോണന്റ് ഘടന പ്രോത്സാഹിപ്പിക്കുകയും ചെയ്യുന്നു. സാധാരണ React കോമ്പോണന്റുകളിൽ നിന്ന് വ്യത്യസ്തമായി, കസ്റ്റം ഹുക്കുകൾ UI റെൻഡർ ചെയ്യുന്നില്ല; അവ ലളിതമായി ലോജിക് എൻ‌കാപ്‌സുലേറ്റ് ചെയ്യുന്നു.

React സ്റ്റേറ്റിലേക്കും ലൈഫ് സൈക്കിൾ ഫീച്ചറുകളിലേക്കും ആക്സസ് ചെയ്യാൻ കഴിയുന്ന വീണ്ടും ഉപയോഗിക്കാവുന്ന ഫംഗ്ഷനുകളായി ഇതിനെ കണക്കാക്കുക. ഉയർന്ന ഓർഡർ കോമ്പോണന്റുകളോ റെൻഡർ പ്രോപ്പുകളോ ഉപയോഗിക്കാതെ തന്നെ വ്യത്യസ്ത കോമ്പോണന്റുകൾക്കിടയിൽ സ്റ്റേറ്റ്ഫുൾ ലോജിക് പങ്കിടാനുള്ള മികച്ച മാർഗമാണിത്, ഇത് പലപ്പോഴും വായിക്കാനും മെയിന്റൈൻ ചെയ്യാനും ബുദ്ധിമുട്ടുള്ള കോഡിലേക്ക് നയിച്ചേക്കാം.

എന്തുകൊണ്ട് കസ്റ്റം ഹുക്കുകൾ ഉപയോഗിക്കണം?

കസ്റ്റം ഹുക്കുകൾ ഉപയോഗിക്കുന്നതിന്റെ നിരവധി ഗുണങ്ങളുണ്ട്:

നിങ്ങളുടെ ആദ്യ കസ്റ്റം ഹുക്ക് ഉണ്ടാക്കുക

ഒരു പ്രാക്ടിക്കൽ ഉദാഹരണത്തിലൂടെ ഒരു കസ്റ്റം ഹുക്കിന്റെ നിർമ്മാണവും ഉപയോഗവും നമുക്ക് വിശദീകരിക്കാം: ഒരു API-യിൽ നിന്ന് ഡാറ്റ ഫെച്ച് ചെയ്യുന്നു.

ഉദാഹരണം: useFetch - ഒരു ഡാറ്റ ഫെച്ചിംഗ് ഹുക്ക്

നിങ്ങളുടെ React ആപ്ലിക്കേഷനിൽ വ്യത്യസ്ത API-കളിൽ നിന്ന് ഡാറ്റ ഫെച്ച് ചെയ്യേണ്ടതുണ്ടെന്ന് കരുതുക. ഓരോ കോമ്പോണന്റിലും ഫെച്ച് ലോജിക് ആവർത്തിക്കുന്നതിനുപകരം, നിങ്ങൾക്ക് ഒരു 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 ഹുക്ക് ഉപയോഗിക്കുന്നു

ഇനി, ഈ കസ്റ്റം ഹുക്ക് ഒരു React കോമ്പോണന്റിൽ എങ്ങനെ ഉപയോഗിക്കാമെന്ന് നോക്കാം:


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;

വിശദീകരണം:

Advanced Custom Hook Patterns

ലളിതമായ ഡാറ്റ ഫെച്ചിംഗിന് പുറമെ, കൂടുതൽ സങ്കീർണ്ണമായ ലോജിക് എൻ‌കാപ്‌സുലേറ്റ് ചെയ്യാൻ കസ്റ്റം ഹുക്കുകൾ ഉപയോഗിക്കാം. ചില അഡ്വാൻസ്ഡ് പാറ്റേണുകൾ ഇതാ:

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 ഉപയോഗിച്ചുള്ള കോൺടെക്സ്റ്റ് ഇന്റഗ്രേഷൻ

React കോൺടെക്സ്റ്റിലേക്കുള്ള ആക്സസ് ലളിതമാക്കാനും കസ്റ്റം ഹുക്കുകൾ ഉപയോഗിക്കാം. നിങ്ങളുടെ കോമ്പോണന്റുകളിൽ useContext നേരിട്ട് ഉപയോഗിക്കുന്നതിനുപകരം, കോൺടെക്സ്റ്റ് ആക്സസ് ലോജിക് എൻ‌കാപ്‌സുലേറ്റ് ചെയ്യുന്ന ഒരു കസ്റ്റം ഹുക്ക് നിങ്ങൾക്ക് ഉണ്ടാക്കാം.


import { useContext } from 'react';
import { ThemeContext } from './ThemeContext'; // 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. Debouncing and Throttling

Debouncing, throttling എന്നിവ ഒരു ഫംഗ്‌ഷൻ എക്സിക്യൂട്ട് ചെയ്യുന്ന നിരക്ക് നിയന്ത്രിക്കാൻ ഉപയോഗിക്കുന്ന ടെക്നിക്കുകളാണ്. ഇവന്റ് ഹാൻഡിലറുകളിൽ ഈ ടെക്നിക്കുകൾ എളുപ്പത്തിൽ പ്രയോഗിക്കാൻ കഴിയുന്ന കസ്റ്റം ഹുക്കുകൾ ഉപയോഗിച്ച് ഈ ലോജിക് എൻ‌കാപ്‌സുലേറ്റ് ചെയ്യാനാകും.


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); // 500ms-ൽ debounce ചെയ്യുന്നു

  useEffect(() => {
    // debouncedSearchValue ഉപയോഗിച്ച് തിരയൽ നടത്തുക
    console.log('Searching for:', debouncedSearchValue);
    // നിങ്ങളുടെ യഥാർത്ഥ തിരയൽ ലോജിക് ഉപയോഗിച്ച് console.log മാറ്റിസ്ഥാപിക്കുക
  }, [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;

ഉപസംഹാരം

React കസ്റ്റം ഹുക്കുകൾ കോമ്പോണന്റ് ലോജിക് എക്‌സ്‌ട്രാക്‌റ്റ് ചെയ്യുന്നതിനും വീണ്ടും ഉപയോഗിക്കുന്നതിനുമുള്ള ശക്തമായ ഒരു മെക്കാനിസമാണ്. കസ്റ്റം ഹുക്കുകൾ ഉപയോഗിച്ച്, നിങ്ങൾക്ക് വൃത്തിയുള്ളതും കൂടുതൽ മെയിന്റനബിളും ടെസ്റ്റ് ചെയ്യാവുന്നതുമായ കോഡ് എഴുതാൻ കഴിയും. React-ൽ നിങ്ങൾ കൂടുതൽ പ്രാവീണ്യം നേടുന്നതിനനുസരിച്ച്, കസ്റ്റം ഹുക്കുകൾ പഠിക്കുന്നത് സങ്കീർണ്ണവും സ്കേലബിളുമായ ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കാനുള്ള നിങ്ങളുടെ കഴിവിനെ ഗണ്യമായി മെച്ചപ്പെടുത്തും. മികച്ച രീതികൾ പിന്തുടരാനും, കസ്റ്റം ഹുക്കുകൾ വികസിപ്പിക്കുമ്പോൾ ആഗോള ഘടകങ്ങൾ പരിഗണിക്കാനും ഓർമ്മിക്കുക, അതുവഴി അവ വൈവിധ്യമാർന്ന പ്രേക്ഷകർക്ക് ഫലപ്രദവും ആക്സസ് ചെയ്യാവുന്നതുമാണ്. കസ്റ്റം ഹുക്കുകളുടെ ശക്തി സ്വീകരിക്കുക, നിങ്ങളുടെ React ഡെവലപ്‌മെന്റ് കഴിവുകൾ ഉയർത്തുക!