ರಿಯಾಕ್ಟ್ ಮೆಮೊ: ಜಾಗತಿಕ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗಾಗಿ ಆಪ್ಟಿಮೈಸೇಶನ್ ತಂತ್ರಗಳ ಆಳವಾದ ನೋಟ

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

ರಿಯಾಕ್ಟ್.ಮೆಮೊ ಎಂದರೇನು?

React.memo ಒಂದು ಹೈಯರ್-ಆರ್ಡರ್ ಕಾಂಪೊನೆಂಟ್ (HOC) ಆಗಿದ್ದು, ಇದು ಫಂಕ್ಷನಲ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಮೆಮೊೈಸ್ ಮಾಡುತ್ತದೆ. ಸರಳವಾಗಿ ಹೇಳುವುದಾದರೆ, ಅದರ ಪ್ರಾಪ್ಸ್ ಬದಲಾಗದಿದ್ದಲ್ಲಿ ಕಾಂಪೊನೆಂಟ್ ಮರು-ರೆಂಡರ್ ಆಗುವುದನ್ನು ಇದು ತಡೆಯುತ್ತದೆ. ಡೀಫಾಲ್ಟ್ ಆಗಿ, ಇದು ಪ್ರಾಪ್ಸ್‌ಗಳ ಶಾಲ್ಲೋ ಕಂಪ್ಯಾರಿಸನ್ (shallow comparison) ಮಾಡುತ್ತದೆ. ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸುತ್ತದೆ, ವಿಶೇಷವಾಗಿ ರೆಂಡರ್ ಮಾಡಲು ಹೆಚ್ಚು ಗಣನಾತ್ಮಕವಾಗಿ ದುಬಾರಿಯಾಗಿರುವ ಅಥವಾ ಪ್ರಾಪ್ಸ್ ಒಂದೇ ರೀತಿ ಇದ್ದರೂ ಆಗಾಗ್ಗೆ ಮರು-ರೆಂಡರ್ ಆಗುವ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗೆ ಇದು ಸಹಕಾರಿ.

ಒಬ್ಬ ಬಳಕೆದಾರರ ಪ್ರೊಫೈಲ್ ಅನ್ನು ಪ್ರದರ್ಶಿಸುವ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಬಳಕೆದಾರರ ಮಾಹಿತಿ (ಉದಾಹರಣೆಗೆ, ಹೆಸರು, ಅವತಾರ) ಬದಲಾಗದಿದ್ದರೆ, ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಮರು-ರೆಂಡರ್ ಮಾಡುವ ಅಗತ್ಯವಿಲ್ಲ. React.memo ಈ ಅನಗತ್ಯ ಮರು-ರೆಂಡರ್ ಅನ್ನು ತಪ್ಪಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಅಮೂಲ್ಯವಾದ ಪ್ರೊಸೆಸಿಂಗ್ ಸಮಯವನ್ನು ಉಳಿಸುತ್ತದೆ.

ರಿಯಾಕ್ಟ್.ಮೆಮೊ ಏಕೆ ಬಳಸಬೇಕು?

React.memo ಬಳಸುವುದರ ಪ್ರಮುಖ ಪ್ರಯೋಜನಗಳು ಇಲ್ಲಿವೆ:

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

ರಿಯಾಕ್ಟ್.ಮೆಮೊದ ಮೂಲಭೂತ ಬಳಕೆ

React.memo ಬಳಸುವುದು ಸರಳವಾಗಿದೆ. ನಿಮ್ಮ ಫಂಕ್ಷನಲ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಅದರಿಂದ ಸುತ್ತಿ:

import React from 'react';

const MyComponent = (props) => {
 console.log('MyComponent rendered');
 return (
 
{props.data}
 );
};

export default React.memo(MyComponent);

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, data ಪ್ರಾಪ್ ಬದಲಾದಾಗ ಮಾತ್ರ MyComponent ಮರು-ರೆಂಡರ್ ಆಗುತ್ತದೆ. ಕಾಂಪೊನೆಂಟ್ ವಾಸ್ತವವಾಗಿ ಯಾವಾಗ ಮರು-ರೆಂಡರ್ ಆಗುತ್ತಿದೆ ಎಂಬುದನ್ನು ಪರಿಶೀಲಿಸಲು console.log ಸ್ಟೇಟ್‌ಮೆಂಟ್ ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ಶಾಲ್ಲೋ ಕಂಪ್ಯಾರಿಸನ್ (Shallow Comparison) ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

