రియాక్ట్ కాంపోనెంట్ ఆర్కిటెక్చర్: ఇన్హెరిటెన్స్ కంటే కంపోజిషన్ ఎందుకు ఉత్తమం

సాఫ్ట్‌వేర్ డెవలప్‌మెంట్ ప్రపంచంలో, ఆర్కిటెక్చర్ చాలా ముఖ్యమైనది. మనం మన కోడ్‌ను ఎలా నిర్మిస్తామనేది దాని స్కేలబిలిటీ, మెయింటెనబిలిటీ మరియు పునర్వినియోగతను నిర్ణయిస్తుంది. రియాక్ట్‌తో పనిచేసే డెవలపర్‌ల కోసం, కాంపోనెంట్‌ల మధ్య లాజిక్ మరియు UIని ఎలా పంచుకోవాలనే దాని చుట్టూ అత్యంత ప్రాథమిక నిర్మాణ నిర్ణయాలలో ఒకటి తిరుగుతుంది. ఇది ఆబ్జెక్ట్-ఓరియెంటెడ్ ప్రోగ్రామింగ్‌లోని ఒక క్లాసిక్ చర్చకు మనల్ని తీసుకువస్తుంది, ఇది రియాక్ట్ యొక్క కాంపోనెంట్-ఆధారిత ప్రపంచం కోసం పునర్నిర్మించబడింది: కంపోజిషన్ వర్సెస్ ఇన్హెరిటెన్స్.

మీరు జావా లేదా C++ వంటి క్లాసికల్ ఆబ్జెక్ట్-ఓరియెంటెడ్ భాషల నేపథ్యం నుండి వచ్చినట్లయితే, ఇన్హెరిటెన్స్ ఒక సహజమైన మొదటి ఎంపికగా అనిపించవచ్చు. ఇది 'is-a' సంబంధాలను సృష్టించడానికి ఒక శక్తివంతమైన భావన. అయితే, అధికారిక రియాక్ట్ డాక్యుమెంటేషన్ స్పష్టమైన మరియు బలమైన సిఫార్సును అందిస్తుంది: "ఫేస్‌బుక్‌లో, మేము వేలాది కాంపోనెంట్‌లలో రియాక్ట్‌ను ఉపయోగిస్తాము, మరియు కాంపోనెంట్ ఇన్హెరిటెన్స్ హైరార్కీలను సృష్టించాలని మేము సిఫార్సు చేసే ఏ ఉపయోగ సందర్భాలను మేము కనుగొనలేదు."

ఈ పోస్ట్ ఈ నిర్మాణ ఎంపిక యొక్క సమగ్ర అన్వేషణను అందిస్తుంది. రియాక్ట్ సందర్భంలో ఇన్హెరిటెన్స్ మరియు కంపోజిషన్ అంటే ఏమిటో మేము వివరిస్తాము, కంపోజిషన్ ఎందుకు ఇడియోమాటిక్ మరియు ఉన్నతమైన విధానమో ప్రదర్శిస్తాము, మరియు ప్రపంచ ప్రేక్షకుల కోసం దృఢమైన మరియు ఫ్లెక్సిబుల్ అప్లికేషన్‌లను రూపొందించడానికి కంపోజిషన్‌ను డెవలపర్ యొక్క ఉత్తమ స్నేహితుడిగా మార్చే శక్తివంతమైన పద్ధతులను—హైయర్-ఆర్డర్ కాంపోనెంట్స్ నుండి ఆధునిక హుక్స్ వరకు—అన్వేషిస్తాము.

పాత పద్ధతిని అర్థం చేసుకోవడం: ఇన్హెరిటెన్స్ అంటే ఏమిటి?

ఇన్హెరిటెన్స్ అనేది ఆబ్జెక్ట్-ఓరియెంటెడ్ ప్రోగ్రామింగ్ (OOP) యొక్క ప్రధాన స్తంభం. ఇది ఒక కొత్త క్లాస్ (సబ్‌క్లాస్ లేదా చైల్డ్) ఇప్పటికే ఉన్న క్లాస్ (సూపర్‌క్లాస్ లేదా పేరెంట్) యొక్క లక్షణాలు మరియు పద్ధతులను పొందడానికి అనుమతిస్తుంది. ఇది గట్టిగా ముడిపడిన 'is-a' సంబంధాన్ని సృష్టిస్తుంది. ఉదాహరణకు, ఒక GoldenRetriever అనేది ఒక Dog, అది ఒక Animal.

