ರಿಯಾಕ್ಟ್ ಸಸ್ಪೆನ್ಸ್ ಲೋಡಿಂಗ್ ಸ್ಟೇಟ್ ಕಾಂಪೊಸಿಷನ್ ಟ್ರೀ: ನೆಸ್ಟೆಡ್ ಲೋಡಿಂಗ್ ನಿರ್ವಹಣೆ

ರಿಯಾಕ್ಟ್ ಸಸ್ಪೆನ್ಸ್ ಅಸಿಂಕ್ರೋನಸ್ ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು, ಮುಖ್ಯವಾಗಿ ಡೇಟಾ ಫೆಚಿಂಗ್ ಅನ್ನು ಹೆಚ್ಚು ಸರಾಗವಾಗಿ ನಿರ್ವಹಿಸಲು ಪರಿಚಯಿಸಲಾದ ಒಂದು ಶಕ್ತಿಯುತ ವೈಶಿಷ್ಟ್ಯವಾಗಿದೆ. ಡೇಟಾ ಲೋಡ್ ಆಗಲು ಕಾಯುತ್ತಿರುವಾಗ ಕಾಂಪೊನೆಂಟ್‌ನ ರೆಂಡರಿಂಗ್ ಅನ್ನು "ಸಸ್ಪೆಂಡ್" ಮಾಡಲು ಇದು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ, ಈ ಮಧ್ಯೆ ಫಾಲ್‌ಬ್ಯಾಕ್ UI ಅನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ. UI ನ ವಿವಿಧ ಭಾಗಗಳು ವಿವಿಧ ಮೂಲಗಳಿಂದ ಅಸಿಂಕ್ರೋನಸ್ ಡೇಟಾವನ್ನು ಅವಲಂಬಿಸಿರುವ ಸಂಕೀರ್ಣ ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀಗಳೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ ಇದು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ. ಈ ಲೇಖನವು ನೆಸ್ಟೆಡ್ ಕಾಂಪೊನೆಂಟ್ ರಚನೆಗಳಲ್ಲಿ ಸಸ್ಪೆನ್ಸ್ ಅನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಬಳಸುವುದು, ಸಾಮಾನ್ಯ ಸವಾಲುಗಳನ್ನು ಪರಿಹರಿಸುವುದು ಮತ್ತು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳನ್ನು ಒದಗಿಸುವುದರ ಮೇಲೆ ಗಮನ ಹರಿಸುತ್ತದೆ.

ರಿಯಾಕ್ಟ್ ಸಸ್ಪೆನ್ಸ್ ಮತ್ತು ಅದರ ಪ್ರಯೋಜನಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

ನೆಸ್ಟೆಡ್ ಸನ್ನಿವೇಶಗಳಿಗೆ ಧುಮುಕುವ ಮೊದಲು, ರಿಯಾಕ್ಟ್ ಸಸ್ಪೆನ್ಸ್‌ನ ಮೂಲಭೂತ ಪರಿಕಲ್ಪನೆಗಳನ್ನು ಪುನರಾವಲೋಕಿಸೋಣ.

ರಿಯಾಕ್ಟ್ ಸಸ್ಪೆನ್ಸ್ ಎಂದರೇನು?

ಸಸ್ಪೆನ್ಸ್ ಎನ್ನುವುದು ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್ ಆಗಿದ್ದು, ಇದು ಕೆಲವು ಕೋಡ್ ಲೋಡ್ ಆಗಲು "ಕಾಯಲು" ಮತ್ತು ಕಾಯುತ್ತಿರುವಾಗ ಪ್ರದರ್ಶಿಸಲು ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಯನ್ನು (ಫಾಲ್‌ಬ್ಯಾಕ್) ಘೋಷಣಾತ್ಮಕವಾಗಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಇದು ಲೇಜಿ-ಲೋಡೆಡ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳೊಂದಿಗೆ (React.lazy ಬಳಸಿ) ಮತ್ತು ಸಸ್ಪೆನ್ಸ್‌ನೊಂದಿಗೆ ಸಂಯೋಜನೆಗೊಳ್ಳುವ ಡೇಟಾ ಫೆಚಿಂಗ್ ಲೈಬ್ರರಿಗಳೊಂದಿಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.

ಸಸ್ಪೆನ್ಸ್ ಬಳಸುವುದರ ಪ್ರಯೋಜನಗಳು:

• ಸುಧಾರಿತ ಬಳಕೆದಾರ ಅನುಭವ: ಖಾಲಿ ಪರದೆಯ ಬದಲು ಅರ್ಥಪೂರ್ಣ ಲೋಡಿಂಗ್ ಸೂಚಕವನ್ನು ಪ್ರದರ್ಶಿಸಿ, ಅಪ್ಲಿಕೇಶನ್ ಹೆಚ್ಚು ಸ್ಪಂದಿಸುವಂತೆ ಮಾಡುತ್ತದೆ.
• ಘೋಷಣಾತ್ಮಕ ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳು: ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀಯಲ್ಲಿ ನೇರವಾಗಿ ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳನ್ನು ವಿವರಿಸಿ, ಕೋಡ್ ಅನ್ನು ಓದಲು ಮತ್ತು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ.
• ಕೋಡ್ ಸ್ಪ್ಲಿಟಿಂಗ್: ಸಸ್ಪೆನ್ಸ್ ಕೋಡ್ ಸ್ಪ್ಲಿಟಿಂಗ್‌ನೊಂದಿಗೆ (React.lazy ಬಳಸಿ) ಮನಬಂದಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಆರಂಭಿಕ ಲೋಡ್ ಸಮಯವನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.
• ಸರಳೀಕೃತ ಅಸಿಂಕ್ರೋನಸ್ ಡೇಟಾ ಫೆಚಿಂಗ್: ಸಸ್ಪೆನ್ಸ್ ಹೊಂದಾಣಿಕೆಯ ಡೇಟಾ ಫೆಚಿಂಗ್ ಲೈಬ್ರರಿಗಳೊಂದಿಗೆ ಸಂಯೋಜನೆಗೊಳ್ಳುತ್ತದೆ, ಡೇಟಾ ಲೋಡಿಂಗ್‌ಗೆ ಹೆಚ್ಚು ಸರಳೀಕೃತ ವಿಧಾನವನ್ನು ಅನುಮತಿಸುತ್ತದೆ.

ಸವಾಲು: ನೆಸ್ಟೆಡ್ ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳು

ಸಸ್ಪೆನ್ಸ್ ಸಾಮಾನ್ಯವಾಗಿ ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆಯಾದರೂ, ಆಳವಾಗಿ ನೆಸ್ಟೆಡ್ ಆಗಿರುವ ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀಗಳಲ್ಲಿ ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು ಸಂಕೀರ್ಣವಾಗಬಹುದು. ನೀವು ಪೇರೆಂಟ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಹೊಂದಿರುವ ಸನ್ನಿವೇಶವನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ, ಅದು ಕೆಲವು ಆರಂಭಿಕ ಡೇಟಾವನ್ನು ಪಡೆಯುತ್ತದೆ, ಮತ್ತು ನಂತರ ಪ್ರತಿಯೊಂದೂ ತಮ್ಮದೇ ಆದ ಡೇಟಾವನ್ನು ಪಡೆಯುವ ಚೈಲ್ಡ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತದೆ. ನೀವು ಪೇರೆಂಟ್ ಕಾಂಪೊನೆಂಟ್ ಅದರ ಡೇಟಾವನ್ನು ಪ್ರದರ್ಶಿಸುವ, ಆದರೆ ಚೈಲ್ಡ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಇನ್ನೂ ಲೋಡ್ ಆಗುತ್ತಿರುವ ಪರಿಸ್ಥಿತಿಯಲ್ಲಿ ಕೊನೆಗೊಳ್ಳಬಹುದು, ಇದು ಅಸಮಂಜಸ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕೆ ಕಾರಣವಾಗುತ್ತದೆ.

ಈ ಸರಳೀಕೃತ ಕಾಂಪೊನೆಂಟ್ ರಚನೆಯನ್ನು ಪರಿಗಣಿಸಿ:

<ParentComponent>
  <ChildComponent1>
    <GrandChildComponent />
  </ChildComponent1>
  <ChildComponent2 />
</ParentComponent>

ಈ ಪ್ರತಿಯೊಂದು ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಅಸಿಂಕ್ರೋನಸ್ ಆಗಿ ಡೇಟಾವನ್ನು ಪಡೆಯುತ್ತಿರಬಹುದು. ಈ ನೆಸ್ಟೆಡ್ ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳನ್ನು ಸರಾಗವಾಗಿ ನಿರ್ವಹಿಸಲು ನಮಗೆ ಒಂದು ತಂತ್ರದ ಅಗತ್ಯವಿದೆ.

ಸಸ್ಪೆನ್ಸ್‌ನೊಂದಿಗೆ ನೆಸ್ಟೆಡ್ ಲೋಡಿಂಗ್ ನಿರ್ವಹಣೆಗಾಗಿ ತಂತ್ರಗಳು

ನೆಸ್ಟೆಡ್ ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ನಿರ್ವಹಿಸಲು ನೀವು ಬಳಸಬಹುದಾದ ಹಲವಾರು ತಂತ್ರಗಳು ಇಲ್ಲಿವೆ:

1. ವೈಯಕ್ತಿಕ ಸಸ್ಪೆನ್ಸ್ ಬೌಂಡರಿಗಳು

ಡೇಟಾವನ್ನು ಪಡೆಯುವ ಪ್ರತಿಯೊಂದು ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಅದರದೇ ಆದ <Suspense> ಬೌಂಡರಿಯೊಂದಿಗೆ ಸುತ್ತುವರಿಯುವುದು ಅತ್ಯಂತ ಸರಳವಾದ ವಿಧಾನವಾಗಿದೆ. ಇದು ಪ್ರತಿಯೊಂದು ಕಾಂಪೊನೆಂಟ್ ತನ್ನದೇ ಆದ ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಯನ್ನು ಸ್ವತಂತ್ರವಾಗಿ ನಿರ್ವಹಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

const ParentComponent = () => {
  // ...
  return (
    <div>
      <h2>ಪೇರೆಂಟ್ ಕಾಂಪೊನೆಂಟ್</h2>
      <ChildComponent1 />
      <ChildComponent2 />
    </div>
  );
};