ಡೀಫಾಲ್ಟ್ ಆಗಿ, React.memo ಪ್ರಾಪ್ಸ್‌ಗಳ ಶಾಲ್ಲೋ ಕಂಪ್ಯಾರಿಸನ್ ಮಾಡುತ್ತದೆ. ಇದರರ್ಥ ಇದು ಪ್ರಾಪ್ಸ್‌ಗಳ ಮೌಲ್ಯಗಳನ್ನಲ್ಲ, ಬದಲಿಗೆ ಅವುಗಳ ರೆಫರೆನ್ಸ್‌ಗಳು ಬದಲಾಗಿವೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸುತ್ತದೆ. ಆಬ್ಜೆಕ್ಟ್‌ಗಳು ಮತ್ತು ಅರೇಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವಾಗ ಇದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಮುಖ್ಯವಾಗಿದೆ.

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

import React, { useState } from 'react';

const MyComponent = (props) => {
 console.log('MyComponent rendered');
 return (
 
{props.data.name}
 );
};

const MemoizedComponent = React.memo(MyComponent);

const App = () => {
 const [user, setUser] = useState({ name: 'John', age: 30 });

 const handleClick = () => {
 setUser({ ...user }); // Creating a new object with the same values
 };

 return (
 

 
 Update User
 
 );
};

export default App;

ಈ ಸಂದರ್ಭದಲ್ಲಿ, user ಆಬ್ಜೆಕ್ಟ್‌ನ ಮೌಲ್ಯಗಳು (name ಮತ್ತು age) ಒಂದೇ ರೀತಿ ಇದ್ದರೂ, handleClick ಫಂಕ್ಷನ್ ಪ್ರತಿ ಬಾರಿ ಕರೆದಾಗಲೂ ಹೊಸ ಆಬ್ಜೆಕ್ಟ್ ರೆಫರೆನ್ಸ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ. ಆದ್ದರಿಂದ, React.memo data ಪ್ರಾಪ್ ಬದಲಾಗಿದೆ ಎಂದು ಪರಿಗಣಿಸುತ್ತದೆ (ಏಕೆಂದರೆ ಆಬ್ಜೆಕ್ಟ್ ರೆಫರೆನ್ಸ್ ವಿಭಿನ್ನವಾಗಿದೆ) ಮತ್ತು MyComponent ಅನ್ನು ಮರು-ರೆಂಡರ್ ಮಾಡುತ್ತದೆ.

ಕಸ್ಟಮ್ ಕಂಪ್ಯಾರಿಸನ್ ಫಂಕ್ಷನ್

ಆಬ್ಜೆಕ್ಟ್‌ಗಳು ಮತ್ತು ಅರೇಗಳೊಂದಿಗೆ ಶಾಲ್ಲೋ ಕಂಪ್ಯಾರಿಸನ್ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸಲು, React.memo ತನ್ನ ಎರಡನೇ ಆರ್ಗ್ಯುಮೆಂಟ್ ಆಗಿ ಕಸ್ಟಮ್ ಕಂಪ್ಯಾರಿಸನ್ ಫಂಕ್ಷನ್ ಅನ್ನು ಒದಗಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಈ ಫಂಕ್ಷನ್ ಎರಡು ಆರ್ಗ್ಯುಮೆಂಟ್‌ಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ: prevProps ಮತ್ತು nextProps. ಕಾಂಪೊನೆಂಟ್ ಮರು-ರೆಂಡರ್ ಆಗಬಾರದು ಎಂದಾದರೆ (ಅಂದರೆ, ಪ್ರಾಪ್ಸ್‌ಗಳು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಒಂದೇ ಆಗಿದ್ದರೆ) ಇದು true ಅನ್ನು ಹಿಂತಿರುಗಿಸಬೇಕು ಮತ್ತು ಮರು-ರೆಂಡರ್ ಆಗಬೇಕಾದರೆ false ಅನ್ನು ಹಿಂತಿರುಗಿಸಬೇಕು.

