M

MLOG

తెలుగు

రియాక్ట్ కస్టమ్ హుక్స్‌ని ఉపయోగించి కాంపోనెంట్ లాజిక్‌ని సంగ్రహించడం, పునర్వినియోగం చేయడం నేర్చుకోండి. ఇది కోడ్ మెయింటైనబిలిటీ, టెస్ట్‌బిలిటీ, అప్లికేషన్ ఆర్కిటెక్చర్‌ని మెరుగుపరుస్తుంది.

రియాక్ట్ కస్టమ్ హుక్స్: పునర్వినియోగం కోసం కాంపోనెంట్ లాజిక్‌ను సంగ్రహించడం

రియాక్ట్ హుక్స్ మనం రియాక్ట్ కాంపోనెంట్స్‌ను వ్రాసే విధానాన్ని విప్లవాత్మకంగా మార్చాయి, స్టేట్ మరియు సైడ్ ఎఫెక్ట్‌లను నిర్వహించడానికి మరింత సుందరమైన మరియు సమర్థవంతమైన మార్గాన్ని అందిస్తాయి. అందుబాటులో ఉన్న వివిధ హుక్స్‌లలో, కస్టమ్ హుక్స్ కాంపోనెంట్ లాజిక్‌ను సంగ్రహించడానికి మరియు పునర్వినియోగం చేయడానికి ఒక శక్తివంతమైన సాధనంగా నిలుస్తాయి. ఈ వ్యాసం రియాక్ట్ కస్టమ్ హుక్స్‌ను అర్థం చేసుకోవడానికి మరియు అమలు చేయడానికి సమగ్ర మార్గదర్శిని అందిస్తుంది, మరింత నిర్వహించదగిన, పరీక్షించదగిన మరియు స్కేలబుల్ అప్లికేషన్‌లను రూపొందించడానికి మీకు శక్తినిస్తుంది.

రియాక్ట్ కస్టమ్ హుక్స్ అంటే ఏమిటి?

సారాంశంలో, కస్టమ్ హుక్ అనేది "use"తో ప్రారంభమయ్యే పేరుతో కూడిన జావాస్క్రిప్ట్ ఫంక్షన్, ఇది ఇతర హుక్స్‌ను కాల్ చేయగలదు. ఇది కాంపోనెంట్ లాజిక్‌ను పునర్వినియోగ ఫంక్షన్‌లలోకి సంగ్రహించడానికి మిమ్మల్ని అనుమతిస్తుంది, తద్వారా కోడ్ నకిలీని తొలగిస్తుంది మరియు పరిశుభ్రమైన కాంపోనెంట్ నిర్మాణాన్ని ప్రోత్సహిస్తుంది. సాధారణ రియాక్ట్ కాంపోనెంట్‌ల వలె కాకుండా, కస్టమ్ హుక్స్ ఎటువంటి UIని రెండర్ చేయవు; అవి కేవలం లాజిక్‌ను ఎన్‌క్యాప్సులేట్ చేస్తాయి.

వాటిని రియాక్ట్ స్టేట్ మరియు లైఫ్‌సైకిల్ ఫీచర్‌లను యాక్సెస్ చేయగల పునర్వినియోగ ఫంక్షన్‌లుగా భావించండి. అవి వివిధ కాంపోనెంట్‌ల మధ్య స్టేట్‌ఫుల్ లాజిక్‌ను పంచుకోవడానికి ఒక అద్భుతమైన మార్గం, తరచుగా చదవడం మరియు నిర్వహించడం కష్టంగా ఉండే కోడ్‌కు దారితీసే హై-ఆర్డర్ కాంపోనెంట్‌లు లేదా రెండర్ ప్రాప్స్‌లను ఆశ్రయించకుండా.

కస్టమ్ హుక్స్‌ను ఎందుకు ఉపయోగించాలి?

కస్టమ్ హుక్స్‌ను ఉపయోగించడం వల్ల అనేక ప్రయోజనాలు ఉన్నాయి:

మీ మొదటి కస్టమ్ హుక్‌ను సృష్టించడం

ప్రాక్టికల్ ఉదాహరణతో కస్టమ్ హుక్‌ను సృష్టించడం మరియు ఉపయోగించడాన్ని వివరిద్దాం: API నుండి డేటాను పొందడం.

ఉదాహరణ: useFetch - డేటా ఫెచింగ్ హుక్

మీ రియాక్ట్ అప్లికేషన్‌లో తరచుగా వివిధ 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 హుక్‌ను ఉపయోగించడం

ఇప్పుడు, ఈ కస్టమ్ హుక్‌ను రియాక్ట్ కాంపోనెంట్‌లో ఎలా ఉపయోగించాలో చూద్దాం:


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>వినియోగదారులను లోడ్ చేస్తోంది...</p>;
  if (error) return <p>లోపం: {error.message}</p>;
  if (!users) return <p>వినియోగదారులు కనుగొనబడలేదు.</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}</p>
      <button onClick={increment}>ఇంక్రిమెంట్</button>
      <button onClick={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>ఇది నా కాంపోనెంట్.</p>
      <button onClick={toggleTheme}>థీమ్‌ను టోగుల్ చేయి</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('దీని కోసం వెతుకుతోంది:', 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="శోధించు..."
    />
  );
}

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('చెల్లని తేదీ');
    }
  }, [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 తేదీ: {enDate}</p>
      <p>ఫ్రెంచ్ తేదీ: {frDate}</p>
      <p>జర్మన్ తేదీ: {deDate}</p>
    </div>
  );
}

export default MyComponent;

ముగింపు

రియాక్ట్ కస్టమ్ హుక్స్ కాంపోనెంట్ లాజిక్‌ను సంగ్రహించడానికి మరియు పునర్వినియోగం చేయడానికి ఒక శక్తివంతమైన మెకానిజం. కస్టమ్ హుక్స్‌ను ఉపయోగించడం ద్వారా, మీరు పరిశుభ్రమైన, మరింత నిర్వహించదగిన మరియు పరీక్షించదగిన కోడ్‌ను వ్రాయవచ్చు. మీరు రియాక్ట్‌తో మరింత నైపుణ్యం సాధించే కొద్దీ, కస్టమ్ హుక్స్‌ను మాస్టర్ చేయడం మీ సంక్లిష్ట మరియు స్కేలబుల్ అప్లికేషన్‌లను రూపొందించే మీ సామర్థ్యాన్ని గణనీయంగా మెరుగుపరుస్తుంది. కస్టమ్ హుక్స్‌ను అభివృద్ధి చేస్తున్నప్పుడు అవి సమర్థవంతంగా మరియు విభిన్న ప్రేక్షకులకు అందుబాటులో ఉండేలా చూసుకోవడానికి ఉత్తమ పద్ధతులను అనుసరించడం మరియు గ్లోబల్ కారకాలను పరిగణనలోకి తీసుకోవడం గుర్తుంచుకోండి. కస్టమ్ హుక్స్ శక్తిని స్వీకరించండి మరియు మీ రియాక్ట్ అభివృద్ధి నైపుణ్యాలను ఉన్నత స్థాయికి పెంచండి!