Use ReactDOM.hydrate() for hydrating a server-side component with Rea…

[elstgav]

Fixes the ReactDOM.render() deprecation warning for React v16 mentioned in #965

Calling ReactDOM.render() on a server-rendered component with React v16 will produce the following deprecation warning:

Warning: render(): Calling ReactDOM.render() to hydrate server-rendered markup will stop working in React v17. Replace the ReactDOM.render() call with ReactDOM.hydrate() if you want React to attach to the server HTML.

TODO

• I’m unsure of where a test for this should go. Do we want a test? And if so, where does that go?
• Should ReactOnRails.render() also be updated? I’m less clear on if it’s used for server-rendered components

---

This change is 

[justin808]

@elstgav Thanks! Do you have anybody using v16 that can help review this change?

In terms of "Should ReactOnRails.render() also be updated? I’m less clear on if it’s used for server-rendered components", it's a simple helper designed to be used from your JS code if you don't want to use the Rails Helper. Thus, it's not used for server rendering. In that case, would it require any updates?

In terms of tests, I'm open to your suggestions. This might be difficult as it's dependent on the React version used. I'm open to updating the code to the latest version of React so that we can test this properly.

 /**
   * ReactOnRails.render("HelloWorldApp", {name: "Stranger"}, 'app');
   *
   * Does this:
   *   ReactDOM.render(React.createElement(HelloWorldApp, {name: "Stranger"}),
   *     document.getElementById('app'))
   *
   * @param name Name of your registered component
   * @param props Props to pass to your component
   * @param domNodeId
   * @returns {virtualDomElement} Reference to your component's backing instance
   */
  render(name, props, domNodeId) {
    const componentObj = ComponentRegistry.get(name);
    const reactElement = createReactElement({ componentObj, props, domNodeId });

    // eslint-disable-next-line react/no-render-return-value
    return ReactDOM.render(reactElement, document.getElementById(domNodeId));
  },

[justin808]

@elstgav can you please rebase on master? I merged your other PR.

[elstgav]

Shoot. I rebased and force-pushed, but that closed this PR 😕. Shall I open a new one?

[elstgav]

And to answer your question, we’re using React 16 at my job. I haven’t tested the functionality yet, I got a bit bogged down with setting up the repo and test environment