Difference between Rendering by importing and Importing + ReactRender.DOM - React

Question

I've been able to render in several different ways a component in React, However, I'm not sure what is actual difference between rendering like this:

App.js (sample cut):

    import Cartesian from './cartesian'

  //Somewhere inside the App.js component:
     <div id="graph">
        <Cartesian/>
     </div>

Cartesian.js:

export default class Cartesian extends Component {
    render() {
        return <h1> Ex </h1>
    }
}

Now this works perfectly, However, I'm not sure about the difference if I had add something linke this:

  import Cartesian from './cartesian'

  //Somewhere inside the App.js component:
     <div id="graph">
        <Cartesian/>
     </div>
  ReactDOM.render(<Cartesian/>,document.getElementById("graph"));

Or even this:

    import Cartesian from './cartesian'

    //Somewhere inside the App.js component:
         <div id="graph">
         </div>
    ReactDOM.render(<Cartesian/>,document.getElementById("graph"));

Rendering-wise, does any of these has any difference? I have read some about React DOM from both API and this useful post (React vs ReactDOM?) However, this subject is not quite clear for me when it comes to rendering.

Thanks in advance.

AirBorne04 · Accepted Answer · 2017-09-11T14:39:24.167

Let me try to assemble an answer :)

Usually you only use ReactDOM.render once in the root of your application. Your first approach is the preferred one. There are several advantages to it.

The connection to the Cartesian component to the parent component (potentially passing attributes)
Serverside rendering is relying on React.renderToString, i am pretty sure that referencing document.getElementById will not properly work on the server.
From the code style connecting two pieces of your application with a string id (graph) is error prone when changing one id it will break, especially since this connection would not be expected by somebody not 100% familiar with the coding.

Having said that there is no obvious reason why multiple ReactDom.render would be beneficial, even though this might be working i would consider this an antipattern.

score 0 · Answer 2 · answered Sep 06 '17 at 09:08

You can look at the ReactDOM.render as a main entry point of your application. It mounts react component inside the given DOM node and start react life cycle. Normally you would not have many entry points in your application. The idea of react is to move away from actual DOM and work with virtual DOM instead. The official docs are pretty clear about this:

The react-dom package provides DOM-specific methods that can be used at the top level of your app and as an escape hatch to get outside of the React model if you need to. Most of your components should not need to use this module

Regarding to your actual question. There will be differences. First all children in the target node will be replaced as result of ReactDOM.render. Second - you will find problems accessing same context from two separately mounted components. I am sure there will be more problems - therefore follow the recommended approach with one mounting point with single ReactDOM.render call.

Difference between Rendering by importing and Importing + ReactRender.DOM - React

2 Answers2