రియాక్ట్-యేతర సందర్భంలో ఇన్హెరిటెన్స్

ఈ భావనను పటిష్టం చేయడానికి ఒక సాధారణ జావాస్క్రిప్ట్ క్లాస్ ఉదాహరణను చూద్దాం:

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // పేరెంట్ కన్స్ట్రక్టర్‌ను పిలుస్తుంది
    this.breed = breed;
  }

  speak() { // పేరెంట్ పద్ధతిని ఓవర్‌రైడ్ చేస్తుంది
    console.log(`${this.name} barks.`);
  }

  fetch() {
    console.log(`${this.name} is fetching the ball!`);
  }
}

const myDog = new Dog('Buddy', 'Golden Retriever');
myDog.speak(); // అవుట్‌పుట్: "Buddy barks."
myDog.fetch(); // అవుట్‌పుట్: "Buddy is fetching the ball!"

ఈ నమూనాలో, Dog క్లాస్ Animal నుండి name ప్రాపర్టీ మరియు speak పద్ధతిని స్వయంచాలకంగా పొందుతుంది. ఇది దాని స్వంత పద్ధతులను (fetch) కూడా జోడించగలదు మరియు ఇప్పటికే ఉన్న వాటిని ఓవర్‌రైడ్ చేయగలదు. ఇది ఒక కఠినమైన హైరార్కీని సృష్టిస్తుంది.

రియాక్ట్‌లో ఇన్హెరిటెన్స్ ఎందుకు విఫలమవుతుంది

ఈ 'is-a' నమూనా కొన్ని డేటా నిర్మాణాలకు పనిచేసినప్పటికీ, రియాక్ట్‌లోని UI కాంపోనెంట్‌లకు వర్తింపజేసినప్పుడు ఇది గణనీయమైన సమస్యలను సృష్టిస్తుంది:

• గట్టి అనుసంధానం (Tight Coupling): ఒక కాంపోనెంట్ బేస్ కాంపోనెంట్ నుండి ఇన్హెరిట్ అయినప్పుడు, అది దాని పేరెంట్ ఇంప్లిమెంటేషన్‌తో గట్టిగా ముడిపడి ఉంటుంది. బేస్ కాంపోనెంట్‌లో మార్పు అనుకోకుండా చైన్‌లో ఉన్న బహుళ చైల్డ్ కాంపోనెంట్‌లను బ్రేక్ చేయగలదు. ఇది రీఫ్యాక్టరింగ్ మరియు నిర్వహణను ఒక సున్నితమైన ప్రక్రియగా చేస్తుంది.
• అనమ్యమైన లాజిక్ షేరింగ్ (Inflexible Logic Sharing): డేటా ఫెచింగ్ వంటి ఒక నిర్దిష్ట కార్యాచరణను ఒకే 'is-a' హైరార్కీకి సరిపోని కాంపోనెంట్‌లతో పంచుకోవాలంటే ఏమిటి? ఉదాహరణకు, ఒక UserProfile మరియు ఒక ProductList రెండింటికీ డేటాను ఫెచ్ చేయవలసి రావచ్చు, కానీ అవి ఒక సాధారణ DataFetchingComponent నుండి ఇన్హెరిట్ అవ్వడంలో అర్థం లేదు.
• ప్రాప్-డ్రిల్లింగ్ హెల్ (Prop-Drilling Hell): లోతైన ఇన్హెరిటెన్స్ చైన్‌లో, టాప్-లెవల్ కాంపోనెంట్ నుండి లోతుగా ఉన్న చైల్డ్ వరకు ప్రాప్స్‌ను పాస్ చేయడం కష్టం అవుతుంది. మీరు మధ్యంతర కాంపోనెంట్‌ల ద్వారా వాటిని ఉపయోగించని ప్రాప్స్‌ను కూడా పాస్ చేయవలసి రావచ్చు, ఇది గందరగోళంగా మరియు ఉబ్బిన కోడ్‌కు దారితీస్తుంది.
• "గొరిల్లా-అరటిపండు సమస్య": OOP నిపుణుడు జో ఆర్మ్‌స్ట్రాంగ్ నుండి ఒక ప్రసిద్ధ కోట్ ఈ సమస్యను సంపూర్ణంగా వివరిస్తుంది: "మీకు ఒక అరటిపండు కావాలి, కానీ మీకు లభించింది అరటిపండును పట్టుకున్న గొరిల్లా మరియు మొత్తం అడవి." ఇన్హెరిటెన్స్‌తో, మీకు కావలసిన కార్యాచరణను మాత్రమే పొందలేరు; మీరు దానితో పాటు మొత్తం సూపర్‌క్లాస్‌ను తీసుకురావాల్సి వస్తుంది.