ಹಿಂದಿನ ಉದಾಹರಣೆಯಲ್ಲಿ ಕಸ್ಟಮ್ ಕಂಪ್ಯಾರಿಸನ್ ಫಂಕ್ಷನ್ ಅನ್ನು ಹೇಗೆ ಬಳಸಬಹುದು ಎಂಬುದು ಇಲ್ಲಿದೆ:

import React, { useState, memo } from 'react';

const MyComponent = (props) => {
 console.log('MyComponent rendered');
 return (
 
{props.data.name}
 );
};

const areEqual = (prevProps, nextProps) => {
 return prevProps.data.name === nextProps.data.name && prevProps.data.age === nextProps.data.age;
};

const MemoizedComponent = memo(MyComponent, areEqual);

const App = () => {
 const [user, setUser] = useState({ name: 'John', age: 30 });

 const handleClick = () => {
 setUser({ ...user });
 };

 return (
 

 
 Update User
 
 );
};

export default App;

ಈ ಅಪ್‌ಡೇಟ್ ಮಾಡಿದ ಉದಾಹರಣೆಯಲ್ಲಿ, areEqual ಫಂಕ್ಷನ್ user ಆಬ್ಜೆಕ್ಟ್‌ಗಳ name ಮತ್ತು age ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಹೋಲಿಸುತ್ತದೆ. ಈಗ MemoizedComponent ಕೇವಲ name ಅಥವಾ age ಬದಲಾದಾಗ ಮಾತ್ರ ಮರು-ರೆಂಡರ್ ಆಗುತ್ತದೆ.

ರಿಯಾಕ್ಟ್.ಮೆಮೊ ಯಾವಾಗ ಬಳಸಬೇಕು

React.memo ಈ ಕೆಳಗಿನ ಸನ್ನಿವೇಶಗಳಲ್ಲಿ ಅತ್ಯಂತ ಪರಿಣಾಮಕಾರಿಯಾಗಿದೆ:

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

ಆದಾಗ್ಯೂ, React.memo ಒಂದು ಸರ್ವರೋಗ ನಿವಾರಕವಲ್ಲ ಎಂಬುದನ್ನು ಗಮನಿಸುವುದು ಮುಖ್ಯ. ಇದನ್ನು ವಿವೇಚನಾರಹಿತವಾಗಿ ಬಳಸುವುದರಿಂದ ವಾಸ್ತವವಾಗಿ ಕಾರ್ಯಕ್ಷಮತೆಗೆ ಹಾನಿಯಾಗಬಹುದು ಏಕೆಂದರೆ ಶಾಲ್ಲೋ ಕಂಪ್ಯಾರಿಸನ್‌ಗೆ ತನ್ನದೇ ಆದ ವೆಚ್ಚವಿದೆ. ಆದ್ದರಿಂದ, ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಪ್ರೊಫೈಲ್ ಮಾಡುವುದು ಮತ್ತು ಮೆಮೊೈಸೇಶನ್‌ನಿಂದ ಹೆಚ್ಚು ಪ್ರಯೋಜನ ಪಡೆಯುವ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಗುರುತಿಸುವುದು ಅತ್ಯಗತ್ಯ.

ರಿಯಾಕ್ಟ್.ಮೆಮೊಗೆ ಪರ್ಯಾಯಗಳು

React.memo ಒಂದು ಶಕ್ತಿಯುತ ಸಾಧನವಾಗಿದ್ದರೂ, ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಉತ್ತಮಗೊಳಿಸಲು ಇದು ಏಕೈಕ ಆಯ್ಕೆಯಲ್ಲ. ಇಲ್ಲಿ ಕೆಲವು ಪರ್ಯಾಯಗಳು ಮತ್ತು ಪೂರಕ ತಂತ್ರಗಳಿವೆ:

1. PureComponent

ಕ್ಲಾಸ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗಾಗಿ, PureComponent React.memo ಗೆ ಸಮಾನವಾದ ಕಾರ್ಯವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಇದು ಪ್ರಾಪ್ಸ್ ಮತ್ತು ಸ್ಟೇಟ್ ಎರಡರ ಶಾಲ್ಲೋ ಕಂಪ್ಯಾರಿಸನ್ ಮಾಡುತ್ತದೆ, ಮತ್ತು ಬದಲಾವಣೆಗಳಿದ್ದರೆ ಮಾತ್ರ ಮರು-ರೆಂಡರ್ ಮಾಡುತ್ತದೆ.

