<p dir="auto">React batches all component updates if they become dirty during an event-callback (events are also batched). However, this is not exposed for use with external events, such as <code class="notranslate">setTimeout</code>, <code class="notranslate">addEventHandler</code>, AJAX-replies, non-React DOM events or any other events, and it seems only natural that it should extend to those too.</p>
<p dir="auto">I see two obvious solutions:</p>
<p dir="auto"><strong>Export <code class="notranslate">React.batchedUpdates(callback, param)</code></strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="setTimeout(function() {
  React.batchedUpdates(function() {
    ...
  }.bind(this));
});

setTimeout(React.batchedUpdates.bind(null, function() {
  ...
}.bind(this));"><pre class="notranslate"><code class="notranslate">setTimeout(function() {
  React.batchedUpdates(function() {
    ...
  }.bind(this));
});

setTimeout(React.batchedUpdates.bind(null, function() {
  ...
}.bind(this));
</code></pre></div>
<p dir="auto"><strong>Export a callback factory <code class="notranslate">React.batchedCallback(callback, args...)</code></strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="setTimeout(React.batchedCallback(function() {
  ...
}.bind(this));"><pre class="notranslate"><code class="notranslate">setTimeout(React.batchedCallback(function() {
  ...
}.bind(this));
</code></pre></div>
<p dir="auto">Thoughts?</p>
<p dir="auto">I'm guessing this belongs with <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="19153062" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/326" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/326/hovercard" href="https://github.com/facebook/react/issues/326">#326</a></p>
<p dir="auto">Ember has a similar Ember.run -- perhaps we should do something to mirror it? They also have helpers like Ember.run.later which is a replacement for setTimeout with better batching:</p>
<p dir="auto"><a href="http://emberjs.com/api/classes/Ember.run.html" rel="nofollow">http://emberjs.com/api/classes/Ember.run.html</a></p>