Ad

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?

Ad

Answer

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.
Ad
source: stackoverflow.com
Ad