import React from 'react';

class MyComponent extends React.PureComponent {
 render() {
 console.log('MyComponent rendered');
 return (
 
{this.props.data}
 );
 }
}

export default MyComponent;

PureComponent ಕ್ಲಾಸ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಲ್ಲಿ ಅನಗತ್ಯ ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ತಡೆಯುವ ಸಾಂಪ್ರದಾಯಿಕ ವಿಧಾನವಾದ shouldComponentUpdate ಅನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಕಾರ್ಯಗತಗೊಳಿಸಲು ಒಂದು ಅನುಕೂಲಕರ ಪರ್ಯಾಯವಾಗಿದೆ.

2. shouldComponentUpdate

shouldComponentUpdate ಕ್ಲಾಸ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಲ್ಲಿನ ಒಂದು ಲೈಫ್‌ಸೈಕಲ್ ಮೆಥಡ್ ಆಗಿದ್ದು, ಕಾಂಪೊನೆಂಟ್ ಮರು-ರೆಂಡರ್ ಆಗಬೇಕೆ ಎಂದು ನಿರ್ಧರಿಸಲು ಕಸ್ಟಮ್ ಲಾಜಿಕ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಇದು ಹೆಚ್ಚು ನಮ್ಯತೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ, ಆದರೆ ಇದಕ್ಕೆ ಹೆಚ್ಚು ಹಸ್ತಚಾಲಿತ ಪ್ರಯತ್ನದ ಅಗತ್ಯವಿರುತ್ತದೆ.

import React from 'react';

class MyComponent extends React.Component {
 shouldComponentUpdate(nextProps, nextState) {
 return nextProps.data !== this.props.data;
 }

 render() {
 console.log('MyComponent rendered');
 return (
 
{this.props.data}
 );
 }
}

export default MyComponent;

shouldComponentUpdate ಇನ್ನೂ ಲಭ್ಯವಿದ್ದರೂ, ಅವುಗಳ ಸರಳತೆ ಮತ್ತು ಬಳಕೆಯ ಸುಲಭತೆಗಾಗಿ ಸಾಮಾನ್ಯವಾಗಿ PureComponent ಮತ್ತು React.memo ಅನ್ನು ಆದ್ಯತೆ ನೀಡಲಾಗುತ್ತದೆ.

3. useCallback

useCallback ಒಂದು ರಿಯಾಕ್ಟ್ ಹುಕ್ ಆಗಿದ್ದು, ಇದು ಫಂಕ್ಷನ್ ಅನ್ನು ಮೆಮೊೈಸ್ ಮಾಡುತ್ತದೆ. ಇದು ಫಂಕ್ಷನ್‌ನ ಮೆಮೊೈಸ್ ಮಾಡಿದ ಆವೃತ್ತಿಯನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ, ಅದು ಅದರ ಡಿಪೆಂಡೆನ್ಸಿಗಳಲ್ಲಿ ಒಂದು ಬದಲಾದಾಗ ಮಾತ್ರ ಬದಲಾಗುತ್ತದೆ. ಮೆಮೊೈಸ್ ಮಾಡಿದ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗೆ ಕಾಲ್‌ಬ್ಯಾಕ್‌ಗಳನ್ನು ಪ್ರಾಪ್ಸ್ ಆಗಿ ರವಾನಿಸಲು ಇದು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ.

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

import React, { useState, useCallback, memo } from 'react';

const MyComponent = (props) => {
 console.log('MyComponent rendered');
 return (
 Click Me
 );
};

const MemoizedComponent = memo(MyComponent);

const App = () => {
 const [count, setCount] = useState(0);

 const handleClick = useCallback(() => {
 setCount(count + 1);
 }, [count]);

 return (
 

 
 
Count: {count}
 
 );
};

