M

MLOG

தமிழ்

React custom hooks-ஐப் பயன்படுத்தி component logic-ஐப் பிரித்தெடுத்து மறுபயன்பாடு செய்வது எப்படி என்பதை அறிக. இது code maintainability, testability, மற்றும் application architecture-ஐ மேம்படுத்துகிறது.

React Custom Hooks: மறுபயன்பாட்டிற்கான Component Logic-ஐப் பிரித்தெடுத்தல்

React hooks, React components-ஐ எழுதும் விதத்தில் புரட்சியை ஏற்படுத்தியுள்ளன. state மற்றும் side effects-ஐ நிர்வகிக்க இவை ஒரு சிறந்த மற்றும் திறமையான வழியை வழங்குகின்றன. பல்வேறு hooks-களில், custom hooks component logic-ஐப் பிரித்தெடுத்து மறுபயன்பாடு செய்வதற்கான சக்திவாய்ந்த கருவியாக தனித்து நிற்கின்றன. இந்தக் கட்டுரை React custom hooks-ஐப் புரிந்துகொள்வதற்கும் செயல்படுத்துவதற்கும் ஒரு விரிவான வழிகாட்டியை வழங்குகிறது, மேலும் maintainable, testable, மற்றும் scalable application-களை உருவாக்க உங்களுக்கு அதிகாரம் அளிக்கிறது.

React Custom Hooks என்றால் என்ன?

சுருக்கமாக, ஒரு custom hook என்பது "use" எனத் தொடங்கும் ஒரு JavaScript function ஆகும், மேலும் அது மற்ற hooks-ஐ அழைக்கலாம். இது component logic-ஐ reusable functions-க்குள் பிரித்தெடுக்க அனுமதிக்கிறது, இதனால் code duplication-ஐ அகற்றி, ஒரு சுத்தமான component structure-ஐ ஊக்குவிக்கிறது. வழக்கமான React components-களைப் போலன்றி, custom hooks எந்த UI-யையும் render செய்யாது; அவை logic-ஐ encapsulation மட்டுமே செய்கின்றன.

React state மற்றும் lifecycle features-ஐ அணுகக்கூடிய reusable functions-களாக இவற்றை நினைத்துப் பாருங்கள். higher-order components அல்லது render props-க்குச் செல்லாமல், stateful logic-ஐ வெவ்வேறு components-க்கு இடையே பகிர இவை ஒரு அருமையான வழியாகும், இது பெரும்பாலும் படிக்கவும் maintain செய்யவும் கடினமான code-க்கு வழிவகுக்கும்.

Custom Hooks-ஐ ஏன் பயன்படுத்த வேண்டும்?

Custom hooks-ஐப் பயன்படுத்துவதன் நன்மைகள் பல:

உங்கள் முதல் Custom Hook-ஐ உருவாக்குதல்

ஒரு practical example-உடன் custom hook-ன் உருவாக்கம் மற்றும் பயன்பாட்டை விளக்குவோம்: API-யிலிருந்து data-வைப் பெறுதல்.

Example: useFetch - ஒரு Data Fetching Hook

உங்கள் React application-ல் வெவ்வேறு API-களிலிருந்து data-வைப் பெற வேண்டியிருக்கும் என்று கற்பனை செய்து பாருங்கள். ஒவ்வொரு component-லும் fetch logic-ஐ திரும்பத் திரும்பச் செய்வதற்குப் பதிலாக, நீங்கள் ஒரு 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(() => {
    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); // முந்தைய பிழைகளை அழித்தல்
      } catch (error) {
        if (error.name === 'AbortError') {
          console.log('Fetch aborted');
        } else {
          setError(error);
        }
        setData(null); // முந்தைய data-வை அழித்தல்
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    return () => {
      abortController.abort(); // unmount அல்லது URL மாற்றம் போது fetch-ஐ ரத்து செய்வதற்கான cleanup function
    };
  }, [url]); // URL மாறும் போது effect-ஐ மீண்டும் இயக்குதல்

  return { data, loading, error };
}

export default useFetch;

விளக்கம்:

ஒரு Component-ல் useFetch Hook-ஐப் பயன்படுத்துதல்