ఈ సమస్యల కారణంగా, రియాక్ట్ బృందం లైబ్రరీని మరింత ఫ్లెక్సిబుల్ మరియు శక్తివంతమైన నమూనా చుట్టూ రూపొందించింది: కంపోజిషన్.

రియాక్ట్ పద్ధతిని స్వీకరించడం: కంపోజిషన్ యొక్క శక్తి

కంపోజిషన్ అనేది 'has-a' లేదా 'uses-a' సంబంధానికి అనుకూలించే ఒక డిజైన్ సూత్రం. ఒక కాంపోనెంట్ మరొక కాంపోనెంట్‌గా ఉండటానికి బదులుగా, అది ఇతర కాంపోనెంట్‌లను కలిగి ఉంటుంది లేదా వాటి కార్యాచరణను ఉపయోగిస్తుంది. కాంపోనెంట్‌లను బిల్డింగ్ బ్లాక్స్—లెగో ఇటుకల వంటివి—గా పరిగణిస్తారు, వాటిని కఠినమైన హైరార్కీలో బంధించకుండా సంక్లిష్టమైన UIలను సృష్టించడానికి వివిధ మార్గాల్లో కలపవచ్చు.

రియాక్ట్ యొక్క కంపోజిషనల్ నమూనా చాలా బహుముఖమైనది, మరియు ఇది అనేక ముఖ్య పద్ధతులలో వ్యక్తమవుతుంది. అత్యంత ప్రాథమికమైన వాటి నుండి అత్యంత ఆధునికమైన మరియు శక్తివంతమైన వాటి వరకు వాటిని అన్వేషిద్దాం.

టెక్నిక్ 1: `props.children`తో కంటైన్‌మెంట్

కంపోజిషన్ యొక్క అత్యంత సరళమైన రూపం కంటైన్‌మెంట్. ఇక్కడ ఒక కాంపోనెంట్ ఒక జెనరిక్ కంటైనర్ లేదా 'బాక్స్'గా పనిచేస్తుంది, మరియు దాని కంటెంట్ ఒక పేరెంట్ కాంపోనెంట్ నుండి పాస్ చేయబడుతుంది. దీని కోసం రియాక్ట్‌లో ఒక ప్రత్యేక, అంతర్నిర్మిత ప్రాప్ ఉంది: props.children.

మీకు స్థిరమైన బార్డర్ మరియు నీడతో ఏదైనా కంటెంట్‌ను చుట్టగల `Card` కాంపోనెంట్ అవసరమని ఊహించుకోండి. ఇన్హెరిటెన్స్ ద్వారా `TextCard`, `ImageCard`, మరియు `ProfileCard` వేరియంట్‌లను సృష్టించడానికి బదులుగా, మీరు ఒక జెనరిక్ `Card` కాంపోనెంట్‌ను సృష్టిస్తారు.

// Card.js - ఒక జెనరిక్ కంటైనర్ కాంపోనెంట్
function Card(props) {
  return (
    <div className="card">
      {props.children}
    </div>
  );
}

// App.js - Card కాంపోనెంట్‌ను ఉపయోగించడం
function App() {
  return (
    <div>
      <Card>
        <h1>Welcome!</h1>
        <p>This content is inside a Card component.</p>
      </Card>

      <Card>
        <img src="/path/to/image.jpg" alt="An example image" />
        <p>This is an image card.</p>
      </Card>
    </div>
  );
}