export default App;

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, count ಸ್ಟೇಟ್ ಬದಲಾದಾಗ ಮಾತ್ರ handleClick ಫಂಕ್ಷನ್ ಬದಲಾಗುತ್ತದೆ ಎಂದು useCallback ಖಚಿತಪಡಿಸುತ್ತದೆ. useCallback ಇಲ್ಲದಿದ್ದರೆ, App ನ ಪ್ರತಿಯೊಂದು ರೆಂಡರ್‌ನಲ್ಲಿ ಹೊಸ ಫಂಕ್ಷನ್ ರಚನೆಯಾಗುತ್ತದೆ, ಇದು MemoizedComponent ಅನಗತ್ಯವಾಗಿ ಮರು-ರೆಂಡರ್ ಆಗಲು ಕಾರಣವಾಗುತ್ತದೆ.

4. useMemo

useMemo ಒಂದು ರಿಯಾಕ್ಟ್ ಹುಕ್ ಆಗಿದ್ದು, ಇದು ಮೌಲ್ಯವನ್ನು ಮೆಮೊೈಸ್ ಮಾಡುತ್ತದೆ. ಇದು ಮೆಮೊೈಸ್ ಮಾಡಿದ ಮೌಲ್ಯವನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ, ಅದು ಅದರ ಡಿಪೆಂಡೆನ್ಸಿಗಳಲ್ಲಿ ಒಂದು ಬದಲಾದಾಗ ಮಾತ್ರ ಬದಲಾಗುತ್ತದೆ. ಪ್ರತಿ ರೆಂಡರ್‌ನಲ್ಲಿ ಮರು-ರನ್ ಮಾಡಬೇಕಾಗಿಲ್ಲದ ದುಬಾರಿ ಲೆಕ್ಕಾಚಾರಗಳನ್ನು ತಪ್ಪಿಸಲು ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ.

import React, { useState, useMemo } from 'react';

const App = () => {
 const [input, setInput] = useState('');

 const expensiveCalculation = (str) => {
 console.log('Calculating...');
 let result = 0;
 for (let i = 0; i < str.length * 1000000; i++) {
 result++;
 }
 return result;
 };

 const memoizedResult = useMemo(() => expensiveCalculation(input), [input]);

 return (
 

  setInput(e.target.value)} />
 
Result: {memoizedResult}
 
 );
};

export default App;

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, input ಸ್ಟೇಟ್ ಬದಲಾದಾಗ ಮಾತ್ರ expensiveCalculation ಫಂಕ್ಷನ್ ಅನ್ನು ಕರೆಯಲಾಗುತ್ತದೆ ಎಂದು useMemo ಖಚಿತಪಡಿಸುತ್ತದೆ. ಇದು ಪ್ರತಿ ರೆಂಡರ್‌ನಲ್ಲಿ ಲೆಕ್ಕಾಚಾರವನ್ನು ಮರು-ರನ್ ಮಾಡುವುದನ್ನು ತಡೆಯುತ್ತದೆ, ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸುತ್ತದೆ.

ಜಾಗತಿಕ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗಾಗಿ ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು

ಜಾಗತಿಕ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ React.memo ಮತ್ತು ಸಂಬಂಧಿತ ತಂತ್ರಗಳನ್ನು ಹೇಗೆ ಅನ್ವಯಿಸಬಹುದು ಎಂಬುದರ ಕೆಲವು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳನ್ನು ಪರಿಗಣಿಸೋಣ:

1. ಭಾಷಾ ಆಯ್ಕೆಕಾರಕ (Language Selector)

ಭಾಷಾ ಆಯ್ಕೆಕಾರಕ ಕಾಂಪೊನೆಂಟ್ ಸಾಮಾನ್ಯವಾಗಿ ಲಭ್ಯವಿರುವ ಭಾಷೆಗಳ ಪಟ್ಟಿಯನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತದೆ. ಈ ಪಟ್ಟಿ ತುಲನಾತ್ಮಕವಾಗಿ ಸ್ಥಿರವಾಗಿರಬಹುದು, ಅಂದರೆ ಅದು ಆಗಾಗ್ಗೆ ಬದಲಾಗುವುದಿಲ್ಲ. ಅಪ್ಲಿಕೇಶನ್‌ನ ಇತರ ಭಾಗಗಳು ಅಪ್‌ಡೇಟ್ ಆದಾಗ ಭಾಷಾ ಆಯ್ಕೆಕಾರಕ ಅನಗತ್ಯವಾಗಿ ಮರು-ರೆಂಡರ್ ಆಗುವುದನ್ನು React.memo ಬಳಸುವುದರಿಂದ ತಡೆಯಬಹುದು.

