రియాక్ట్ హుక్స్ మరియు కాంటెక్స్ట్‌తో కోడ్‌ని నిర్వహించడం

పెద్ద-స్థాయి రియాక్ట్ ప్రాజెక్ట్‌లలో పని చేస్తున్నప్పుడు, మెరుగైన నిర్వహణ మరియు స్కేలబిలిటీ కోసం చక్కగా వ్యవస్థీకృత కోడ్‌బేస్ కలిగి ఉండటం చాలా ముఖ్యం.

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

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

రియాక్ట్ హుక్స్ అనేది క్లాస్‌లను ఉపయోగించకుండా స్టేట్ మరియు ఇతర రియాక్ట్ ఫీచర్‌లను ఉపయోగించడానికి మిమ్మల్ని అనుమతించే ఫంక్షన్‌ల సమాహారం. ఇది మరింత సంక్షిప్తంగా మరియు చదవగలిగే కోడ్‌ను వ్రాయడానికి సహాయపడుతుంది. ఉదాహరణకు, ఒక కాంపోనెంట్‌లో స్థితిని నిర్వహించడానికి మనం యూస్‌స్టేట్ హుక్‌ని ఉపయోగించవచ్చు.

ఇక్కడ ఒక ఉదాహరణ:

import React, { useState } from 'react';  
  
function Counter() {  
  const [count, setCount] = useState(0);  
  
  const increment =() => {  
    setCount(count + 1);  
  };  
  
  return( 
    <div>  
      <p>Count: {count}</p>  
      <button onClick={increment}>Increment</button>  
    </div>  
 );  
}  
  
export default Counter;  

పదార్థాల కలయిక

రియాక్ట్ యొక్క ప్రయోజనాల్లో ఒకటి భాగాలను తిరిగి ఉపయోగించగల సామర్థ్యం. సంస్థను పెంచడానికి, పెద్ద భాగాలను నిర్మించడానికి మేము చిన్న భాగాలను ఉపయోగించవచ్చు.

ఇది పనిని విచ్ఛిన్నం చేయడానికి మరియు కోడ్‌ను సులభంగా నిర్వహించడానికి సహాయపడుతుంది. ఉదాహరణకు, మేము <Button> మా అప్లికేషన్‌లోని బహుళ ప్రదేశాలలో ఉపయోగించడానికి ఒక భాగాన్ని సృష్టించవచ్చు:

import React from 'react';  
  
function Button({ onClick, children }) {  
  return <button onClick={onClick}>{children}</button>;  
}  
  
export default Button;  

ప్రపంచ స్థితిని నిర్వహించడానికి సందర్భాన్ని ఉపయోగించడం

కాంటెక్స్ట్ అనేది రియాక్ట్‌లోని మెకానిజం, ఇది పేరెంట్ కాంపోనెంట్‌ల ద్వారా పాస్ చేయకుండా పిల్లల భాగాల మధ్య డేటాను పంచుకోవడానికి మమ్మల్ని అనుమతిస్తుంది. ఇది బహుళ కాంపోనెంట్ స్థాయిలలో డేటా అట్రిబ్యూట్‌లను పాస్ చేయడాన్ని నివారిస్తుంది మరియు కోడ్ సంక్లిష్టతను తగ్గించడంలో సహాయపడుతుంది.

అప్లికేషన్‌లో ప్రస్తుత భాషను భాగస్వామ్యం చేయడానికి సందర్భాన్ని ఉపయోగించే ఉదాహరణ ఇక్కడ ఉంది:

import React, { createContext, useContext, useState } from 'react';  
  
const LanguageContext = createContext();  
  
function App() {  
  const [language, setLanguage] = useState('en');  
  
  const changeLanguage =(newLanguage) => {  
    setLanguage(newLanguage);  
  };  
  
  return( 
    <LanguageContext.Provider value={{ language, changeLanguage }}>  
      <div>  
        <Navbar />  
        <Content />  
      </div>  
    </LanguageContext.Provider>  
 );  
}  
  
function Navbar() {  
  const { language, changeLanguage } = useContext(LanguageContext);  
  
  return( 
    <div>  
      <button onClick={() => changeLanguage('en')}>English</button>  
      <button onClick={() => changeLanguage('fr')}>French</button>  
      <button onClick={() => changeLanguage('es')}>Spanish</button>  
      <p>Current language: {language}</p>  
    </div>  
 );  
}  
  
function Content() {  
  const { language } = useContext(LanguageContext);  
  
  return <p>This is the content in {language}.</p>;  
}  
  
export default App;  

రియాక్ట్ హుక్స్ మరియు కాంటెక్స్ట్‌ని ఉపయోగించి రియాక్ట్ సోర్స్ కోడ్‌ని ఆర్గనైజ్ చేయడానికి పైన కొన్ని ఉత్తమ పద్ధతులు ఉన్నాయి.