ఇక్కడ, Card కాంపోనెంట్ దానిలో ఏముందో తెలుసుకోదు లేదా పట్టించుకోదు. ఇది కేవలం వ్రాపర్ స్టైలింగ్‌ను అందిస్తుంది. ఓపెనింగ్ మరియు క్లోజింగ్ <Card> ట్యాగ్‌ల మధ్య ఉన్న కంటెంట్ స్వయంచాలకంగా props.childrenగా పాస్ చేయబడుతుంది. ఇది డీకప్లింగ్ మరియు పునర్వినియోగతకు ఒక అందమైన ఉదాహరణ.

టెక్నిక్ 2: ప్రాప్స్‌తో స్పెషలైజేషన్

కొన్నిసార్లు, ఒక కాంపోనెంట్‌కు ఇతర కాంపోనెంట్‌లచే పూరించబడటానికి బహుళ 'రంధ్రాలు' అవసరం. మీరు `props.children`ను ఉపయోగించగలిగినప్పటికీ, మరింత స్పష్టమైన మరియు నిర్మాణాత్మక మార్గం కాంపోనెంట్‌లను సాధారణ ప్రాప్స్‌గా పాస్ చేయడం. ఈ పద్ధతిని తరచుగా స్పెషలైజేషన్ అంటారు.

ఒక `Modal` కాంపోనెంట్‌ను పరిగణించండి. ఒక మోడల్‌లో సాధారణంగా ఒక టైటిల్ విభాగం, ఒక కంటెంట్ విభాగం, మరియు ఒక యాక్షన్స్ విభాగం ("Confirm" లేదా "Cancel" వంటి బటన్లతో) ఉంటాయి. మన `Modal`ను ఈ విభాగాలను ప్రాప్స్‌గా అంగీకరించేలా డిజైన్ చేయవచ్చు.

// Modal.js - మరింత ప్రత్యేకమైన కంటైనర్
function Modal(props) {
  return (
    <div className="modal-backdrop">
      <div className="modal-content">
        <div className="modal-header">{props.title}</div>
        <div className="modal-body">{props.body}</div>
        <div className="modal-footer">{props.actions}</div>
      </div>
    </div>
  );
}

// App.js - నిర్దిష్ట కాంపోనెంట్‌లతో Modalను ఉపయోగించడం
function App() {
  const confirmationTitle = <h2>Confirm Action</h2>;
  const confirmationBody = <p>Are you sure you want to proceed with this action?</p>;
  const confirmationActions = (
    <div>
      <button>Confirm</button>
      <button>Cancel</button>
    </div>
  );

  return (
    <Modal
      title={confirmationTitle}
      body={confirmationBody}
      actions={confirmationActions}
    />
  );
}

ఈ ఉదాహరణలో, Modal అనేది అత్యంత పునర్వినియోగ లేఅవుట్ కాంపోనెంట్. దాని title, body, మరియు actions కోసం నిర్దిష్ట JSX ఎలిమెంట్‌లను పాస్ చేయడం ద్వారా మేము దానిని ప్రత్యేకతరం చేస్తాము. ఇది ConfirmationModal మరియు WarningModal సబ్‌క్లాస్‌లను సృష్టించడం కంటే చాలా ఫ్లెక్సిబుల్. అవసరమైనప్పుడు మనం వేర్వేరు కంటెంట్‌తో Modalను కంపోజ్ చేస్తాము.

టెక్నిక్ 3: హైయర్-ఆర్డర్ కాంపోనెంట్స్ (HOCలు)

డేటా ఫెచింగ్, అథెంటికేషన్, లేదా లాగింగ్ వంటి నాన్-UI లాజిక్‌ను పంచుకోవడానికి, రియాక్ట్ డెవలపర్‌లు చారిత్రాత్మకంగా హైయర్-ఆర్డర్ కాంపోనెంట్స్ (HOCలు) అనే పద్ధతిని ఆశ్రయించారు. ఆధునిక రియాక్ట్‌లో ఎక్కువగా హుక్స్ ద్వారా భర్తీ చేయబడినప్పటికీ, వాటిని అర్థం చేసుకోవడం చాలా ముఖ్యం, ఎందుకంటే అవి రియాక్ట్ కంపోజిషన్ కథలో ఒక కీలక పరిణామ దశను సూచిస్తాయి మరియు ఇప్పటికీ అనేక కోడ్‌బేస్‌లలో ఉన్నాయి.

