ರಿಯಾಕ್ಟ್ experimental_SuspenseList ಕೋಆರ್ಡಿನೇಷನ್ ಇಂಜಿನ್: ಸಸ್ಪೆನ್ಸ್ ನಿರ್ವಹಣೆಯನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದು

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

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

experimental_SuspenseList ಬಗ್ಗೆ ತಿಳಿಯುವ ಮೊದಲು, ರಿಯಾಕ್ಟ್ ಸಸ್ಪೆನ್ಸ್‌ನ ಮೂಲಭೂತ ಅಂಶಗಳನ್ನು ಪುನರಾವಲೋಕಿಸೋಣ:

• ಸಸ್ಪೆನ್ಸ್ ಎಂದರೇನು? ಸಸ್ಪೆನ್ಸ್ ಎನ್ನುವುದು ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್ ಆಗಿದ್ದು, ಇದು ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ರೆಂಡರ್ ಆಗುವ ಮೊದಲು ಯಾವುದಕ್ಕಾದರೂ "ಕಾಯಲು" ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಈ "ಯಾವುದೋ" ಸಾಮಾನ್ಯವಾಗಿ ಅಸಿಂಕ್ರೋನಸ್ ಡೇಟಾ ಫೆಚಿಂಗ್ ಆಗಿರುತ್ತದೆ, ಆದರೆ ಇದು ಇತರ ದೀರ್ಘಕಾಲದ ಕಾರ್ಯಾಚರಣೆಗಳೂ ಆಗಿರಬಹುದು.
• ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ? ನೀವು ಸಸ್ಪೆಂಡ್ ಆಗಬಹುದಾದ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು (ಅಂದರೆ, ಅಸಿಂಕ್ರೋನಸ್ ಡೇಟಾವನ್ನು ಅವಲಂಬಿಸಿರುವ ಕಾಂಪೊನೆಂಟ್) <Suspense> ಬೌಂಡರಿಯೊಂದಿಗೆ ಸುತ್ತುವರಿಯುತ್ತೀರಿ. <Suspense> ಕಾಂಪೊನೆಂಟ್‌ನೊಳಗೆ, ನೀವು fallback ಪ್ರಾಪ್ ಅನ್ನು ಒದಗಿಸುತ್ತೀರಿ, ಇದು ಕಾಂಪೊನೆಂಟ್ ಸಸ್ಪೆಂಡ್ ಆಗಿರುವಾಗ ಪ್ರದರ್ಶಿಸಬೇಕಾದ UI ಅನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ.
• ಇದು ಯಾವಾಗ ಸಸ್ಪೆಂಡ್ ಆಗುತ್ತದೆ? ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಇನ್ನೂ ರಿಸಾಲ್ವ್ ಆಗದ ಪ್ರಾಮಿಸ್ ನಿಂದ ಮೌಲ್ಯವನ್ನು ಓದಲು ಪ್ರಯತ್ನಿಸಿದಾಗ ಸಸ್ಪೆಂಡ್ ಆಗುತ್ತದೆ. react-cache ಮತ್ತು relay ನಂತಹ ಲೈಬ್ರರಿಗಳನ್ನು ಸಸ್ಪೆನ್ಸ್‌ನೊಂದಿಗೆ ಸುಲಭವಾಗಿ ಸಂಯೋಜಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ.

ಉದಾಹರಣೆ: ಮೂಲಭೂತ ಸಸ್ಪೆನ್ಸ್

ಬಳಕೆದಾರರ ಡೇಟಾವನ್ನು ಫೆಚ್ ಮಾಡುವ ಸರಳ ಉದಾಹರಣೆಯೊಂದಿಗೆ ಇದನ್ನು ವಿವರಿಸೋಣ:

            
import React, { Suspense } from 'react';

// Pretend this fetches data asynchronously
const fetchData = (id) => {
  let promise;
  return {
    read() {
      if (!promise) {
        promise = new Promise(resolve => {
          setTimeout(() => {
            resolve({ id, name: `User ${id}` });
          }, 1000);
        });
      }
      
      if (promise) {
        let status = 'pending';
        let result;

        const suspender = promise.then(
          (r) => {
            status = 'success';
            result = r;
          },
          (e) => {
            status = 'error';
            result = e;
          },
        );

        if (status === 'pending') {
          throw suspender;
        }
        if (status === 'error') {
          throw result;
        }
        return result;
      }
    },
  };
};