import React, { memo } from 'react';

const LanguageItem = ({ language, onSelect }) => {
 console.log(`LanguageItem ${language} rendered`);
 return (
 
 onSelect(language)}>{language}
 );
};

const MemoizedLanguageItem = memo(LanguageItem);

const LanguageSelector = ({ languages, onSelect }) => {
 return (
 

 {languages.map((language) => (
 
 ))}
 
 );
};

export default LanguageSelector;

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, language ಅಥವಾ onSelect ಪ್ರಾಪ್ ಬದಲಾದರೆ ಮಾತ್ರ MemoizedLanguageItem ಮರು-ರೆಂಡರ್ ಆಗುತ್ತದೆ. ಭಾಷಾ ಪಟ್ಟಿ ಉದ್ದವಾಗಿದ್ದರೆ ಅಥವಾ onSelect ಹ್ಯಾಂಡ್ಲರ್ ಸಂಕೀರ್ಣವಾಗಿದ್ದರೆ ಇದು ವಿಶೇಷವಾಗಿ ಪ್ರಯೋಜನಕಾರಿಯಾಗಿದೆ.

2. ಕರೆನ್ಸಿ ಪರಿವರ್ತಕ (Currency Converter)

ಕರೆನ್ಸಿ ಪರಿವರ್ತಕ ಕಾಂಪೊನೆಂಟ್ ಕರೆನ್ಸಿಗಳ ಪಟ್ಟಿ ಮತ್ತು ಅವುಗಳ ವಿನಿಮಯ ದರಗಳನ್ನು ಪ್ರದರ್ಶಿಸಬಹುದು. ವಿನಿಮಯ ದರಗಳನ್ನು ನಿಯತಕಾಲಿಕವಾಗಿ ಅಪ್‌ಡೇಟ್ ಮಾಡಬಹುದು, ಆದರೆ ಕರೆನ್ಸಿಗಳ ಪಟ್ಟಿ ತುಲನಾತ್ಮಕವಾಗಿ ಸ್ಥಿರವಾಗಿರಬಹುದು. ವಿನಿಮಯ ದರಗಳು ಅಪ್‌ಡೇಟ್ ಆದಾಗ ಕರೆನ್ಸಿ ಪಟ್ಟಿ ಅನಗತ್ಯವಾಗಿ ಮರು-ರೆಂಡರ್ ಆಗುವುದನ್ನು React.memo ಬಳಸುವುದರಿಂದ ತಡೆಯಬಹುದು.

import React, { memo } from 'react';

const CurrencyItem = ({ currency, rate, onSelect }) => {
 console.log(`CurrencyItem ${currency} rendered`);
 return (
 
 onSelect(currency)}>{currency} - {rate}
 );
};

const MemoizedCurrencyItem = memo(CurrencyItem);

const CurrencyConverter = ({ currencies, onSelect }) => {
 return (
 

 {Object.entries(currencies).map(([currency, rate]) => (
 
 ))}
 
 );
};

export default CurrencyConverter;

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, currency, rate, ಅಥವಾ onSelect ಪ್ರಾಪ್ ಬದಲಾದರೆ ಮಾತ್ರ MemoizedCurrencyItem ಮರು-ರೆಂಡರ್ ಆಗುತ್ತದೆ. ಕರೆನ್ಸಿ ಪಟ್ಟಿ ಉದ್ದವಾಗಿದ್ದರೆ ಅಥವಾ ವಿನಿಮಯ ದರ ಅಪ್‌ಡೇಟ್‌ಗಳು ಆಗಾಗ್ಗೆ ಆಗುತ್ತಿದ್ದರೆ ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸಬಹುದು.

3. ಬಳಕೆದಾರರ ಪ್ರೊಫೈಲ್ ಪ್ರದರ್ಶನ

