React.memo से Optimization

React.memo एक component को बताने जैसा है 'खुद को redraw करने की परेशानी न लें अगर जिस चीज़ की आप care करते हैं वह last time के बाद actually बदली ही न हो'।

In this page:

एक Component को React.memo में Wrap करना
नए Object/Function Props memo को क्यों Defeat करते हैं
React.memo कब Worth Use करना है

Syntax

markup

const MemoizedComponent = React.memo(function Component({ prop }) {
  return <div>{prop}</div>;
});

// Stable props keep memo effective
const handler = useCallback(() => {}, []);
<MemoizedComponent prop={value} onAction={handler} />

एक Component को React.memo में Wrap करना

React.memo(Component) एक नया component return करता है जो re-rendering skip करता है (last rendered output reuse करते हुए) अगर इसकी props last render के बाद नहीं बदलीं, एक shallow comparison के आधार पर।

यह उन components के लिए real work save कर सकता है जो अक्सर render होते हैं लेकिन usually वही props के साथ।

Note: React.memo expensive rendering logic वाले components के लिए सबसे valuable है, simple वालों के लिए नहीं जैसे एक <span>{text}</span>।

Warning: React.memo सिर्फ PROPS compare करता है — यह एक component को अपने OWN internal state change होने की वजह से re-render होने से नहीं रोकता।

उदाहरण: Wrapping a Component in React.memo

markup

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
const ExpensiveItem = React.memo(function ExpensiveItem({ name }) {
  console.log("Rendering:", name);
  return <li>{name}</li>;
});
function App() {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Unrelated count: {count}</button>
      <ExpensiveItem name="Static Item" />
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  </script>
</body>
</html>

नए Object/Function Props memo को क्यों Defeat करते हैं

React.memo का default comparison check करता है कि क्या हर prop इसकी previous value के === equal है। एक inline object या function एक prop के रूप में pass किया गया (जैसे style={{color: red}} या onClick={() => {}}) हर parent render पर एक BRAND NEW reference बनाता है, इसलिए comparison हमेशा changed देखता है, even अगर values identical दिखें।

Note: अगर आप चाहते हैं कि child पर React.memo actually काम करे तो PARENT component में object/function props को useMemo/useCallback में wrap करें।

Warning: एक child में React.memo जोड़ना जबकि अभी भी इसे हर render पर एक fresh inline object या arrow function pass करना zero actual benefit देता है — यह फिर भी हर बार re-render होगा।

उदाहरण: Why New Object/Function Props Defeat memo

markup

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
const Child = React.memo(function Child({ onClick }) {
  console.log("Child rendered");
  return <button onClick={onClick}>Click</button>;
});
function App() {
  const [count, setCount] = React.useState(0);
  // New arrow function every render -- defeats React.memo below:
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Count: {count}</button>
      <Child onClick={() => console.log("clicked")} />
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  </script>
</body>
</html>

React.memo कब Worth Use करना है

React.memo सबसे clearly उन components के लिए pay off करता है जो UNCHANGED props के साथ frequently render होते हैं (जैसे एक बड़ी list में एक list item जहां सिर्फ एक item actually update होता है), और जिनका अपना rendering work non-trivial है।

Cheap, simple components के लिए, comparison overhead किसी भी savings से ज़्यादा हो सकता है।

Note: पहले profile करें (Profiler tutorial देखें) यह confirm करने के लिए कि एक component अक्सर re-render होता है AND real work करता है, React.memo के लिए reach करने से पहले।

Warning: React.memo को default रूप से हर जगह जोड़ना एक common overcorrection है — यह हर render पर एक comparison cost जोड़ता है, जो free भी नहीं है।

उदाहरण: When React.memo Is Worth Using

markup

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
const ListItem = React.memo(function ListItem({ text }) {
  return <li>{text}</li>;
});
function App() {
  const items = ["Apple", "Banana", "Cherry"];
  const [unrelated, setUnrelated] = React.useState(0);
  return (
    <div>
      <button onClick={() => setUnrelated(unrelated + 1)}>Re-render parent: {unrelated}</button>
      <ul>{items.map(i => <ListItem key={i} text={i} />)}</ul>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  </script>
</body>
</html>

Chapter Quiz — Complete all 13 topics to unlock

0/13 topics done

Complete these topics first:

← Previous Lesson Why Performance Matters Next Lesson → Avoiding Unnecessary Re-renders

React.memo से Optimization

एक Component को React.memo में Wrap करना

नए Object/Function Props memo को क्यों Defeat करते हैं

React.memo कब Worth Use करना है

Chapter Quiz — Complete all 13 topics to unlock

Login to run this code