M
MLOG
ರಿಯಾಕ್ಟ್ ಯೂಸ್ ಹುಕ್ ರಿಸೋರ್ಸ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್: ಗರಿಷ್ಠ ಕಾರ್ಯಕ್ಷಮತೆಗಾಗಿ ರಿಸೋರ್ಸ್ ಲೈಫ್‌ಸೈಕಲ್‌ಗಳನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದು | MLOG | MLOG

ವಿವರಣೆ:

ಉದಾಹರಣೆ 2: ವೆಬ್‌ಸಾಕೆಟ್ ಸಂಪರ್ಕಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು

ಈ ಉದಾಹರಣೆಯು "ಯೂಸ್" ಹುಕ್ ಮತ್ತು ಕಸ್ಟಮ್ ರಿಸೋರ್ಸ್ ರ‍್ಯಾಪರ್ ಬಳಸಿ ವೆಬ್‌ಸಾಕೆಟ್ ಸಂಪರ್ಕವನ್ನು ಹೇಗೆ ನಿರ್ವಹಿಸುವುದು ಎಂಬುದನ್ನು ತೋರಿಸುತ್ತದೆ.

            import React, { useState, useEffect, use } from 'react';

const createWebSocketResource = (url) => {
  let socket;
  let status = 'pending';
  let messageQueue = [];
  let listeners = [];

  const connect = () => {
    return new Promise((resolve, reject) => {
      socket = new WebSocket(url);

      socket.onopen = () => {
        status = 'connected';
        resolve();
        // Send queued messages
        messageQueue.forEach(msg => socket.send(msg));
        messageQueue = [];
      };

      socket.onerror = (error) => {
        status = 'error';
        reject(error);
      };

      socket.onmessage = (event) => {
        listeners.forEach(listener => listener(event.data));
      };

      socket.onclose = () => {
        status = 'closed';
        listeners = []; // Clear listeners to avoid memory leaks
      };
    });
  };

  const promise = connect();

  return {
    read() {
      use(promise);
    },
    send(message) {
      if (status === 'connected') {
        socket.send(message);
      } else {
        messageQueue.push(message);
      }
    },
    subscribe(listener) {
      listeners.push(listener);
      return () => {
        listeners = listeners.filter(l => l !== listener);
      };
    },
    close() {
        if (socket && socket.readyState !== WebSocket.CLOSED) {
            socket.close();
        }
    }
  };
};

function WebSocketComponent({ url }) {
  const socketResource = createWebSocketResource(url);
  // Suspend until connected
  socketResource.read();
  const [message, setMessage] = useState('');
  const [receivedMessages, setReceivedMessages] = useState([]);

  useEffect(() => {
    const unsubscribe = socketResource.subscribe(data => {
      setReceivedMessages(prevMessages => [...prevMessages, data]);
    });
    return () => {
        unsubscribe();
        socketResource.close();
    };
  }, [socketResource]);

  const sendMessage = () => {
    socketResource.send(message);
    setMessage('');
  };

  return (
    

       setMessage(e.target.value)} />
      
      

        Received Messages:
        
    
          {receivedMessages.map((msg, index) => (
            
  • {msg}
    • 
          ))}
        

      

    

  );
}

function App() {
  return (
    Connecting to WebSocket...
}> ); } export default App;

ವಿವರಣೆ:

ಉದಾಹರಣೆ 3: ಫೈಲ್ ಹ್ಯಾಂಡಲ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು

ಈ ಉದಾಹರಣೆಯು NodeJS ಫೈಲ್ ಹ್ಯಾಂಡಲ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು "ಯೂಸ್" ಹುಕ್‌ನೊಂದಿಗೆ ಸಂಪನ್ಮೂಲ ನಿರ್ವಹಣೆಯನ್ನು ವಿವರಿಸುತ್ತದೆ (ಇದು ಕೇವಲ NodeJS ಪರಿಸರದಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಮತ್ತು ಸಂಪನ್ಮೂಲ ಜೀವನಚಕ್ರ ಪರಿಕಲ್ಪನೆಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲು ಉದ್ದೇಶಿಸಲಾಗಿದೆ).

            // This example is designed for a NodeJS environment

const fs = require('node:fs/promises');
import React, { use } from 'react';

const createFileHandleResource = async (filePath) => {
  let fileHandle;

  const openFile = async () => {
    fileHandle = await fs.open(filePath, 'r');
    return fileHandle;
  };

  const promise = openFile();

  return {
    read() {
      return use(promise);
    },
    async close() {
      if (fileHandle) {
        await fileHandle.close();
        fileHandle = null;
      }
    },
    async readContents() {
      const handle = use(promise);
      const buffer = await handle.readFile();
      return buffer.toString();
    }
  };
};


function FileViewer({ filePath }) {
  const fileHandleResource = createFileHandleResource(filePath);
  const contents = fileHandleResource.readContents();

  React.useEffect(() => {
    return () => {
      // Cleanup when the component unmounts
      fileHandleResource.close();
    };
  }, [fileHandleResource]);

  return (
    

      
File Contents:

      
{contents}

    

  );
}

// Example Usage
async function App() {
  const filePath = 'example.txt';
  await fs.writeFile(filePath, 'Hello, world!\nThis is a test file.');

  return (
    

      
    

  );
}

export default App;

ವಿವರಣೆ:

ಸುಧಾರಿತ ತಂತ್ರಗಳು: ಎರರ್ ಬೌಂಡರೀಸ್, ರಿಸೋರ್ಸ್ ಪೂಲಿಂಗ್, ಮತ್ತು ಸರ್ವರ್ ಕಾಂಪೊನೆಂಟ್ಸ್

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