ಬಳಕೆದಾರರ ಪ್ರೊಫೈಲ್ ಅನ್ನು ಪ್ರದರ್ಶಿಸುವುದು ಹೆಸರು, ಪ್ರೊಫೈಲ್ ಚಿತ್ರ, ಮತ್ತು ಸಂಭಾವ್ಯವಾಗಿ ಬಯೋ ಮುಂತಾದ ಸ್ಥಿರ ಮಾಹಿತಿಯನ್ನು ತೋರಿಸುವುದನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ. `React.memo` ಬಳಸುವುದರಿಂದ, ಪೇರೆಂಟ್ ಕಾಂಪೊನೆಂಟ್ ಅಪ್‌ಡೇಟ್ ಆದಾಗಲೆಲ್ಲಾ ಅಲ್ಲ, ಬದಲಿಗೆ ಬಳಕೆದಾರರ ಡೇಟಾ ವಾಸ್ತವವಾಗಿ ಬದಲಾದಾಗ ಮಾತ್ರ ಕಾಂಪೊನೆಂಟ್ ಮರು-ರೆಂಡರ್ ಆಗುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.

import React, { memo } from 'react';

const UserProfile = ({ user }) => {
 console.log('UserProfile rendered');
 return (
 

 
{user.name}
 
 
{user.bio}
 
 );
};

export default memo(UserProfile);

ಬಳಕೆದಾರರ ಡೇಟಾ ಸ್ವತಃ ಆಗಾಗ್ಗೆ ಬದಲಾಗದ, ದೊಡ್ಡದಾದ, ಆಗಾಗ್ಗೆ ಅಪ್‌ಡೇಟ್ ಆಗುವ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಅಥವಾ ಅಪ್ಲಿಕೇಶನ್‌ನ ಭಾಗವಾಗಿ `UserProfile` ಇದ್ದಾಗ ಇದು ವಿಶೇಷವಾಗಿ ಸಹಾಯಕವಾಗಿದೆ.

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

React.memo ಒಂದು ಅಮೂಲ್ಯವಾದ ಆಪ್ಟಿಮೈಸೇಶನ್ ಸಾಧನವಾಗಿದ್ದರೂ, ಸಾಮಾನ್ಯ ಅಪಾಯಗಳ ಬಗ್ಗೆ ತಿಳಿದಿರುವುದು ಮತ್ತು ಅವುಗಳನ್ನು ಹೇಗೆ ತಪ್ಪಿಸುವುದು ಎಂಬುದು ಮುಖ್ಯ:

• ಅತಿಯಾದ-ಮೆಮೊೈಸೇಶನ್: React.memo ಅನ್ನು ವಿವೇಚನಾರಹಿತವಾಗಿ ಬಳಸುವುದರಿಂದ ವಾಸ್ತವವಾಗಿ ಕಾರ್ಯಕ್ಷಮತೆಗೆ ಹಾನಿಯಾಗಬಹುದು ಏಕೆಂದರೆ ಶಾಲ್ಲೋ ಕಂಪ್ಯಾರಿಸನ್‌ಗೆ ತನ್ನದೇ ಆದ ವೆಚ್ಚವಿದೆ. ಅದರಿಂದ ಪ್ರಯೋಜನ ಪಡೆಯುವ ಸಾಧ್ಯತೆಯಿರುವ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಮಾತ್ರ ಮೆಮೊೈಸ್ ಮಾಡಿ.
• ತಪ್ಪಾದ ಡಿಪೆಂಡೆನ್ಸಿ ಅರೇಗಳು: useCallback ಮತ್ತು useMemo ಬಳಸುವಾಗ, ನೀವು ಸರಿಯಾದ ಡಿಪೆಂಡೆನ್ಸಿ ಅರೇಗಳನ್ನು ಒದಗಿಸುತ್ತೀರೆಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಡಿಪೆಂಡೆನ್ಸಿಗಳನ್ನು ಬಿಟ್ಟುಬಿಡುವುದು ಅಥವಾ ಅನಗತ್ಯ ಡಿಪೆಂಡೆನ್ಸಿಗಳನ್ನು ಸೇರಿಸುವುದು ಅನಿರೀಕ್ಷಿತ ನಡವಳಿಕೆ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು.
• ಪ್ರಾಪ್ಸ್ ಬದಲಾವಣೆ (Mutating props): ಪ್ರಾಪ್ಸ್‌ಗಳನ್ನು ನೇರವಾಗಿ ಬದಲಾಯಿಸುವುದನ್ನು ತಪ್ಪಿಸಿ, ಏಕೆಂದರೆ ಇದು React.memo ನ ಶಾಲ್ಲೋ ಕಂಪ್ಯಾರಿಸನ್ ಅನ್ನು ಬೈಪಾಸ್ ಮಾಡಬಹುದು. ಪ್ರಾಪ್ಸ್ ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡುವಾಗ ಯಾವಾಗಲೂ ಹೊಸ ಆಬ್ಜೆಕ್ಟ್‌ಗಳು ಅಥವಾ ಅರೇಗಳನ್ನು ರಚಿಸಿ.
• ಸಂಕೀರ್ಣ ಕಂಪ್ಯಾರಿಸನ್ ಲಾಜಿಕ್: ಕಸ್ಟಮ್ ಕಂಪ್ಯಾರಿಸನ್ ಫಂಕ್ಷನ್‌ಗಳಲ್ಲಿ ಸಂಕೀರ್ಣ ಕಂಪ್ಯಾರಿಸನ್ ಲಾಜಿಕ್ ಅನ್ನು ತಪ್ಪಿಸಿ, ಏಕೆಂದರೆ ಇದು React.memo ನ ಕಾರ್ಯಕ್ಷಮತೆಯ ಪ್ರಯೋಜನಗಳನ್ನು ನಿರಾಕರಿಸಬಹುದು. ಕಂಪ್ಯಾರಿಸನ್ ಲಾಜಿಕ್ ಅನ್ನು ಸಾಧ್ಯವಾದಷ್ಟು ಸರಳ ಮತ್ತು ದಕ್ಷವಾಗಿ ಇರಿಸಿ.

ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಪ್ರೊಫೈಲಿಂಗ್ ಮಾಡುವುದು