const ChildComponent1 = () => {
  return (
    <Suspense fallback={<p>ಚೈಲ್ಡ್ 1 ಲೋಡ್ ಆಗುತ್ತಿದೆ...</p>}>
      <AsyncChild1 />
    </Suspense>
  );
};

const ChildComponent2 = () => {
  return (
    <Suspense fallback={<p>ಚೈಲ್ಡ್ 2 ಲೋಡ್ ಆಗುತ್ತಿದೆ...</p>}>
      <AsyncChild2 />
    </Suspense>
  );
};

const AsyncChild1 = () => {
  const data = useAsyncData('child1'); // ಅಸಿಂಕ್ ಡೇಟಾ ಫೆಚಿಂಗ್‌ಗಾಗಿ ಕಸ್ಟಮ್ ಹುಕ್
  return <p>ಚೈಲ್ಡ್ 1 ರಿಂದ ಡೇಟಾ: {data}</p>;
};

const AsyncChild2 = () => {
  const data = useAsyncData('child2'); // ಅಸಿಂಕ್ ಡೇಟಾ ಫೆಚಿಂಗ್‌ಗಾಗಿ ಕಸ್ಟಮ್ ಹುಕ್
  return <p>ಚೈಲ್ಡ್ 2 ರಿಂದ ಡೇಟಾ: {data}</p>;
};

const useAsyncData = (key) => {
  const [data, setData] = React.useState(null);
  React.useEffect(() => {
    let didCancel = false;
    const fetchData = async () => {
      // ಡೇಟಾ ಫೆಚಿಂಗ್ ವಿಳಂಬವನ್ನು ಅನುಕರಿಸಿ
      await new Promise(resolve => setTimeout(resolve, 1000));
      if (!didCancel) {
        setData(`ಡೇಟಾ ${key} ಗಾಗಿ`);
      }
    };

    fetchData();

    return () => {
      didCancel = true;
    };
  }, [key]);

  if (data === null) {
    throw new Promise(resolve => setTimeout(resolve, 1000)); // ನಂತರ ಪರಿಹಾರವಾಗುವ ಪ್ರಾಮಿಸ್ ಅನ್ನು ಅನುಕರಿಸಿ
  }
  return data;
};

export default ParentComponent;

ಅನುಕೂಲಗಳು: ಕಾರ್ಯಗತಗೊಳಿಸಲು ಸರಳ, ಪ್ರತಿಯೊಂದು ಕಾಂಪೊನೆಂಟ್ ತನ್ನದೇ ಆದ ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಯನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ. ಅನಾನುಕೂಲಗಳು: ವಿವಿಧ ಸಮಯಗಳಲ್ಲಿ ಅನೇಕ ಲೋಡಿಂಗ್ ಸೂಚಕಗಳು ಕಾಣಿಸಿಕೊಳ್ಳಲು ಕಾರಣವಾಗಬಹುದು, ಇದು ಬಳಕೆದಾರರಿಗೆ ಅಹಿತಕರ ಅನುಭವವನ್ನು ನೀಡಬಹುದು. ಲೋಡಿಂಗ್ ಸೂಚಕಗಳ "ವಾಟರ್‌ಫಾಲ್" ಪರಿಣಾಮವು ದೃಷ್ಟಿಗೆ ಅಹಿತಕರವಾಗಿರಬಹುದು.

2. ಉನ್ನತ ಮಟ್ಟದಲ್ಲಿ ಹಂಚಿಕೆಯ ಸಸ್ಪೆನ್ಸ್ ಬೌಂಡರಿ

ಮತ್ತೊಂದು ವಿಧಾನವೆಂದರೆ, ಸಂಪೂರ್ಣ ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀ ಅನ್ನು ಉನ್ನತ ಮಟ್ಟದಲ್ಲಿ ಒಂದೇ <Suspense> ಬೌಂಡರಿಯೊಂದಿಗೆ ಸುತ್ತುವರಿಯುವುದು. ಇದು ಎಲ್ಲಾ ಅಸಿಂಕ್ರೋನಸ್ ಡೇಟಾ ಲೋಡ್ ಆಗುವವರೆಗೆ ಸಂಪೂರ್ಣ UI ಕಾಯುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.

const App = () => {
  return (
    <Suspense fallback={<p>ಆಪ್ ಲೋಡ್ ಆಗುತ್ತಿದೆ...</p>}>
      <ParentComponent />
    </Suspense>
  );
};

ಅನುಕೂಲಗಳು: ಹೆಚ್ಚು ಸುಸಂಬದ್ಧವಾದ ಲೋಡಿಂಗ್ ಅನುಭವವನ್ನು ಒದಗಿಸುತ್ತದೆ; ಎಲ್ಲಾ ಡೇಟಾ ಲೋಡ್ ಆದ ನಂತರ ಸಂಪೂರ್ಣ UI ಒಂದೇ ಬಾರಿಗೆ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ. ಅನಾನುಕೂಲಗಳು: ಬಳಕೆದಾರರು ಏನನ್ನಾದರೂ ನೋಡುವ ಮೊದಲು ದೀರ್ಘಕಾಲ ಕಾಯಬೇಕಾಗಬಹುದು, ವಿಶೇಷವಾಗಿ ಕೆಲವು ಕಾಂಪೊನೆಂಟ್‌ಗಳು ತಮ್ಮ ಡೇಟಾವನ್ನು ಲೋಡ್ ಮಾಡಲು ಹೆಚ್ಚು ಸಮಯ ತೆಗೆದುಕೊಂಡರೆ. ಇದು ಎಲ್ಲವೂ-ಅಥವಾ-ಏನೂ-ಇಲ್ಲದ ವಿಧಾನವಾಗಿದೆ, ಇದು ಎಲ್ಲಾ ಸನ್ನಿವೇಶಗಳಿಗೆ ಸೂಕ್ತವಲ್ಲದಿರಬಹುದು.

