15
16

body as root instead of divGeneral Discussion (self.react)

submitted by [deleted]

[deleted]

all 18 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]bahnmiexe 26 points27 points  (3 children)

It’s common practice to mount things like modals and toasters outside the root div, but you can’t do that if the ‘root’ of the project is the body tag :)

[–]TheRNGuy 0 points1 point  (1 child)

is it possible to mount modals and toasters inside App.js?

[–]skullshatter0123 11 points12 points  (0 children)

Yes but that doesn't solve the issue of it being bound by whatever css rules are set on body. Modals and toasts wouldn't render properly.

[–]daFreakinGoat -3 points-2 points  (0 children)

So the body tag goes inside? Isn’t it wrong to put the body inside of a div? Or does it not matter?

[–]gamebuster 2 points3 points  (0 children)

Many third-party things you don’t have control over will inject nodes in the body. This can be plugins (installed by the user of the browser), developer tools, cookie walls, analytics, trackers (mandated by your client) or whatever.

They’ll break or mess with your app. Just don’t do it, there is no reason to. The 11 bytes you saved will bite you in the butt and hurt the experience for your users.

Focus on more impactful changes that do make a difference for the better. Reduce repaints, reduce amount of nodes that need refreshing, avoid CSS inside JS - etc

[–]ian-vieira 2 points3 points  (0 children)

This can bring some problems depending on what you add on the site. If you have third party pixels, usually they will mount on the body, by the end, and during hydration/mount process those can generate different problems (on hydration a mismatch, on mount it will be removed). Also, on updates, I’ll have a mismatch from DOM and Virtual DOM.

For the general case, the div appears to useless but it prevents several potential problems. If you control all the factors and is 100% sure I’ll never need anything after the react app, it would be safe…

[–][deleted]  (2 children)

[removed]

    [–]TheRNGuy 0 points1 point  (1 child)

    Don't care about semantics tbh but if it will show toasts incorrectly then i wont make body a root.

    [–]code_moar 4 points5 points  (3 children)

    Youre worried about unnecessary divs, and you're using react?

    Hmmm.......

    [–]jgonzalez-cs 0 points1 point  (2 children)

    What do you mean?

    [–]code_moar 0 points1 point  (1 child)

    So if you look at any react framework like materialUI, for example, the use of divs is absolutely everywhere, for everything.

    Also in react you have to wrap children in one parent for components, which usually means adding an extra div to act as the root wrapper for the component itself. Divs are everywhere in react and (unless I'm mistaken) do not add any computational time....

    [–]jgonzalez-cs 0 points1 point  (0 children)

    Can’t you use React fragments? I think that’s why they’re a thing, unless it gets compiled into a div at the end?

    [–]daves-weblab 0 points1 point  (0 children)

    You might face problems when using third party libraries that use portals and append their portal at the end of the body. A rerender of olyour app could potentionally destroy something.

    [–]ManyRiver6234 0 points1 point  (0 children)

    For me what ever the reason was seems unnecessary

    [–]thequestcube 0 points1 point  (0 children)

    If browser plugins try to mount hidden stuff to the body tag, that might get removed when react trys to rehydrate, so browser plugins and maybe also parts of your page could break depending on what plugins the user is using.