React.memo ವಾಸ್ತವವಾಗಿ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸುತ್ತಿದೆಯೇ ಎಂದು ನಿರ್ಧರಿಸಲು ಉತ್ತಮ ಮಾರ್ಗವೆಂದರೆ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಪ್ರೊಫೈಲ್ ಮಾಡುವುದು. ರಿಯಾಕ್ಟ್ ಪ್ರೊಫೈಲಿಂಗ್‌ಗಾಗಿ ಹಲವಾರು ಸಾಧನಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ, ಇದರಲ್ಲಿ ರಿಯಾಕ್ಟ್ ಡೆವ್‌ಟೂಲ್ಸ್ ಪ್ರೊಫೈಲರ್ ಮತ್ತು React.Profiler API ಸೇರಿವೆ.

ರಿಯಾಕ್ಟ್ ಡೆವ್‌ಟೂಲ್ಸ್ ಪ್ರೊಫೈಲರ್ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯ ಟ್ರೇಸ್‌ಗಳನ್ನು ರೆಕಾರ್ಡ್ ಮಾಡಲು ಮತ್ತು ಆಗಾಗ್ಗೆ ಮರು-ರೆಂಡರ್ ಆಗುವ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಗುರುತಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. React.Profiler API ನಿರ್ದಿಷ್ಟ ಕಾಂಪೊನೆಂಟ್‌ಗಳ ರೆಂಡರ್ ಸಮಯವನ್ನು ಪ್ರೋಗ್ರಾಮಿಕ್ ಆಗಿ ಅಳೆಯಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

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

ತೀರ್ಮಾನ

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

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

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

ಹೆಚ್ಚಿನ ಓದು ಮತ್ತು ಸಂಪನ್ಮೂಲಗಳು

• ರಿಯಾಕ್ಟ್.ಮೆಮೊ ಡಾಕ್ಯುಮೆಂಟೇಶನ್
• ಯೂಸ್‌ಕಾಲ್‌ಬ್ಯಾಕ್ ಡಾಕ್ಯುಮೆಂಟೇಶನ್
• ಯೂಸ್‌ಮೆಮೊ ಡಾಕ್ಯುಮೆಂಟೇಶನ್
• ರಿಯಾಕ್ಟ್‌ನಲ್ಲಿ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಉತ್ತಮಗೊಳಿಸುವುದು
• ರಿಯಾಕ್ಟ್ ಪ್ರೊಫೈಲರ್‌ನೊಂದಿಗೆ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಪ್ರೊಫೈಲಿಂಗ್ ಮಾಡುವುದು