Use ReactDOM.hydrate() for hydrating a SSR component if available

CHANGELOG.md

@@ -7,6 +7,8 @@ Contributors: please follow the recommendations outlined at [keepachangelog.com]
 Changes since last non-beta release.
 
 *Please add entries here for your pull requests that are not yet released.*
+#### Fixed
+- Use ReactDOM.hydrate() for hydrating a SSR component if available. ReactDOM.render() has been deprecated for use on SSR components in React 16 and this addresses the warning. [PR 1028](https://github.com/shakacode/react_on_rails/pull/1028) by [theJoeBiz](https://github.com/theJoeBiz).
 
 ### [10.1.1] - 2018-01-26
 #### Fixed

node_package/src/clientStartup.js

@@ -95,8 +95,8 @@ function domNodeIdForEl(el) {
 }
 
 /**
- * Used for client rendering by ReactOnRails. Either calls ReactDOM.render or delegates
- * to a renderer registered by the user.
+ * Used for client rendering by ReactOnRails. Either calls ReactDOM.hydrate, ReactDOM.render, or
+ * delegates to a renderer registered by the user.
  * @param el
  */
 function render(el, railsContext) {
@@ -115,18 +115,24 @@ function render(el, railsContext) {
         return;
       }
 
+      // Hydrate if available and was server rendered
+      const shouldHydrate = !!ReactDOM.hydrate && !!domNode.innerHTML;
+
       const reactElementOrRouterResult = createReactElement({
         componentObj,
         props,
         domNodeId,
         trace,
         railsContext,
+        shouldHydrate,
       });
 
       if (isRouterResult(reactElementOrRouterResult)) {
         throw new Error(`\
 You returned a server side type of react-router error: ${JSON.stringify(reactElementOrRouterResult)}
 You should return a React.Component always for the client side entry point.`);
+      } else if (shouldHydrate) {
+        ReactDOM.hydrate(reactElementOrRouterResult, domNode);
       } else {
         ReactDOM.render(reactElementOrRouterResult, domNode);
       }

node_package/src/createReactElement.js

@@ -19,13 +19,17 @@ export default function createReactElement({
   railsContext,
   domNodeId,
   trace,
+  shouldHydrate,
 }) {
   const { name, component, generatorFunction } = componentObj;
 
   if (trace) {
     if (railsContext && railsContext.serverSide) {
       console.log(`RENDERED ${name} to dom node with id: ${domNodeId} with railsContext:`,
         railsContext);
+    } else if (shouldHydrate) {
+      console.log(`HYDRATED ${name} in dom node with id: ${domNodeId} using props, railsContext:`,
+        props, railsContext);
     } else {
       console.log(`RENDERED ${name} to dom node with id: ${domNodeId} with props, railsContext:`,
         props, railsContext);