const UserProfile = ({ userId }) => {
  const user = fetchData(userId).read();
  return (
    <div>
      <h2>User Profile</h2>
      <p>ID: {user.id}</p>
      <p>Name: {user.name}</p>
    </div>
  );
};

const App = () => (
  <Suspense fallback={<p>Loading user data...</p>}>
    <UserProfile userId={123} />
  </Suspense>
);

export default App;

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, fetchData ಬಳಕೆದಾರರ ಡೇಟಾವನ್ನು ಫೆಚ್ ಮಾಡುವಾಗ UserProfile ಸಸ್ಪೆಂಡ್ ಆಗುತ್ತದೆ. ಡೇಟಾ ಸಿದ್ಧವಾಗುವವರೆಗೆ <Suspense> ಕಾಂಪೊನೆಂಟ್ "ಬಳಕೆದಾರರ ಡೇಟಾ ಲೋಡ್ ಆಗುತ್ತಿದೆ..." ಎಂದು ಪ್ರದರ್ಶಿಸುತ್ತದೆ.

experimental_SuspenseList ಪರಿಚಯ

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

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

experimental_SuspenseList ನ ಪ್ರಮುಖ ಪ್ರಯೋಜನಗಳು

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

experimental_SuspenseList ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

experimental_SuspenseList ತನ್ನ ಚೈಲ್ಡ್ <Suspense> ಕಾಂಪೊನೆಂಟ್‌ಗಳ ಗೋಚರತೆಯನ್ನು ಸಂಯೋಜಿಸುತ್ತದೆ. ಇದು ಎರಡು ಪ್ರಮುಖ ಪ್ರಾಪ್‌ಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ:

• `revealOrder`: <Suspense> ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳು ಯಾವ ಕ್ರಮದಲ್ಲಿ ಬಹಿರಂಗಗೊಳ್ಳಬೇಕು ಎಂಬುದನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. ಸಂಭಾವ್ಯ ಮೌಲ್ಯಗಳು:
• `forwards`: ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀನಲ್ಲಿ ಕಾಣಿಸಿಕೊಳ್ಳುವ ಕ್ರಮದಲ್ಲಿ (ಮೇಲಿನಿಂದ ಕೆಳಕ್ಕೆ) ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳು ಬಹಿರಂಗಗೊಳ್ಳುತ್ತವೆ.
• `backwards`: ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳು ಹಿಮ್ಮುಖ ಕ್ರಮದಲ್ಲಿ (ಕೆಳಗಿನಿಂದ ಮೇಲಕ್ಕೆ) ಬಹಿರಂಗಗೊಳ್ಳುತ್ತವೆ.
• `together`: ಎಲ್ಲಾ ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳು ಏಕಕಾಲದಲ್ಲಿ ಬಹಿರಂಗಗೊಳ್ಳುತ್ತವೆ.
• `tail`: ಒಂದು ಸಸ್ಪೆಂಡ್ ಆದಾಗ ಉಳಿದ <Suspense> ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಹೇಗೆ ನಿರ್ವಹಿಸಬೇಕು ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ. ಸಂಭಾವ್ಯ ಮೌಲ್ಯಗಳು:
• `suspense`: ಪ್ರಸ್ತುತ ಫಾಲ್‌ಬ್ಯಾಕ್ ರಿಸಾಲ್ವ್ ಆಗುವವರೆಗೆ ಯಾವುದೇ ಹೆಚ್ಚಿನ ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳು ಬಹಿರಂಗಗೊಳ್ಳುವುದನ್ನು ತಡೆಯುತ್ತದೆ. (ಡೀಫಾಲ್ಟ್)
• `collapsed`: ಉಳಿದ ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಮರೆಮಾಡುತ್ತದೆ. ಪ್ರಸ್ತುತ ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಯನ್ನು ಮಾತ್ರ ಬಹಿರಂಗಪಡಿಸುತ್ತದೆ.

experimental_SuspenseList ನ ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು

experimental_SuspenseList ನ ಶಕ್ತಿಯನ್ನು ಪ್ರದರ್ಶಿಸಲು ಕೆಲವು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳನ್ನು ಅನ್ವೇಷಿಸೋಣ.

ಉದಾಹರಣೆ 1: ಫಾರ್ವರ್ಡ್ಸ್ ರಿವೀಲ್ ಆರ್ಡರ್‌ನೊಂದಿಗೆ ಪ್ರೊಫೈಲ್ ಪುಟವನ್ನು ಲೋಡ್ ಮಾಡುವುದು