இப்போது, இந்த custom hook-ஐ ஒரு React component-ல் எப்படிப் பயன்படுத்துவது என்பதைப் பார்ப்போம்:


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

எளிய data fetching-க்கு அப்பால், custom hooks-ஐ மேலும் சிக்கலான logic-ஐ encapsulation செய்யப் பயன்படுத்தலாம். இதோ சில advanced patterns:

1. useReducer உடன் State Management

மேலும் சிக்கலான state management scenarios-க்கு, நீங்கள் custom hooks-ஐ useReducer உடன் இணைக்கலாம். இது state transitions-ஐ மேலும் predictable மற்றும் organized விதத்தில் நிர்வகிக்க உங்களை அனுமதிக்கிறது.


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;

Usage:


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 உடன் Context Integration

Custom hooks-ஐ React Context-க்கான அணுகலை எளிதாக்கவும் பயன்படுத்தலாம். உங்கள் components-ல் useContext-ஐ நேரடியாகப் பயன்படுத்துவதற்குப் பதிலாக, context access logic-ஐ encapsulation செய்யும் ஒரு custom hook-ஐ நீங்கள் உருவாக்கலாம்.


import { useContext } from 'react';
import { ThemeContext } from './ThemeContext'; // நீங்கள் ஒரு ThemeContext வைத்திருப்பதாகக் கருதுகிறோம்

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

export default useTheme;

Usage:


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 மற்றும் Throttling

Debouncing மற்றும் throttling என்பது ஒரு function execute செய்யப்படும் விகிதத்தைக் கட்டுப்படுத்தப் பயன்படுத்தப்படும் நுட்பங்கள். custom hooks-ஐ இந்த logic-ஐ encapsulation செய்யப் பயன்படுத்தலாம், இதனால் event handlers-க்கு இந்த நுட்பங்களைப் பயன்படுத்துவது எளிதாகிறது.


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;

Usage:


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

function SearchInput() {
  const [searchValue, setSearchValue] = useState('');
  const debouncedSearchValue = useDebounce(searchValue, 500); // 500ms-க்கு Debounce செய்யவும்

  useEffect(() => {
    // debouncedSearchValue உடன் search செய்யவும்
    console.log('Searching for:', debouncedSearchValue);
    // console.log-ஐ உங்கள் உண்மையான search logic-ஆல் மாற்றவும்
  }, [debouncedSearchValue]);

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

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

export default SearchInput;

Custom Hooks எழுதும் சிறந்த நடைமுறைகள்

உங்கள் custom hooks பயனுள்ளதாகவும் maintainable ஆகவும் இருப்பதை உறுதிசெய்ய, இந்தப் சிறந்த நடைமுறைகளைப் பின்பற்றவும்:

Global Considerations

உலகளாவிய பார்வையாளர்களுக்கான application-களை உருவாக்கும்போது, ​​பின்வருவனவற்றைக் கவனத்தில் கொள்ளுங்கள்:

Example: ஒரு Custom Hook உடன் Internationalized Date Formatting


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;

Usage:


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;

Conclusion

React custom hooks, component logic-ஐப் பிரித்தெடுத்து மறுபயன்பாடு செய்வதற்கான ஒரு சக்திவாய்ந்த வழிமுறையாகும். custom hooks-ஐப் பயன்படுத்துவதன் மூலம், நீங்கள் சுத்தமான, மேலும் maintainable, மற்றும் testable code-ஐ எழுதலாம். React-ல் நீங்கள் மேலும் திறமைசாலியாக ஆகும்போது, custom hooks-ஐ மாஸ்டரிங் செய்வது சிக்கலான மற்றும் scalable application-களை உருவாக்கும் உங்கள் திறனை கணிசமாக மேம்படுத்தும். சிறந்த நடைமுறைகளைப் பின்பற்றவும், global factors-ஐக் கருத்தில் கொள்ளவும், இதனால் அவை பல்வேறு பார்வையாளர்களுக்கு பயனுள்ளதாகவும் அணுகக்கூடியதாகவும் இருப்பதை உறுதிப்படுத்தவும். custom hooks-ன் சக்தியை ஏற்றுக்கொண்டு உங்கள் React development திறன்களை மேம்படுத்திக் கொள்ளுங்கள்!