Merge pull request #288 from SteveVitali/node-arrival

Reduce nodeArrival calls by taking in range of node indices

packages/react-server/core/ClientController.js

@@ -826,17 +826,19 @@ class ClientController extends EventEmitter {
 		ReactServerAgent.cache().lateArrival(url, dehydratedEntry);
 	}
 
-	nodeArrival (index) {
+	nodeArrival (startIndex, endIndex) {
 
 		// The server has just let us know that a pre-rendered root
 		// element has arrived.  We'll grab a reference to its DOM
 		// node and un-block client-side rendering of the element that
 		// we're going to mount into it.
-		this._ensureRootNodeDfd(index).resolve(
-			this.mountNode.querySelector(
-				`div[${REACT_SERVER_DATA_ATTRIBUTE}="${index}"]`
-			)
-		);
+		for (var i = startIndex; i <= endIndex; i++) {
+			this._ensureRootNodeDfd(i).resolve(
+				this.mountNode.querySelector(
+					`div[${REACT_SERVER_DATA_ATTRIBUTE}="${i}"]`
+				)
+			);
+		}
 	}
 
 	failArrival () {

packages/react-server/core/renderMiddleware.js

@@ -838,7 +838,7 @@ function writeElements(res, elements) {
 
 			// We've already bootstrapped, so we can immediately tell the
 			// client controller to wake the new element we just sent.
-			wakeElement(res, i);
+			wakeElementRange(res, i, i);
 		} else if (i === elements.length - 1) {
 
 			// Page didn't emit `<TheFold/>`.  Now we're done.
@@ -915,15 +915,16 @@ function bootstrapClient(res, lastElementSent) {
 	// function to avoid letting responses slip in between.
 	setupLateArrivals(res);
 
-	for (var i = 0; i <= lastElementSent; i++) {
-		wakeElement(res, i);
-	}
+	wakeElementRange(res, 0, lastElementSent);
 
 	RLS().haveBootstrapped = true;
 }
 
-function wakeElement(res, i) {
-	renderScriptsAsync([{ text: `__reactServerClientController.nodeArrival(${i})` }], res)
+function wakeElementRange(res, startIndex, endIndex) {
+	endIndex = endIndex || startIndex;
+	renderScriptsAsync([{
+		text: `__reactServerClientController.nodeArrival(${startIndex},${endIndex})`,
+	}], res);
 }
 
 function setupLateArrivals(res) {