ಒಂದು ಪ್ರೊಫೈಲ್ ಪುಟದಲ್ಲಿ ಬಳಕೆದಾರರ ವಿವರಗಳು, ಇತ್ತೀಚಿನ ಚಟುವಟಿಕೆ, ಮತ್ತು ಸ್ನೇಹಿತರ ಪಟ್ಟಿ ಹೀಗೆ ಹಲವಾರು ವಿಭಾಗಗಳಿವೆ ಎಂದು ಊಹಿಸಿಕೊಳ್ಳಿ. ಈ ವಿಭಾಗಗಳನ್ನು ನಿರ್ದಿಷ್ಟ ಕ್ರಮದಲ್ಲಿ ಲೋಡ್ ಮಾಡಲು ನಾವು experimental_SuspenseList ಅನ್ನು ಬಳಸಬಹುದು, ಇದರಿಂದ ಗ್ರಹಿಸಿದ ಕಾರ್ಯಕ್ಷಮತೆ ಹೆಚ್ಚಾಗುತ್ತದೆ.

            
import React, { Suspense } from 'react';
import { unstable_SuspenseList as SuspenseList } from 'react'; // Import experimental API

const fetchUserDetails = (userId) => {
  let promise;
  return {
    read() {
      if (!promise) {
        promise = new Promise(resolve => {
          setTimeout(() => {
            resolve({ id: userId, name: `User ${userId}`, bio: 'A passionate developer' });
          }, 500);
        });
      }
      
      if (promise) {
        let status = 'pending';
        let result;

        const suspender = promise.then(
          (r) => {
            status = 'success';
            result = r;
          },
          (e) => {
            status = 'error';
            result = e;
          },
        );

        if (status === 'pending') {
          throw suspender;
        }
        if (status === 'error') {
          throw result;
        }
        return result;
      }
    },
  };
};

const fetchRecentActivity = (userId) => {
  let promise;
  return {
    read() {
      if (!promise) {
        promise = new Promise(resolve => {
          setTimeout(() => {
            resolve([
              { id: 1, activity: 'Posted a new photo' },
              { id: 2, activity: 'Commented on a post' },
            ]);
          }, 700);
        });
      }
      
      if (promise) {
        let status = 'pending';
        let result;

        const suspender = promise.then(
          (r) => {
            status = 'success';
            result = r;
          },
          (e) => {
            status = 'error';
            result = e;
          },
        );

        if (status === 'pending') {
          throw suspender;
        }
        if (status === 'error') {
          throw result;
        }
        return result;
      }
    },
  };
};

const UserDetails = ({ userId }) => {
  const user = fetchUserDetails(userId).read();
  return (
    <div>
      <h3>User Details</h3>
      <p>Name: {user.name}</p>
      <p>Bio: {user.bio}</p>
    </div>
  );
};

const RecentActivity = ({ userId }) => {
  const activity = fetchRecentActivity(userId).read();
  return (
    <div>
      <h3>Recent Activity</h3>
      <ul>
        {activity.map(item => (<li key={item.id}>{item.activity}</li>))}
      </ul>
    </div>
  );
};

const FriendsList = ({ userId }) => {
   // Placeholder - replace with actual data fetching
  return <div><h3>Friends</h3><p>Loading friends...</p></div>;
}


const App = () => (
  <SuspenseList revealOrder="forwards">
    <Suspense fallback={<p>Loading user details...</p>}>
      <UserDetails userId={123} />
    </Suspense>
    <Suspense fallback={<p>Loading recent activity...</p>}>
      <RecentActivity userId={123} />
    </Suspense>
     <Suspense fallback={<p>Loading friends...</p>}>
      <FriendsList userId={123} />
    </Suspense>
  </SuspenseList>
);