3. ಸಂಯೋಜಿತ ಲೋಡಿಂಗ್‌ಗಾಗಿ ಸಸ್ಪೆನ್ಸ್‌ಲಿಸ್ಟ್

<SuspenseList> ಎಂಬುದು ಸಸ್ಪೆನ್ಸ್ ಬೌಂಡರಿಗಳು ಬಹಿರಂಗಗೊಳ್ಳುವ ಕ್ರಮವನ್ನು ಸಂಯೋಜಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುವ ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಆಗಿದೆ. ಇದು ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳ ಪ್ರದರ್ಶನವನ್ನು ನಿಯಂತ್ರಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ವಾಟರ್‌ಫಾಲ್ ಪರಿಣಾಮವನ್ನು ತಡೆಯುತ್ತದೆ ಮತ್ತು ಸುಗಮ ದೃಶ್ಯ ಪರಿವರ್ತನೆಯನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.

<SuspenseList> ಗೆ ಎರಡು ಮುಖ್ಯ ಪ್ರಾಪ್‌ಗಳಿವೆ: * `revealOrder`: <SuspenseList> ನ ಚೈಲ್ಡ್‌ಗಳು ಬಹಿರಂಗಗೊಳ್ಳುವ ಕ್ರಮವನ್ನು ನಿಯಂತ್ರಿಸುತ್ತದೆ. ಇದು `'forwards'`, `'backwards'`, ಅಥವಾ `'together'` ಆಗಿರಬಹುದು. * `tail`: ಕೆಲವು, ಆದರೆ ಎಲ್ಲವೂ ಅಲ್ಲದ ಐಟಂಗಳು ಬಹಿರಂಗಗೊಳ್ಳಲು ಸಿದ್ಧವಾದಾಗ, ಉಳಿದ ಬಹಿರಂಗಗೊಳ್ಳದ ಐಟಂಗಳೊಂದಿಗೆ ಏನು ಮಾಡಬೇಕೆಂದು ನಿಯಂತ್ರಿಸುತ್ತದೆ. ಇದು `'collapsed'` ಅಥವಾ `'suspended'` ಆಗಿರಬಹುದು.

import { unstable_SuspenseList as SuspenseList } from 'react';

const ParentComponent = () => {
  return (
    <div>
      <h2>ಪೇರೆಂಟ್ ಕಾಂಪೊನೆಂಟ್</h2>
      <SuspenseList revealOrder="forwards" tail="suspended">
        <Suspense fallback={<p>ಚೈಲ್ಡ್ 1 ಲೋಡ್ ಆಗುತ್ತಿದೆ...</p>}>
          <ChildComponent1 />
        </Suspense>
        <Suspense fallback={<p>ಚೈಲ್ಡ್ 2 ಲೋಡ್ ಆಗುತ್ತಿದೆ...</p>}>
          <ChildComponent2 />
        </Suspense>
      </SuspenseList>
    </div>
  );
};

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, `revealOrder="forwards"` ಪ್ರಾಪ್ ChildComponent1 ಅನ್ನು ChildComponent2 ಗಿಂತ ಮೊದಲು ಬಹಿರಂಗಪಡಿಸುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ. `tail="suspended"` ಪ್ರಾಪ್ ChildComponent1 ಸಂಪೂರ್ಣವಾಗಿ ಲೋಡ್ ಆಗುವವರೆಗೆ ChildComponent2 ಗಾಗಿ ಲೋಡಿಂಗ್ ಸೂಚಕವು ಗೋಚರಿಸುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.

ಅನುಕೂಲಗಳು: ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳು ಬಹಿರಂಗಗೊಳ್ಳುವ ಕ್ರಮದ ಮೇಲೆ ಸೂಕ್ಷ್ಮ ನಿಯಂತ್ರಣವನ್ನು ಒದಗಿಸುತ್ತದೆ, ಹೆಚ್ಚು ನಿರೀಕ್ಷಿತ ಮತ್ತು ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕವಾದ ಲೋಡಿಂಗ್ ಅನುಭವವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ. ವಾಟರ್‌ಫಾಲ್ ಪರಿಣಾಮವನ್ನು ತಡೆಯುತ್ತದೆ. ಅನಾನುಕೂಲಗಳು: <SuspenseList> ಮತ್ತು ಅದರ ಪ್ರಾಪ್‌ಗಳ ಬಗ್ಗೆ ಆಳವಾದ ತಿಳುವಳಿಕೆ ಅಗತ್ಯವಿದೆ. ವೈಯಕ್ತಿಕ ಸಸ್ಪೆನ್ಸ್ ಬೌಂಡರಿಗಳಿಗಿಂತ ಸ್ಥಾಪಿಸಲು ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾಗಿರಬಹುದು.

4. ಕಸ್ಟಮ್ ಲೋಡಿಂಗ್ ಇಂಡಿಕೇಟರ್‌ಗಳೊಂದಿಗೆ ಸಸ್ಪೆನ್ಸ್ ಅನ್ನು ಸಂಯೋಜಿಸುವುದು

<Suspense> ನಿಂದ ಒದಗಿಸಲಾದ ಡೀಫಾಲ್ಟ್ ಫಾಲ್‌ಬ್ಯಾಕ್ UI ಅನ್ನು ಬಳಸುವ ಬದಲು, ನೀವು ಬಳಕೆದಾರರಿಗೆ ಹೆಚ್ಚು ದೃಶ್ಯ ಸಂದರ್ಭವನ್ನು ಒದಗಿಸುವ ಕಸ್ಟಮ್ ಲೋಡಿಂಗ್ ಸೂಚಕಗಳನ್ನು ರಚಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ನೀವು ಲೋಡ್ ಆಗುತ್ತಿರುವ ಕಾಂಪೊನೆಂಟ್‌ನ ಲೇಔಟ್ ಅನ್ನು ಅನುಕರಿಸುವ ಸ್ಕೆಲಿಟನ್ ಲೋಡಿಂಗ್ ಅನಿಮೇಷನ್ ಅನ್ನು ಪ್ರದರ್ಶಿಸಬಹುದು. ಇದು ಗ್ರಹಿಸಿದ ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸಬಹುದು.

const ChildComponent1 = () => {
  return (
    <Suspense fallback={<SkeletonLoader />}>
      <AsyncChild1 />
    </Suspense>
  );
};

const SkeletonLoader = () => {
  return (
    <div className="skeleton-loader">
      <div className="skeleton-line"></div>
      <div className="skeleton-line"></div>
      <div className="skeleton-line"></div>
    </div>
  );
};

(ಅನಿಮೇಷನ್ ಪರಿಣಾಮವನ್ನು ರಚಿಸಲು `.skeleton-loader` ಮತ್ತು `.skeleton-line` ಗಾಗಿ CSS ಸ್ಟೈಲಿಂಗ್ ಅನ್ನು ಪ್ರತ್ಯೇಕವಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸಬೇಕಾಗುತ್ತದೆ.)

ಅನುಕೂಲಗಳು: ಹೆಚ್ಚು ಆಕರ್ಷಕ ಮತ್ತು ಮಾಹಿತಿಯುಕ್ತ ಲೋಡಿಂಗ್ ಅನುಭವವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ. ಗ್ರಹಿಸಿದ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸಬಹುದು. ಅನಾನುಕೂಲಗಳು: ಸರಳ ಲೋಡಿಂಗ್ ಸೂಚಕಗಳಿಗಿಂತ ಕಾರ್ಯಗತಗೊಳಿಸಲು ಹೆಚ್ಚು ಶ್ರಮ ಬೇಕಾಗುತ್ತದೆ.

5. ಸಸ್ಪೆನ್ಸ್ ಇಂಟಿಗ್ರೇಷನ್‌ನೊಂದಿಗೆ ಡೇಟಾ ಫೆಚಿಂಗ್ ಲೈಬ್ರರಿಗಳನ್ನು ಬಳಸುವುದು

ರಿಲೇ ಮತ್ತು SWR (Stale-While-Revalidate) ನಂತಹ ಕೆಲವು ಡೇಟಾ ಫೆಚಿಂಗ್ ಲೈಬ್ರರಿಗಳನ್ನು ಸಸ್ಪೆನ್ಸ್‌ನೊಂದಿಗೆ ಮನಬಂದಂತೆ ಕೆಲಸ ಮಾಡಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ. ಈ ಲೈಬ್ರರಿಗಳು ಡೇಟಾ ಪಡೆಯುವಾಗ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಸಸ್ಪೆಂಡ್ ಮಾಡಲು ಅಂತರ್ಗತ ಕಾರ್ಯವಿಧಾನಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ, ಇದು ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳನ್ನು ನಿರ್ವಹಿಸುವುದನ್ನು ಸುಲಭಗೊಳಿಸುತ್ತದೆ.

SWR ಬಳಸುವ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ:

import useSWR from 'swr'

const AsyncChild1 = () => {
  const { data, error } = useSWR('/api/data', fetcher)

  if (error) return <div>ಲೋಡ್ ಮಾಡಲು ವಿಫಲವಾಗಿದೆ</div>
  if (!data) return <div>ಲೋಡ್ ಆಗುತ್ತಿದೆ...</div> // SWR ಸಸ್ಪೆನ್ಸ್ ಅನ್ನು ಆಂತರಿಕವಾಗಿ ನಿರ್ವಹಿಸುತ್ತದೆ

  return <div>{data.name}</div>
}

const fetcher = (...args) => fetch(...args).then(res => res.json())

SWR ಡೇಟಾ ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಯನ್ನು ಆಧರಿಸಿ ಸಸ್ಪೆನ್ಸ್ ನಡವಳಿಕೆಯನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನಿರ್ವಹಿಸುತ್ತದೆ. ಡೇಟಾ ಇನ್ನೂ ಲಭ್ಯವಿಲ್ಲದಿದ್ದರೆ, ಕಾಂಪೊನೆಂಟ್ ಸಸ್ಪೆಂಡ್ ಆಗುತ್ತದೆ, ಮತ್ತು <Suspense> ಫಾಲ್‌ಬ್ಯಾಕ್ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ.

