How To Architect/organize A React Application

- 1 answer

From a maintenance/architecture/performance perspective, when writing a react application, is it better to put all components in a super/parent component and bind it once to a page, or to have multiple mount nodes on the page for each piece of functionality?

My current approach is to have multiple mount nodes on the page so I can have a more flexible design. Basically like a bunch of 'component boxes' in different parts of the page, that way I can easily move an entire box to another part of the page and everything still works the same without being dependent on each other.

Is there a "best practice" for this (in terms of future maintenance), or has react not been around long enough to establish such a thing?



The most common practice I've seen is a single mount point for a the main react render. This has a few advantages

  • Keeps the HTML minimal and simple, this reduces potential confusion about what's handled by the DOM/HTML and what's handled by React/JSX.
  • Reduces the interface boundary between the root HTML and React. Fewer places where props need to be passed from outside React.
  • Simplifies the reasoning about what happens when. For example it can sometimes be tricky to determine when React applications are done rendering. Having multiple render operations makes this more difficult.