export default App;

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, revealOrder="forwards" ಪ್ರಾಪ್, "ಬಳಕೆದಾರರ ವಿವರಗಳನ್ನು ಲೋಡ್ ಮಾಡಲಾಗುತ್ತಿದೆ..." ಫಾಲ್‌ಬ್ಯಾಕ್ ಮೊದಲು ಪ್ರದರ್ಶನಗೊಳ್ಳುತ್ತದೆ, ನಂತರ "ಇತ್ತೀಚಿನ ಚಟುವಟಿಕೆಗಳನ್ನು ಲೋಡ್ ಮಾಡಲಾಗುತ್ತಿದೆ..." ಫಾಲ್‌ಬ್ಯಾಕ್, ಮತ್ತು ನಂತರ "ಸ್ನೇಹಿತರನ್ನು ಲೋಡ್ ಮಾಡಲಾಗುತ್ತಿದೆ..." ಫಾಲ್‌ಬ್ಯಾಕ್ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಇದು ಹೆಚ್ಚು ವ್ಯವಸ್ಥಿತ ಮತ್ತು ಅರ್ಥಗರ್ಭಿತ ಲೋಡಿಂಗ್ ಅನುಭವವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.

ಉದಾಹರಣೆ 2: ಕ್ಲೀನರ್ ಇನಿಶಿಯಲ್ ಲೋಡ್‌ಗಾಗಿ `tail="collapsed"` ಬಳಸುವುದು

ಕೆಲವೊಮ್ಮೆ, ನೀವು ಒಂದು ಸಮಯದಲ್ಲಿ ಕೇವಲ ಒಂದು ಲೋಡಿಂಗ್ ಸೂಚಕವನ್ನು ತೋರಿಸಲು ಬಯಸಬಹುದು. tail="collapsed" ಪ್ರಾಪ್ ಇದನ್ನು ಸಾಧಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

            
import React, { Suspense } from 'react';
import { unstable_SuspenseList as SuspenseList } from 'react'; // Import experimental API

// ... (fetchUserDetails and UserDetails components from previous example)
const fetchRecentActivity = (userId) => {
  let promise;
  return {
    read() {
      if (!promise) {
        promise = new Promise(resolve => {
          setTimeout(() => {
            resolve([
              { id: 1, activity: 'Posted a new photo' },
              { id: 2, activity: 'Commented on a post' },
            ]);
          }, 700);
        });
      }
      
      if (promise) {
        let status = 'pending';
        let result;

        const suspender = promise.then(
          (r) => {
            status = 'success';
            result = r;
          },
          (e) => {
            status = 'error';
            result = e;
          },
        );

        if (status === 'pending') {
          throw suspender;
        }
        if (status === 'error') {
          throw result;
        }
        return result;
      }
    },
  };
};

const RecentActivity = ({ userId }) => {
  const activity = fetchRecentActivity(userId).read();
  return (
    <div>
      <h3>Recent Activity</h3>
      <ul>
        {activity.map(item => (<li key={item.id}>{item.activity}</li>))}
      </ul>
    </div>
  );
};

const FriendsList = ({ userId }) => {
   // Placeholder - replace with actual data fetching
  return <div><h3>Friends</h3><p>Loading friends...</p></div>;
}


const App = () => (
  <SuspenseList revealOrder="forwards" tail="collapsed">
    <Suspense fallback={<p>Loading user details...</p>}>
      <UserDetails userId={123} />
    </Suspense>
    <Suspense fallback={<p>Loading recent activity...</p>}>
      <RecentActivity userId={123} />
    </Suspense>
    <Suspense fallback={<p>Loading friends...</p>}>
      <FriendsList userId={123} />
    </Suspense>
  </SuspenseList>
);

export default App;

            

              
                Copy
              
            
          

tail="collapsed" ನೊಂದಿಗೆ, ಆರಂಭದಲ್ಲಿ "ಬಳಕೆದಾರರ ವಿವರಗಳನ್ನು ಲೋಡ್ ಮಾಡಲಾಗುತ್ತಿದೆ..." ಫಾಲ್‌ಬ್ಯಾಕ್ ಮಾತ್ರ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ. ಬಳಕೆದಾರರ ವಿವರಗಳು ಲೋಡ್ ಆದ ನಂತರ, "ಇತ್ತೀಚಿನ ಚಟುವಟಿಕೆಗಳನ್ನು ಲೋಡ್ ಮಾಡಲಾಗುತ್ತಿದೆ..." ಫಾಲ್‌ಬ್ಯಾಕ್ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ, ಮತ್ತು ಹೀಗೆ ಮುಂದುವರಿಯುತ್ತದೆ. ಇದು ಸ್ವಚ್ಛ ಮತ್ತು ಕಡಿಮೆ ಗೊಂದಲಮಯ ಆರಂಭಿಕ ಲೋಡಿಂಗ್ ಅನುಭವವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.

