React State Batching क्या है

Batching React का हर शब्द के बाद picture redraw करने के बजाय, आपको जो भी changes करने हैं वो सब सुनने के बाद एक ही बार repaint करना है।

In this page:

Multiple Updates, One Re-render
Automatic Batching in React 18
Why Batching Matters for Performance

Syntax

markup

function Component() {
  const [first, setFirst] = useState(initial);
  const [second, setSecond] = useState(initial);

  function handleEvent() {
    setFirst(newValue1); // batched:
    setSecond(newValue2); // one re-render for both
  }
}

Multiple Updates, One Re-render

जब एक ही event handler के अंदर कई state setters call होते हैं, तो React हर एक के बाद individually re-render नहीं करता -- यह handler खत्म होने तक wait करता है, फिर सभी changes एक साथ apply करके एक ही बार re-render करता है।

यह UI को fast रखता है और partial, inconsistent states दिखाने से बचाता है।

Note: आप एक handler के अंदर कई अलग-अलग setters एक के बाद एक safely call कर सकते हैं बिना extra re-renders की चिंता किए।

Warning: इसका मतलब है कि आपको कभी यह assume नहीं करना चाहिए कि एक ही handler में दो setState calls के बीच DOM update हो गया होगा -- यह अभी नहीं हुआ है।

उदाहरण: Multiple Updates, One Re-render

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">
    function MultiUpdate() {
      const [a, setA] = React.useState(0);
      const [b, setB] = React.useState(0);
      function handleClick() {
        setA(a + 1);
        setB(b + 1);
        // Only ONE re-render happens, with both updates applied
      }
      return <button onClick={handleClick}>A: {a}, B: {b}</button>;
    }
    ReactDOM.createRoot(document.getElementById('root')).render(<MultiUpdate />);
  </script>
</body>
</html>

Automatic Batching in React 18

React 18 से पहले, batching ज़्यादातर सिर्फ उन handlers के अंदर होती थी जो directly React से trigger होते थे (जैसे onClick), लेकिन एक setTimeout या एक fetch के .then() के अंदर updates हर एक अलग re-render cause करते थे।

React 18 ने automatic batching को इन cases तक भी बढ़ाया, performance को default रूप से और बेहतर बनाते हुए।

Note: अगर आप React 18+ पर हैं, तो आपको आमतौर पर यह सोचने की ज़रूरत नहीं कि batching कहां apply होती है या नहीं -- यह हर जगह consistent है।

Warning: React 17 की ज़्यादा limited batching behavior मानकर लिखा गया code React 18 में upgrade होने पर अलग render हो सकता है (कम renders)।

उदाहरण: Automatic Batching in React 18

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">
    function TimeoutUpdate() {
      const [a, setA] = React.useState(0);
      const [b, setB] = React.useState(0);
      function handleClick() {
        setTimeout(() => {
          setA(prev => prev + 1);
          setB(prev => prev + 1);
          // React 18+: still batched into one re-render, even inside setTimeout
        }, 200);
      }
      return <button onClick={handleClick}>A: {a}, B: {b}</button>;
    }
    ReactDOM.createRoot(document.getElementById('root')).render(<TimeoutUpdate />);
  </script>
</body>
</html>

Why Batching Matters for Performance

हर re-render की एक cost होती है -- React को आपका component function फिर से run करना पड़ता है और result को पहले वाले से compare करना पड़ता है। Batching उन updates के लिए यह बार-बार करने से बचाती है जो logically साथ belong करते हैं, जिनमें बहुत सारे state changes वाले apps को काफी तेज़ रखते हुए।

Note: आपको batching के लिए manually optimize करने की ज़रूरत नहीं -- यह अपने आप होता है; सिर्फ इसके around unnecessary workarounds से बचें।

Warning: Extra re-renders force करना (उदाहरण के लिए, updates को unnecessary flushSync calls में wrap करके) batching का performance benefit खत्म कर देता है।

उदाहरण: Why Batching Matters for Performance

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">
    function ManyUpdates() {
      const [x, setX] = React.useState(0);
      const [y, setY] = React.useState(0);
      const [z, setZ] = React.useState(0);
      function handleClick() {
        setX(x + 1);
        setY(y + 1);
        setZ(z + 1);
        // All three updates batched into a single render
      }
      return <button onClick={handleClick}>{x}, {y}, {z}</button>;
    }
    ReactDOM.createRoot(document.getElementById('root')).render(<ManyUpdates />);
  </script>
</body>
</html>

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

← Previous Lesson Functional State Updates Next Lesson → Introduction to useEffect

React State Batching क्या है

Multiple Updates, One Re-render

Automatic Batching in React 18

Why Batching Matters for Performance

Chapter Quiz — Complete all 10 topics to unlock

Login to run this code