ఒక HOC అనేది ఒక ఫంక్షన్, ఇది ఒక కాంపోనెంట్‌ను ఆర్గ్యుమెంట్‌గా తీసుకుని, కొత్త, మెరుగుపరచబడిన కాంపోనెంట్‌ను తిరిగి ఇస్తుంది.

`withLogger` అనే ఒక HOCని సృష్టిద్దాం, ఇది ఒక కాంపోనెంట్ అప్‌డేట్ అయినప్పుడల్లా దాని ప్రాప్స్‌ను లాగ్ చేస్తుంది. ఇది డీబగ్గింగ్ కోసం ఉపయోగపడుతుంది.

// withLogger.js - HOC
import React, { useEffect } from 'react';

function withLogger(WrappedComponent) {
  // ఇది ఒక కొత్త కాంపోనెంట్‌ను తిరిగి ఇస్తుంది...
  return function EnhancedComponent(props) {
    useEffect(() => {
      console.log('Component updated with new props:', props);
    }, [props]);

    // ... అది అసలు కాంపోనెంట్‌ను అసలు ప్రాప్స్‌తో రెండర్ చేస్తుంది.
    return <WrappedComponent {...props} />;
  };
}

// MyComponent.js - మెరుగుపరచబడాల్సిన కాంపోనెంట్
function MyComponent({ name, age }) {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>You are {age} years old.</p>
    </div>
  );
}

// మెరుగుపరచబడిన కాంపోనెంట్‌ను ఎగుమతి చేయడం
export default withLogger(MyComponent);

`withLogger` ఫంక్షన్ `MyComponent`ను చుట్టి, `MyComponent` యొక్క అంతర్గత కోడ్‌ను మార్చకుండా దానికి కొత్త లాగింగ్ సామర్థ్యాలను ఇస్తుంది. అదే లాగింగ్ ఫీచర్‌ను ఇవ్వడానికి మనం ఇదే HOCని ఏ ఇతర కాంపోనెంట్‌కైనా వర్తింపజేయవచ్చు.

HOCలతో సవాళ్లు:

• వ్రాపర్ హెల్ (Wrapper Hell): ఒకే కాంపోనెంట్‌కు బహుళ HOCలను వర్తింపజేయడం రియాక్ట్ డెవ్‌టూల్స్‌లో లోతుగా ఉన్న కాంపోనెంట్‌లకు దారితీయవచ్చు (ఉదా., `withAuth(withRouter(withLogger(MyComponent)))`), ఇది డీబగ్గింగ్‌ను కష్టతరం చేస్తుంది.
• ప్రాప్ నేమింగ్ కొలిజన్స్ (Prop Naming Collisions): ఒక HOC చుట్టబడిన కాంపోనెంట్ ద్వారా ఇప్పటికే ఉపయోగించబడుతున్న ఒక ప్రాప్ (ఉదా., `data`) ను ఇంజెక్ట్ చేస్తే, అది అనుకోకుండా ఓవర్‌రైట్ కావచ్చు.
• అంతర్లీన లాజిక్ (Implicit Logic): కాంపోనెంట్ కోడ్ నుండి దాని ప్రాప్స్ ఎక్కడ నుండి వస్తున్నాయో ఎల్లప్పుడూ స్పష్టంగా ఉండదు. లాజిక్ HOC లోపల దాగి ఉంటుంది.

టెక్నిక్ 4: రెండర్ ప్రాప్స్

రెండర్ ప్రాప్ పద్ధతి HOCల యొక్క కొన్ని లోపాలకు పరిష్కారంగా ఉద్భవించింది. ఇది లాజిక్‌ను పంచుకోవడానికి మరింత స్పష్టమైన మార్గాన్ని అందిస్తుంది.

ఒక రెండర్ ప్రాప్‌తో ఉన్న కాంపోనెంట్ ఒక ఫంక్షన్‌ను ప్రాప్‌గా (సాధారణంగా `render` అని పేరు పెట్టబడింది) తీసుకుని, ఏమి రెండర్ చేయాలో నిర్ణయించడానికి ఆ ఫంక్షన్‌ను పిలుస్తుంది, దానికి ఏదైనా స్టేట్ లేదా లాజిక్‌ను ఆర్గ్యుమెంట్‌లుగా పంపుతుంది.