ಅನುಕೂಲಗಳು: ಡೇಟಾ ಫೆಚಿಂಗ್ ಮತ್ತು ಲೋಡಿಂಗ್ ಸ್ಥಿತಿ ನಿರ್ವಹಣೆಯನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ. ಸುಧಾರಿತ ಕಾರ್ಯಕ್ಷಮತೆಗಾಗಿ ಸಾಮಾನ್ಯವಾಗಿ ಕ್ಯಾಶಿಂಗ್ ಮತ್ತು ಮರುಮೌಲ್ಯಮಾಪನ ತಂತ್ರಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ. ಅನಾನುಕೂಲಗಳು: ನಿರ್ದಿಷ್ಟ ಡೇಟಾ ಫೆಚಿಂಗ್ ಲೈಬ್ರರಿಯನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಬೇಕಾಗುತ್ತದೆ. ಲೈಬ್ರರಿಗೆ ಸಂಬಂಧಿಸಿದ ಕಲಿಕೆಯ ರೇಖೆ ಇರಬಹುದು.

ಸುಧಾರಿತ ಪರಿಗಣನೆಗಳು

ಎರರ್ ಬೌಂಡರಿಗಳೊಂದಿಗೆ ದೋಷ ನಿರ್ವಹಣೆ

ಸಸ್ಪೆನ್ಸ್ ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ, ಆದರೆ ಡೇಟಾ ಫೆಚಿಂಗ್ ಸಮಯದಲ್ಲಿ ಸಂಭವಿಸಬಹುದಾದ ದೋಷಗಳನ್ನು ಇದು ನಿರ್ವಹಿಸುವುದಿಲ್ಲ. ದೋಷ ನಿರ್ವಹಣೆಗಾಗಿ, ನೀವು ಎರರ್ ಬೌಂಡರಿಗಳನ್ನು ಬಳಸಬೇಕು. ಎರರ್ ಬೌಂಡರಿಗಳು ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಾಗಿದ್ದು, ಅವು ತಮ್ಮ ಚೈಲ್ಡ್ ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀಯಲ್ಲಿ ಎಲ್ಲಿಯಾದರೂ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ದೋಷಗಳನ್ನು ಹಿಡಿಯುತ್ತವೆ, ಆ ದೋಷಗಳನ್ನು ಲಾಗ್ ಮಾಡುತ್ತವೆ ಮತ್ತು ಫಾಲ್‌ಬ್ಯಾಕ್ UI ಅನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತವೆ.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // ಸ್ಥಿತಿಯನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಿ ಇದರಿಂದ ಮುಂದಿನ ರೆಂಡರ್ ಫಾಲ್‌ಬ್ಯಾಕ್ UI ಅನ್ನು ತೋರಿಸುತ್ತದೆ.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // ನೀವು ದೋಷವನ್ನು ಎರರ್ ರಿಪೋರ್ಟಿಂಗ್ ಸೇವೆಗೆ ಲಾಗ್ ಮಾಡಬಹುದು
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // ನೀವು ಯಾವುದೇ ಕಸ್ಟಮ್ ಫಾಲ್‌ಬ್ಯಾಕ್ UI ಅನ್ನು ರೆಂಡರ್ ಮಾಡಬಹುದು
      return <h1>ಏನೋ ತಪ್ಪಾಗಿದೆ.</h1>;
    }

    return this.props.children; 
  }
}

const ParentComponent = () => {
  return (
    <ErrorBoundary>
      <Suspense fallback={<p>ಲೋಡ್ ಆಗುತ್ತಿದೆ...</p>}>
        <ChildComponent />
      </Suspense>
    </ErrorBoundary>
  );
};

ಡೇಟಾ ಫೆಚಿಂಗ್ ಸಮಯದಲ್ಲಿ ಸಂಭವಿಸಬಹುದಾದ ಯಾವುದೇ ದೋಷಗಳನ್ನು ನಿರ್ವಹಿಸಲು ನಿಮ್ಮ <Suspense> ಬೌಂಡರಿಯನ್ನು <ErrorBoundary> ನೊಂದಿಗೆ ಸುತ್ತುವರಿಯಿರಿ.

ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೇಶನ್

ಸಸ್ಪೆನ್ಸ್ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಸುಧಾರಿಸುತ್ತದೆಯಾದರೂ, ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಗಳನ್ನು ತಪ್ಪಿಸಲು ನಿಮ್ಮ ಡೇಟಾ ಫೆಚಿಂಗ್ ಮತ್ತು ಕಾಂಪೊನೆಂಟ್ ರೆಂಡರಿಂಗ್ ಅನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದು ಅತ್ಯಗತ್ಯ. ಈ ಕೆಳಗಿನವುಗಳನ್ನು ಪರಿಗಣಿಸಿ:

• ಮೆಮೊಯಿಝೇಶನ್: ಒಂದೇ ರೀತಿಯ ಪ್ರಾಪ್ಸ್‌ಗಳನ್ನು ಪಡೆಯುವ ಕಾಂಪೊನೆಂಟ್‌ಗಳ ಅನಗತ್ಯ ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ತಡೆಯಲು React.memo ಬಳಸಿ.
• ಕೋಡ್ ಸ್ಪ್ಲಿಟಿಂಗ್: ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಸಣ್ಣ ಚಂಕ್‌ಗಳಾಗಿ ವಿಭಜಿಸಲು React.lazy ಬಳಸಿ, ಆರಂಭಿಕ ಲೋಡ್ ಸಮಯವನ್ನು ಕಡಿಮೆ ಮಾಡಿ.
• ಕ್ಯಾಶಿಂಗ್: ಅನಗತ್ಯ ಡೇಟಾ ಫೆಚಿಂಗ್ ಅನ್ನು ತಪ್ಪಿಸಲು ಕ್ಯಾಶಿಂಗ್ ತಂತ್ರಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಿ.
• ಡಿಬೌನ್ಸಿಂಗ್ ಮತ್ತು ಥ್ರಾಟ್ಲಿಂಗ್: API ಕರೆಗಳ ಆವರ್ತನವನ್ನು ಸೀಮಿತಗೊಳಿಸಲು ಡಿಬೌನ್ಸಿಂಗ್ ಮತ್ತು ಥ್ರಾಟ್ಲಿಂಗ್ ತಂತ್ರಗಳನ್ನು ಬಳಸಿ.

ಸರ್ವರ್-ಸೈಡ್ ರೆಂಡರಿಂಗ್ (SSR)

ಸಸ್ಪೆನ್ಸ್ ಅನ್ನು Next.js ಮತ್ತು Remix ನಂತಹ ಸರ್ವರ್-ಸೈಡ್ ರೆಂಡರಿಂಗ್ (SSR) ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳೊಂದಿಗೆ ಸಹ ಬಳಸಬಹುದು. ಆದಾಗ್ಯೂ, ಸಸ್ಪೆನ್ಸ್‌ನೊಂದಿಗೆ SSR ಗೆ ಎಚ್ಚರಿಕೆಯ ಪರಿಗಣನೆ ಅಗತ್ಯವಿರುತ್ತದೆ, ಏಕೆಂದರೆ ಇದು ಡೇಟಾ ಹೈಡ್ರೇಶನ್‌ಗೆ ಸಂಬಂಧಿಸಿದ ಸಂಕೀರ್ಣತೆಗಳನ್ನು ಪರಿಚಯಿಸಬಹುದು. ಅಸಂಗತತೆಗಳನ್ನು ತಪ್ಪಿಸಲು ಸರ್ವರ್‌ನಲ್ಲಿ ಪಡೆದ ಡೇಟಾವನ್ನು ಸರಿಯಾಗಿ ಸೀರಿಯಲೈಜ್ ಮಾಡಿ ಕ್ಲೈಂಟ್‌ನಲ್ಲಿ ಹೈಡ್ರೇಟ್ ಮಾಡಲಾಗಿದೆಯೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವುದು ಬಹಳ ಮುಖ್ಯ. SSR ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ SSR ನೊಂದಿಗೆ ಸಸ್ಪೆನ್ಸ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು ಸಹಾಯ ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ನೀಡುತ್ತವೆ.

ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು ಮತ್ತು ಬಳಕೆಯ ಪ್ರಕರಣಗಳು

ನೈಜ-ಪ್ರಪಂಚದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಸಸ್ಪೆನ್ಸ್ ಅನ್ನು ಹೇಗೆ ಬಳಸಬಹುದು ಎಂಬುದರ ಕೆಲವು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳನ್ನು ಅನ್ವೇಷಿಸೋಣ:

1. ಇ-ಕಾಮರ್ಸ್ ಉತ್ಪನ್ನ ಪುಟ

ಇ-ಕಾಮರ್ಸ್ ಉತ್ಪನ್ನ ಪುಟದಲ್ಲಿ, ಉತ್ಪನ್ನದ ವಿವರಗಳು, ವಿಮರ್ಶೆಗಳು ಮತ್ತು ಸಂಬಂಧಿತ ಉತ್ಪನ್ನಗಳಂತಹ ಅಸಿಂಕ್ರೋನಸ್ ಆಗಿ ಡೇಟಾವನ್ನು ಲೋಡ್ ಮಾಡುವ ಅನೇಕ ವಿಭಾಗಗಳು ಇರಬಹುದು. ಡೇಟಾ ಪಡೆಯುವಾಗ ಪ್ರತಿಯೊಂದು ವಿಭಾಗಕ್ಕೂ ಲೋಡಿಂಗ್ ಸೂಚಕವನ್ನು ಪ್ರದರ್ಶಿಸಲು ನೀವು ಸಸ್ಪೆನ್ಸ್ ಅನ್ನು ಬಳಸಬಹುದು.

2. ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ಫೀಡ್

ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ಫೀಡ್‌ನಲ್ಲಿ, ನೀವು ಪೋಸ್ಟ್‌ಗಳು, ಕಾಮೆಂಟ್‌ಗಳು ಮತ್ತು ಬಳಕೆದಾರರ ಪ್ರೊಫೈಲ್‌ಗಳನ್ನು ಹೊಂದಿರಬಹುದು, ಅದು ಸ್ವತಂತ್ರವಾಗಿ ಡೇಟಾವನ್ನು ಲೋಡ್ ಮಾಡುತ್ತದೆ. ಡೇಟಾ ಪಡೆಯುವಾಗ ಪ್ರತಿಯೊಂದು ಪೋಸ್ಟ್‌ಗೆ ಸ್ಕೆಲಿಟನ್ ಲೋಡಿಂಗ್ ಅನಿಮೇಷನ್ ಅನ್ನು ಪ್ರದರ್ಶಿಸಲು ನೀವು ಸಸ್ಪೆನ್ಸ್ ಅನ್ನು ಬಳಸಬಹುದು.

3. ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಅಪ್ಲಿಕೇಶನ್

ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ, ನೀವು ಚಾರ್ಟ್‌ಗಳು, ಟೇಬಲ್‌ಗಳು ಮತ್ತು ಮ್ಯಾಪ್‌ಗಳನ್ನು ಹೊಂದಿರಬಹುದು, ಅದು ವಿವಿಧ ಮೂಲಗಳಿಂದ ಡೇಟಾವನ್ನು ಲೋಡ್ ಮಾಡುತ್ತದೆ. ಡೇಟಾ ಪಡೆಯುವಾಗ ಪ್ರತಿಯೊಂದು ಚಾರ್ಟ್, ಟೇಬಲ್ ಅಥವಾ ಮ್ಯಾಪ್‌ಗೆ ಲೋಡಿಂಗ್ ಸೂಚಕವನ್ನು ಪ್ರದರ್ಶಿಸಲು ನೀವು ಸಸ್ಪೆನ್ಸ್ ಅನ್ನು ಬಳಸಬಹುದು.

ಒಂದು **ಜಾಗತಿಕ** ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಾಗಿ, ಈ ಕೆಳಗಿನವುಗಳನ್ನು ಪರಿಗಣಿಸಿ:

• ಸಮಯ ವಲಯಗಳು: ಬಳಕೆದಾರರ ಸ್ಥಳೀಯ ಸಮಯ ವಲಯದಲ್ಲಿ ಡೇಟಾವನ್ನು ಪ್ರದರ್ಶಿಸಿ.
• ಕರೆನ್ಸಿಗಳು: ಬಳಕೆದಾರರ ಸ್ಥಳೀಯ ಕರೆನ್ಸಿಯಲ್ಲಿ ವಿತ್ತೀಯ ಮೌಲ್ಯಗಳನ್ನು ಪ್ರದರ್ಶಿಸಿ.
• ಭಾಷೆಗಳು: ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಇಂಟರ್ಫೇಸ್‌ಗೆ ಬಹುಭಾಷಾ ಬೆಂಬಲವನ್ನು ಒದಗಿಸಿ.
• ಪ್ರಾದೇಶಿಕ ಡೇಟಾ: ಬಳಕೆದಾರರಿಗೆ ತಮ್ಮ ಪ್ರದೇಶ ಅಥವಾ ದೇಶದ ಆಧಾರದ ಮೇಲೆ ಡೇಟಾವನ್ನು ಫಿಲ್ಟರ್ ಮಾಡಲು ಮತ್ತು ವೀಕ್ಷಿಸಲು ಅನುಮತಿಸಿ.

ತೀರ್ಮಾನ

ರಿಯಾಕ್ಟ್ ಸಸ್ಪೆನ್ಸ್ ನಿಮ್ಮ ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಅಸಿಂಕ್ರೋನಸ್ ಡೇಟಾ ಫೆಚಿಂಗ್ ಮತ್ತು ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಒಂದು ಶಕ್ತಿಯುತ ಸಾಧನವಾಗಿದೆ. ನೆಸ್ಟೆಡ್ ಲೋಡಿಂಗ್ ನಿರ್ವಹಣೆಗಾಗಿ ವಿವಿಧ ತಂತ್ರಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ಸಂಕೀರ್ಣ ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀಗಳಲ್ಲಿಯೂ ಸಹ ಸುಗಮ ಮತ್ತು ಹೆಚ್ಚು ಆಕರ್ಷಕವಾದ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ರಚಿಸಬಹುದು. ಉತ್ಪಾದನಾ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಸಸ್ಪೆನ್ಸ್ ಬಳಸುವಾಗ ದೋಷ ನಿರ್ವಹಣೆ, ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೇಶನ್ ಮತ್ತು ಸರ್ವರ್-ಸೈಡ್ ರೆಂಡರಿಂಗ್ ಅನ್ನು ಪರಿಗಣಿಸಲು ಮರೆಯದಿರಿ. ಅಸಿಂಕ್ರೋನಸ್ ಕಾರ್ಯಾಚರಣೆಗಳು ಅನೇಕ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ಸಾಮಾನ್ಯವಾಗಿದೆ, ಮತ್ತು ರಿಯಾಕ್ಟ್ ಸಸ್ಪೆನ್ಸ್ ಅನ್ನು ಬಳಸುವುದು ಅವುಗಳನ್ನು ನಿರ್ವಹಿಸಲು ನಿಮಗೆ ಸ್ವಚ್ಛವಾದ ಮಾರ್ಗವನ್ನು ನೀಡುತ್ತದೆ.