ಎರರ್ ಬೌಂಡರೀಸ್: ದೋಷಗಳನ್ನು ಸರಾಗವಾಗಿ ನಿಭಾಯಿಸುವುದು

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

            import React, { Component } from 'react';

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

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return 
Something went wrong.
;
    }

    return this.props.children; 
  }
}

function App() {
  return (
    
      Loading...
}> ); }

ರಿಸೋರ್ಸ್ ಪೂಲಿಂಗ್: ಸಂಪನ್ಮೂಲ ಮರುಬಳಕೆಯನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದು

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

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

(ಕಾಲ್ಪನಿಕ ಉದಾಹರಣೆ - ಅನುಷ್ಠಾನವು ನಿರ್ದಿಷ್ಟ ಸಂಪನ್ಮೂಲ ಮತ್ತು ಪೂಲಿಂಗ್ ಲೈಬ್ರರಿಯನ್ನು ಅವಲಂಬಿಸಿ ಬದಲಾಗುತ್ತದೆ):

            // Conceptual Example (not a complete, runnable implementation)

import React, { use } from 'react';
// Assume a database connection pool library exists
import { getConnectionFromPool, releaseConnectionToPool } from './dbPool';

const createDbConnectionResource = () => {
  let connection;

  const acquireConnection = async () => {
    connection = await getConnectionFromPool();
    return connection;
  };

  const promise = acquireConnection();

  return {
    read() {
      return use(promise);
    },
    release() {
      if (connection) {
        releaseConnectionToPool(connection);
        connection = null;
      }
    },
    query(sql) {
      const conn = use(promise);
      return conn.query(sql);
    }
  };
};

function MyDataComponent() {
  const dbResource = createDbConnectionResource();

  React.useEffect(() => {
    return () => {
      dbResource.release();
    };
  }, [dbResource]);

  const data = dbResource.query('SELECT * FROM my_table');
  return 
{data}
;
}

ರಿಯಾಕ್ಟ್ ಸರ್ವರ್ ಕಾಂಪೊನೆಂಟ್ಸ್ (RSCs): "ಯೂಸ್" ಹುಕ್‌ನ ನೈಸರ್ಗಿಕ ನೆಲೆ

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

RSCs ನಲ್ಲಿ, "ಯೂಸ್" ಹುಕ್ ಅನ್ನು ಕ್ಲೈಂಟ್-ಸೈಡ್ ಫೆಚಿಂಗ್ ಲೈಬ್ರರಿಗಳ ಅಗತ್ಯವಿಲ್ಲದೆ ನೇರವಾಗಿ ಡೇಟಾಬೇಸ್‌ಗಳು ಅಥವಾ API ಗಳಿಂದ ಡೇಟಾವನ್ನು ಪಡೆಯಲು ಬಳಸಬಹುದು. ಡೇಟಾವನ್ನು ಸರ್ವರ್‌ನಲ್ಲಿ ಪಡೆಯಲಾಗುತ್ತದೆ, ಮತ್ತು ಫಲಿತಾಂಶದ HTML ಅನ್ನು ಕ್ಲೈಂಟ್‌ಗೆ ಕಳುಹಿಸಲಾಗುತ್ತದೆ, ಅಲ್ಲಿ ಅದನ್ನು ರಿಯಾಕ್ಟ್‌ನಿಂದ ಹೈಡ್ರೇಟ್ ಮಾಡಲಾಗುತ್ತದೆ.

RSCs ನಲ್ಲಿ "ಯೂಸ್" ಹುಕ್ ಅನ್ನು ಬಳಸುವಾಗ, ಕ್ಲೈಂಟ್-ಸೈಡ್ ಸ್ಟೇಟ್ ಮತ್ತು ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳ ಕೊರತೆಯಂತಹ RSCs ನ ಮಿತಿಗಳ ಬಗ್ಗೆ ತಿಳಿದಿರುವುದು ಮುಖ್ಯ. ಆದಾಗ್ಯೂ, ಶಕ್ತಿಯುತ ಮತ್ತು ದಕ್ಷ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸಲು RSCs ಅನ್ನು ಕ್ಲೈಂಟ್-ಸೈಡ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಬಹುದು.

"ಯೂಸ್" ನೊಂದಿಗೆ ಪರಿಣಾಮಕಾರಿ ಸಂಪನ್ಮೂಲ ನಿರ್ವಹಣೆಗೆ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

ಸಂಪನ್ಮೂಲ ನಿರ್ವಹಣೆಗಾಗಿ "ಯೂಸ್" ಹುಕ್‌ನ ಪ್ರಯೋಜನಗಳನ್ನು ಗರಿಷ್ಠಗೊಳಿಸಲು, ಈ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸಿ:

ಸಾಮಾನ್ಯ ತಪ್ಪುಗಳು ಮತ್ತು ಅವುಗಳನ್ನು ತಪ್ಪಿಸುವುದು ಹೇಗೆ

"ಯೂಸ್" ಹುಕ್ ಹಲವಾರು ಪ್ರಯೋಜನಗಳನ್ನು ನೀಡುತ್ತದೆಯಾದರೂ, ಸಂಭವನೀಯ ತಪ್ಪುಗಳು ಮತ್ತು ಅವುಗಳನ್ನು ಹೇಗೆ ತಪ್ಪಿಸುವುದು ಎಂಬುದರ ಬಗ್ಗೆ ತಿಳಿದಿರುವುದು ಮುಖ್ಯ.

ತೀರ್ಮಾನ: ಆಪ್ಟಿಮೈಸ್ಡ್ ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗಾಗಿ "ಯೂಸ್" ಹುಕ್ ಅನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವುದು

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

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