మౌస్ యొక్క X మరియు Y కోఆర్డినేట్‌లను ట్రాక్ చేసే మరియు వాటిని ఉపయోగించాలనుకునే ఏ కాంపోనెంట్‌కైనా అందుబాటులో ఉంచే `MouseTracker` అనే కాంపోనెంట్‌ను సృష్టిద్దాం.

// MouseTracker.js - రెండర్ ప్రాప్‌తో ఉన్న కాంపోనెంట్
import React, { useState, useEffect } from 'react';

function MouseTracker({ render }) {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (event) => {
    setPosition({ x: event.clientX, y: event.clientY });
  };

  useEffect(() => {
    window.addEventListener('mousemove', handleMouseMove);
    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
    };
  }, []);

  // స్టేట్‌తో రెండర్ ఫంక్షన్‌ను పిలవండి
  return render(position);
}

// App.js - MouseTrackerను ఉపయోగించడం
function App() {
  return (
    <div>
      <h1>Move your mouse around!</h1>
      <MouseTracker
        render={mousePosition => (
          <p>The current mouse position is ({mousePosition.x}, {mousePosition.y})</p>
        )}
      />
    </div>
  );
}

ఇక్కడ, `MouseTracker` మౌస్ కదలికను ట్రాక్ చేయడానికి అవసరమైన అన్ని లాజిక్‌ను నిక్షిప్తం చేస్తుంది. ఇది స్వయంగా ఏమీ రెండర్ చేయదు. బదులుగా, ఇది రెండరింగ్ లాజిక్‌ను దాని `render` ప్రాప్‌కు అప్పగిస్తుంది. ఇది HOCల కంటే మరింత స్పష్టంగా ఉంటుంది ఎందుకంటే JSX లోపలే `mousePosition` డేటా ఎక్కడ నుండి వస్తుందో మీరు ఖచ్చితంగా చూడవచ్చు.

`children` ప్రాప్‌ను కూడా ఒక ఫంక్షన్‌గా ఉపయోగించవచ్చు, ఇది ఈ పద్ధతి యొక్క ఒక సాధారణ మరియు సొగసైన వైవిధ్యం:

// childrenను ఒక ఫంక్షన్‌గా ఉపయోగించడం
<MouseTracker>
  {mousePosition => (
    <p>The current mouse position is ({mousePosition.x}, {mousePosition.y})</p>
  )}
</MouseTracker>

టెక్నిక్ 5: హుక్స్ (ఆధునిక మరియు ప్రాధాన్యత కలిగిన విధానం)

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

హుక్స్ HOCలు మరియు రెండర్ ప్రాప్స్ యొక్క సమస్యలను చాలా శుభ్రమైన మార్గంలో పరిష్కరిస్తాయి. మన `MouseTracker` ఉదాహరణను `useMousePosition` అనే కస్టమ్ హుక్‌గా రీఫ్యాక్టర్ చేద్దాం.

// hooks/useMousePosition.js - ఒక కస్టమ్ హుక్
import { useState, useEffect } from 'react';

export function useMousePosition() {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const handleMouseMove = (event) => {
      setPosition({ x: event.clientX, y: event.clientY });
    };

    window.addEventListener('mousemove', handleMouseMove);
    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
    };
  }, []); // ఖాళీ డిపెండెన్సీ అర్రే అంటే ఈ ఎఫెక్ట్ ఒక్కసారి మాత్రమే నడుస్తుంది

  return position;
}

// DisplayMousePosition.js - హుక్‌ను ఉపయోగించే ఒక కాంపోనెంట్
import { useMousePosition } from './hooks/useMousePosition';

function DisplayMousePosition() {
  const position = useMousePosition(); // కేవలం హుక్‌ను పిలవండి!

  return (
    <p>
      The mouse position is ({position.x}, {position.y})
    </p>
  );
}

// మరో కాంపోనెంట్, బహుశా ఒక ఇంటరాక్టివ్ ఎలిమెంట్
import { useMousePosition } from './hooks/useMousePosition';

function InteractiveBox() {
  const { x, y } = useMousePosition();

  const style = {
    position: 'absolute',
    top: y - 25, // కర్సర్ మీద బాక్స్‌ను కేంద్రీకరించండి
    left: x - 25,
    width: '50px',
    height: '50px',
    backgroundColor: 'lightblue',
  };

  return <div style={style} />;
}