ಉದಾಹರಣೆ 3: ನಿರ್ಣಾಯಕ ವಿಷಯಕ್ಕೆ ಆದ್ಯತೆ ನೀಡಲು `revealOrder="backwards"`

ಕೆಲವು ಸನ್ನಿವೇಶಗಳಲ್ಲಿ, ಅತ್ಯಂತ ಪ್ರಮುಖ ವಿಷಯವು ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀನ ಕೆಳಭಾಗದಲ್ಲಿರಬಹುದು. ಆ ವಿಷಯವನ್ನು ಮೊದಲು ಲೋಡ್ ಮಾಡಲು ಆದ್ಯತೆ ನೀಡಲು ನೀವು `revealOrder="backwards"` ಅನ್ನು ಬಳಸಬಹುದು.

            
import React, { Suspense } from 'react';
import { unstable_SuspenseList as SuspenseList } from 'react'; // Import experimental API

// ... (fetchUserDetails and UserDetails components from previous example)
const fetchRecentActivity = (userId) => {
  let promise;
  return {
    read() {
      if (!promise) {
        promise = new Promise(resolve => {
          setTimeout(() => {
            resolve([
              { id: 1, activity: 'Posted a new photo' },
              { id: 2, activity: 'Commented on a post' },
            ]);
          }, 700);
        });
      }
      
      if (promise) {
        let status = 'pending';
        let result;

        const suspender = promise.then(
          (r) => {
            status = 'success';
            result = r;
          },
          (e) => {
            status = 'error';
            result = e;
          },
        );

        if (status === 'pending') {
          throw suspender;
        }
        if (status === 'error') {
          throw result;
        }
        return result;
      }
    },
  };
};

const RecentActivity = ({ userId }) => {
  const activity = fetchRecentActivity(userId).read();
  return (
    <div>
      <h3>Recent Activity</h3>
      <ul>
        {activity.map(item => (<li key={item.id}>{item.activity}</li>))}
      </ul>
    </div>
  );
};

const FriendsList = ({ userId }) => {
   // Placeholder - replace with actual data fetching
  return <div><h3>Friends</h3><p>Loading friends...</p></div>;
}


const App = () => (
  <SuspenseList revealOrder="backwards">
    <Suspense fallback={<p>Loading user details...</p>}>
      <UserDetails userId={123} />
    </Suspense>
    <Suspense fallback={<p>Loading recent activity...</p>}>
      <RecentActivity userId={123} />
    </Suspense>
     <Suspense fallback={<p>Loading friends...</p>}>
      <FriendsList userId={123} />
    </Suspense>
  </SuspenseList>
);

export default App;

            

              
                Copy
              
            
          

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

ಜಾಗತಿಕ ಪರಿಗಣನೆಗಳು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

ಜಾಗತಿಕ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ experimental_SuspenseList ಬಳಸುವಾಗ, ಈ ಕೆಳಗಿನ ಪರಿಗಣನೆಗಳನ್ನು ನೆನಪಿನಲ್ಲಿಡಿ:

• ನೆಟ್‌ವರ್ಕ್ ಲೇಟೆನ್ಸಿ: ವಿವಿಧ ಭೌಗೋಳಿಕ ಸ್ಥಳಗಳಲ್ಲಿನ ಬಳಕೆದಾರರು ವಿಭಿನ್ನ ನೆಟ್‌ವರ್ಕ್ ಲೇಟೆನ್ಸಿಗಳನ್ನು ಅನುಭವಿಸುತ್ತಾರೆ. ವಿಶ್ವಾದ್ಯಂತ ಬಳಕೆದಾರರಿಗೆ ಲೇಟೆನ್ಸಿ ಕಡಿಮೆ ಮಾಡಲು ಕಂಟೆಂಟ್ ಡೆಲಿವರಿ ನೆಟ್‌ವರ್ಕ್ (CDN) ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.
• ಡೇಟಾ ಸ್ಥಳೀಕರಣ: ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಸ್ಥಳೀಯ ಡೇಟಾವನ್ನು ಪ್ರದರ್ಶಿಸಿದರೆ, ಡೇಟಾ ಫೆಚಿಂಗ್ ಪ್ರಕ್ರಿಯೆಯು ಬಳಕೆದಾರರ ಲೊಕೇಲ್ ಅನ್ನು ಗಣನೆಗೆ ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಸೂಕ್ತ ಡೇಟಾವನ್ನು ಹಿಂಪಡೆಯಲು Accept-Language ಹೆಡರ್ ಅಥವಾ ಅಂತಹುದೇ ವ್ಯವಸ್ಥೆಯನ್ನು ಬಳಸಿ.
• ಪ್ರವೇಶಸಾಧ್ಯತೆ: ನಿಮ್ಮ ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳು ಪ್ರವೇಶಸಾಧ್ಯವಾಗಿವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ವಿಕಲಾಂಗ ಬಳಕೆದಾರರಿಗೆ ಉತ್ತಮ ಅನುಭವವನ್ನು ಒದಗಿಸಲು ಸೂಕ್ತವಾದ ARIA ಅಟ್ರಿಬ್ಯೂಟ್‌ಗಳು ಮತ್ತು ಸೆಮ್ಯಾಂಟಿಕ್ HTML ಬಳಸಿ. ಉದಾಹರಣೆಗೆ, ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗೆ role="alert" ಅಟ್ರಿಬ್ಯೂಟ್ ಅನ್ನು ಒದಗಿಸಿ, ಇದು ತಾತ್ಕಾಲಿಕ ಲೋಡಿಂಗ್ ಸ್ಥಿತಿ ಎಂದು ಸೂಚಿಸುತ್ತದೆ.
• ಲೋಡಿಂಗ್ ಸ್ಥಿತಿ ವಿನ್ಯಾಸ: ನಿಮ್ಮ ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳನ್ನು ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕ ಮತ್ತು ಮಾಹಿತಿಯುಕ್ತವಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಿ. ಡೇಟಾ ಲೋಡ್ ಆಗುತ್ತಿದೆ ಎಂದು ಸೂಚಿಸಲು ಪ್ರೋಗ್ರೆಸ್ ಬಾರ್‌ಗಳು, ಸ್ಪಿನ್ನರ್‌ಗಳು ಅಥವಾ ಇತರ ದೃಶ್ಯ ಸೂಚನೆಗಳನ್ನು ಬಳಸಿ. ಜೆನೆರಿಕ್ "ಲೋಡಿಂಗ್..." ಸಂದೇಶಗಳನ್ನು ಬಳಸುವುದನ್ನು ತಪ್ಪಿಸಿ, ಏಕೆಂದರೆ ಅವು ಬಳಕೆದಾರರಿಗೆ ಯಾವುದೇ ಉಪಯುಕ್ತ ಮಾಹಿತಿಯನ್ನು ನೀಡುವುದಿಲ್ಲ.
• ದೋಷ ನಿರ್ವಹಣೆ: ಡೇಟಾ ಫೆಚಿಂಗ್ ವಿಫಲವಾದಾಗ ಪ್ರಕರಣಗಳನ್ನು ಸುಲಭವಾಗಿ ನಿರ್ವಹಿಸಲು ದೃಢವಾದ ದೋಷ ನಿರ್ವಹಣೆಯನ್ನು ಅಳವಡಿಸಿ. ಬಳಕೆದಾರರಿಗೆ ಮಾಹಿತಿಯುಕ್ತ ದೋಷ ಸಂದೇಶಗಳನ್ನು ಪ್ರದರ್ಶಿಸಿ ಮತ್ತು ವಿನಂತಿಯನ್ನು ಮರುಪ್ರಯತ್ನಿಸಲು ಆಯ್ಕೆಗಳನ್ನು ಒದಗಿಸಿ.

ಸಸ್ಪೆನ್ಸ್ ನಿರ್ವಹಣೆಗಾಗಿ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

