Add support for React.pure in ReactDOMServer

Author: alexmckenley

packages/react-dom/src/__tests__/ReactDOMServerIntegrationPure-test.internal.js

@@ -0,0 +1,112 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+/* eslint-disable no-func-assign */
+
+'use strict';
+
+const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
+
+let React;
+let ReactFeatureFlags;
+let ReactDOM;
+let ReactDOMServer;
+let pure;
+let yieldedValues;
+let yieldValue;
+let clearYields;
+
+function initModules() {
+  // Reset warning cache.
+  jest.resetModuleRegistry();
+  ReactFeatureFlags = require('shared/ReactFeatureFlags');
+  ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
+  React = require('react');
+  ReactDOM = require('react-dom');
+  ReactDOMServer = require('react-dom/server');
+  pure = React.pure;
+
+  yieldedValues = [];
+  yieldValue = value => {
+    yieldedValues.push(value);
+  };
+  clearYields = () => {
+    const ret = yieldedValues;
+    yieldedValues = [];
+    return ret;
+  };
+
+  // Make them available to the helpers.
+  return {
+    ReactDOM,
+    ReactDOMServer,
+  };
+}
+
+const {
+  resetModules,
+  itRenders,
+  itThrowsWhenRendering,
+  serverRender,
+} = ReactDOMServerIntegrationUtils(initModules);
+
+describe('ReactDOMServerPure', () => {
+  beforeEach(() => {
+    resetModules();
+  });
+
+  function Text({text}) {
+    yieldValue(text);
+    return <span>{text}</span>;
+  }
+
+  function Counter({count}) {
+    return <Text text={'Count: ' + count} />;
+  }
+
+  itRenders('basic render', async render => {
+    const PureCounter = pure(Counter);
+    const domNode = await render(<PureCounter count={0} />);
+    expect(domNode.textContent).toEqual('Count: 0');
+  });
+
+  itRenders('when a ref is passed', async render => {
+    const RefCounter = (props, ref) => <Counter count={ref.current} />;
+    const PureRefCounter = pure(RefCounter);
+
+    const ref = React.createRef();
+    ref.current = 0;
+    const domNode = await render(<PureRefCounter ref={ref} />);
+
+    expect(clearYields()).toEqual(['Count: 0']);
+  });
+
+  describe('comparator function', () => {
+    itRenders('basic usage', async render => {
+      const PureCounter = pure(Counter, (oldProps, newProps) => false);
+      const domNode = await render(<PureCounter count={0} />);
+      expect(clearYields()).toEqual(['Count: 0']);
+    });
+
+    itRenders(
+      'comparator functions are not invoked on the server',
+      async render => {
+        const PureCounter = pure(Counter, (oldProps, newProps) => {
+          yieldValue(
+            `Old count: ${oldProps.count}, New count: ${newProps.count}`,
+          );
+          return oldProps.count === newProps.count;
+        });
+
+        const domNode = await render(<PureCounter count={0} />);
+        expect(clearYields()).toEqual(['Count: 0']);
+      },
+    );
+  });
+});

packages/react-dom/src/server/ReactPartialRenderer.js

@@ -38,6 +38,7 @@ import {
   REACT_PROFILER_TYPE,
   REACT_PROVIDER_TYPE,
   REACT_CONTEXT_TYPE,
+  REACT_PURE_TYPE,
 } from 'shared/ReactSymbols';
 
 import {
@@ -945,7 +946,8 @@ class ReactDOMServerRenderer {
       }
       if (typeof elementType === 'object' && elementType !== null) {
         switch (elementType.$$typeof) {
-          case REACT_FORWARD_REF_TYPE: {
+          case REACT_FORWARD_REF_TYPE:
+          case REACT_PURE_TYPE: {
             const element: ReactElement = ((nextChild: any): ReactElement);
             const nextChildren = toArray(
               elementType.render(element.props, element.ref),