ఇది ఒక భారీ మెరుగుదల. 'వ్రాపర్ హెల్' లేదు, ప్రాప్ నేమింగ్ కొలిజన్స్ లేవు, మరియు సంక్లిష్టమైన రెండర్ ప్రాప్ ఫంక్షన్లు లేవు. లాజిక్ పూర్తిగా ఒక పునర్వినియోగ ఫంక్షన్ (`useMousePosition`)లోకి డీకపుల్ చేయబడింది, మరియు ఏ కాంపోనెంట్ అయినా ఆ స్టేట్‌ఫుల్ లాజిక్‌లోకి ఒకే, స్పష్టమైన కోడ్ లైన్‌తో 'హుక్ ఇన్' చేయవచ్చు. కస్టమ్ హుక్స్ ఆధునిక రియాక్ట్‌లో కంపోజిషన్ యొక్క అంతిమ వ్యక్తీకరణ, ఇది మీ స్వంత పునర్వినియోగ లాజిక్ బ్లాక్‌ల లైబ్రరీని నిర్మించడానికి మిమ్మల్ని అనుమతిస్తుంది.

ఒక శీఘ్ర పోలిక: రియాక్ట్‌లో కంపోజిషన్ వర్సెస్ ఇన్హెరిటెన్స్

రియాక్ట్ సందర్భంలో కీలకమైన తేడాలను సంగ్రహించడానికి, ఇక్కడ ఒక ప్రత్యక్ష పోలిక ఉంది:

అంశం	ఇన్హెరిటెన్స్ (రియాక్ట్‌లో యాంటీ-ప్యాటర్న్)	కంపోజిషన్ (రియాక్ట్‌లో ప్రాధాన్యత)
సంబంధం	'is-a' సంబంధం. ఒక ప్రత్యేకమైన కాంపోనెంట్ బేస్ కాంపోనెంట్ యొక్క ఒక వెర్షన్ గా ఉంటుంది.	'has-a' లేదా 'uses-a' సంబంధం. ఒక సంక్లిష్టమైన కాంపోనెంట్ చిన్న కాంపోనెంట్‌లను కలిగి ఉంటుంది లేదా పంచుకున్న లాజిక్‌ను ఉపయోగిస్తుంది.
అనుసంధానం (Coupling)	అధికం. చైల్డ్ కాంపోనెంట్‌లు వాటి పేరెంట్ యొక్క ఇంప్లిమెంటేషన్‌తో గట్టిగా ముడిపడి ఉంటాయి.	తక్కువ. కాంపోనెంట్‌లు స్వతంత్రంగా ఉంటాయి మరియు మార్పు లేకుండా వివిధ సందర్భాలలో పునర్వినియోగించబడతాయి.
ఫ్లెక్సిబిలిటీ	తక్కువ. కఠినమైన, క్లాస్-ఆధారిత హైరార్కీలు వివిధ కాంపోనెంట్ ట్రీలలో లాజిక్‌ను పంచుకోవడాన్ని కష్టతరం చేస్తాయి.	అధికం. లాజిక్ మరియు UIని బిల్డింగ్ బ్లాక్స్ లాగా లెక్కలేనన్ని మార్గాల్లో కలపవచ్చు మరియు పునర్వినియోగించవచ్చు.
కోడ్ పునర్వినియోగత	ముందే నిర్వచించిన హైరార్కీకి పరిమితం. మీకు కేవలం "అరటిపండు" కావలసినప్పుడు మీకు మొత్తం "గొరిల్లా" లభిస్తుంది.	అద్భుతం. చిన్న, కేంద్రీకృత కాంపోనెంట్‌లు మరియు హుక్స్‌ను మొత్తం అప్లికేషన్‌లో ఉపయోగించవచ్చు.
రియాక్ట్ ఇడియోమ్	అధికారిక రియాక్ట్ బృందం ద్వారా నిరుత్సాహపరచబడింది.	రియాక్ట్ అప్లికేషన్‌లను రూపొందించడానికి సిఫార్సు చేయబడిన మరియు ఇడియోమాటిక్ విధానం.

ముగింపు: కంపోజిషన్‌లో ఆలోచించండి

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

కంపోజిషన్‌కు అనుకూలంగా ఉండటం ద్వారా, మీరు పొందుతారు:

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

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