• ಗ್ರ್ಯಾನ್ಯುಲರ್ ಸಸ್ಪೆನ್ಸ್ ಬೌಂಡರಿಗಳು: ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳನ್ನು ಪ್ರತ್ಯೇಕಿಸಲು ಸಣ್ಣ, ಚೆನ್ನಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ <Suspense> ಬೌಂಡರಿಗಳನ್ನು ಬಳಸಿ. ಇದು UI ನ ವಿವಿಧ ಭಾಗಗಳನ್ನು ಸ್ವತಂತ್ರವಾಗಿ ಲೋಡ್ ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
• ಅತಿಯಾದ ಸಸ್ಪೆನ್ಸ್ ತಪ್ಪಿಸಿ: ಸಂಪೂರ್ಣ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಒಂದೇ <Suspense> ಬೌಂಡರಿಯಲ್ಲಿ ಸುತ್ತಬೇಡಿ. UI ನ ಒಂದು ಸಣ್ಣ ಭಾಗ ನಿಧಾನವಾಗಿ ಲೋಡ್ ಆದರೂ ಇದು ಕಳಪೆ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕೆ ಕಾರಣವಾಗಬಹುದು.
• ಡೇಟಾ ಫೆಚಿಂಗ್ ಲೈಬ್ರರಿಯನ್ನು ಬಳಸಿ: ಡೇಟಾ ಫೆಚಿಂಗ್ ಮತ್ತು ಸಸ್ಪೆನ್ಸ್‌ನೊಂದಿಗೆ ಏಕೀಕರಣವನ್ನು ಸರಳಗೊಳಿಸಲು react-cache ಅಥವಾ relay ನಂತಹ ಡೇಟಾ ಫೆಚಿಂಗ್ ಲೈಬ್ರರಿಯನ್ನು ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.
• ಡೇಟಾ ಫೆಚಿಂಗ್ ಅನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ: ವರ್ಗಾಯಿಸಬೇಕಾದ ಡೇಟಾದ ಪ್ರಮಾಣವನ್ನು ಕಡಿಮೆ ಮಾಡಲು ನಿಮ್ಮ ಡೇಟಾ ಫೆಚಿಂಗ್ ತರ್ಕವನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ. ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸಲು ಕ್ಯಾಶಿಂಗ್, ಪೇಜಿನೇಶನ್ ಮತ್ತು GraphQL ನಂತಹ ತಂತ್ರಗಳನ್ನು ಬಳಸಿ.
• ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಿ: ನಿಮ್ಮ ಸಸ್ಪೆನ್ಸ್ ಅಳವಡಿಕೆಯನ್ನು ವಿವಿಧ ಸನ್ನಿವೇಶಗಳಲ್ಲಿ ನಿರೀಕ್ಷೆಯಂತೆ ವರ್ತಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಿ. ವಿಭಿನ್ನ ನೆಟ್‌ವರ್ಕ್ ಲೇಟೆನ್ಸಿಗಳು ಮತ್ತು ದೋಷ ಪರಿಸ್ಥಿತಿಗಳೊಂದಿಗೆ ಪರೀಕ್ಷಿಸಿ.

ಸುಧಾರಿತ ಬಳಕೆಯ ಸಂದರ್ಭಗಳು

ಮೂಲಭೂತ ಉದಾಹರಣೆಗಳನ್ನು ಮೀರಿ, experimental_SuspenseList ಅನ್ನು ಹೆಚ್ಚು ಸುಧಾರಿತ ಸನ್ನಿವೇಶಗಳಲ್ಲಿ ಬಳಸಬಹುದು:

• ಡೈನಾಮಿಕ್ ಕಂಟೆಂಟ್ ಲೋಡಿಂಗ್: ಬಳಕೆದಾರರ ಸಂವಹನಗಳು ಅಥವಾ ಅಪ್ಲಿಕೇಶನ್ ಸ್ಥಿತಿಯ ಆಧಾರದ ಮೇಲೆ <Suspense> ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಸೇರಿಸಿ ಅಥವಾ ತೆಗೆದುಹಾಕಿ.
• ನೆಸ್ಟೆಡ್ ಸಸ್ಪೆನ್ಸ್ ಲಿಸ್ಟ್‌ಗಳು: ಸಂಕೀರ್ಣ ಲೋಡಿಂಗ್ ಶ್ರೇಣೀಕರಣಗಳನ್ನು ರಚಿಸಲು experimental_SuspenseList ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ನೆಸ್ಟ್ ಮಾಡಿ.
• ಟ್ರಾನ್ಸಿಷನ್‌ಗಳೊಂದಿಗೆ ಏಕೀಕರಣ: ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳು ಮತ್ತು ಲೋಡ್ ಆದ ವಿಷಯದ ನಡುವೆ ಸುಗಮ ಪರಿವರ್ತನೆಗಳನ್ನು ರಚಿಸಲು ರಿಯಾಕ್ಟ್‌ನ useTransition ಹುಕ್‌ನೊಂದಿಗೆ experimental_SuspenseList ಅನ್ನು ಸಂಯೋಜಿಸಿ.

ಮಿತಿಗಳು ಮತ್ತು ಪರಿಗಣನೆಗಳು

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

ತೀರ್ಮಾನ

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