आइए React Three Fiber के साथ देखें कि हमें कौन से React hooks आमतौर पर उपयोग करने होंगे और कैसे हम उन्हें उपयोग करते समय सामान्य गलतियों से बच सकते हैं।

यदि आप React hooks से परिचित नहीं हैं, तो मैं आपको पहले आधिकारिक दस्तावेज़ पढ़ने की सलाह देता हूँ।

useState

useState आपको एक state वेरिएबल और इसे अपडेट करने के लिए एक फ़ंक्शन बनाने की अनुमति देता है।

Copy
const [color, setColor] = useState("white");

यह दो तत्वों के साथ एक array लौटाता है:

• state वेरिएबल
• इसे अपडेट करने का फ़ंक्शन।

आप इसे इस तरह से उपयोग कर सकते हैं:

Copy
import { useState } from "react";

// ...

const Cube = (props) => {
  const [color, setColor] = useState("white");

  useControls({
    changeColorToRed: button(() => setColor("red")),
    changeColorToBlue: button(() => setColor("blue")),
    changeColorToGreen: button(() => setColor("green")),
  });
  return (
    <mesh {...props}>
      <boxGeometry />
      <meshStandardMaterial color={color} />
    </mesh>
  );
};

// ...

प्रत्येक बार जब आप किसी एक बटन पर क्लिक करते हैं, तो घन का रंग बदल जाता है।

क्योंकि state को अपडेट करने से एक re-render ट्रिगर होता है, आपको किसी लूप या किसी कंडीशन के अंदर useState को कॉल करने से बचना चाहिए।

हम React Three Fiber hooks पाठ में बार-बार अपडेट करने का सही तरीका देखेंगे, और optimization पाठ में आम पिछलों (pitfalls) पर चर्चा करेंगे जिनसे बचना चाहिए।

फिलहाल, useState के साथ कुछ सुझाव नियम यहाँ दिए गए हैं:

• तेजी से बदलने वाले मानों के लिए useState को कॉल करने से बचें।
• इसे संभवतः सबसे गहरे स्तर पर उपयोग करें। इस तरह, आप उन आइटम्स को पुनः render करने से बचाएँगे जिन्हें पुनः render करने की आवश्यकता नहीं है।

useMemo

useMemo एक वैल्यू को मेमोइज़ करने की अनुमति देता है। इसका मतलब है कि वैल्यू केवल तब ही कम्प्यूट की जाएगी जब उसकी dependencies बदली हों।

आइए हमारे material को मेमोइज़्ड एक से बदलते हैं:

Copy
import { useMemo, useState } from "react";

// ...

const Cube = (props) => {
  // ...
  const material = useMemo(() => <meshStandardMaterial color={color} />, []);

  return (
    <mesh {...props}>
      <boxGeometry />
      {material}
    </mesh>
  );
};

// ...

• पहला तर्क एक ऐसी फंक्शन है जो मेमोइज़ करने के लिए वैल्यू लौटाता है। हमारे मामले में, यह एक material component है।
• दूसरा तर्क dependence का एक array है। हमने एक खाली array पास किया, जिसका मतलब है कि material केवल एक बार कम्प्यूट किया जाएगा।
• लौटाई गई वैल्यू मेमोइज़्ड वैल्यू है।

अब, जब हम बटन पर क्लिक करते हैं, तो क्यूब का रंग नहीं बदलता है, क्योंकि material को पुनः कम्प्यूट नहीं किया गया है।

इसे ठीक करने के लिए, हमें color को एक dependency के रूप में पास करना होगा:

Copy
const material = useMemo(() => <meshStandardMaterial color={color} />, [color]);

अब, जब हम बटन पर क्लिक करते हैं, तो क्यूब का रंग बदल जाता है, क्योंकि material को पुनः कम्प्यूट किया जाता है जब color state बदलती है।

हमने यह आपको दिखाने के लिए किया कि useMemo कैसे काम करता है, लेकिन इस मामले में, material को मेमोइज़ करना आवश्यक नहीं है। React Three Fiber पहले से ही हमारे लिए आवश्यक अनुकूलन कर देता है।

वे केस जहाँ useMemo लाभकारी हो सकता है:

• जब किसी कॉम्पोनेंट पर जिसे बार-बार रेंडर किया जाता है, वैल्यू को कम्प्यूट करना महंगा होता है।
• जब किसी कॉम्पोनेंट में बहुत सारे children होते हैं और आप उन्हें पुनः रेंडर करना नहीं चाहते।
• जब किसी कॉम्पोनेंट में बहुत सारे props होते हैं और आप उसे पुनः रेंडर करना नहीं चाहते।

जब आप React और r3f के साथ शुरू कर रहे हों तो प्रारंभिक अनुकूलन के लिए useMemo का उपयोग न करें। इसका उपयोग जटिल हो सकता है और इसके कारण बग हो सकते हैं। इसको तब उपयोग में लें जब आपको प्रदर्शन के मुद्दों का सामना करना पड़ता है।

useRef

useRef आपको एक mutable value बनाने की अनुमति देता है जो renders के बीच स्थिर रहती है।

यह अक्सर एक DOM element या एक Three.js object का संदर्भ संग्रहीत करने के लिए उपयोग किया जाता है लेकिन आप इसे किसी भी value को संग्रहीत करने के लिए उपयोग कर सकते हैं।

useRef के बारे में अच्छी बात यह है कि इसके value बदलने पर यह re-render को trigger नहीं करता है। r3f के साथ, यह एनिमेशन या किसी भी value के लिए बिल्कुल सही है जो अक्सर बदलती रहती है।