Output isn't always based on nesting order

[oztune]

I noticed that the documentation here and over at Helmet seems to imply that props get merged based on nesting order, but that's not always the case. It's based on mounting order, which doesn't always === nesting order.

During the lifetime of the app any component can be mounted at any point in the tree, but it gets treated as if it's the innermost component regardless. This is a problem in react-document-title for example since it assumes that the last component in the list is the inner-most one (https://github.com/gaearon/react-document-title/blob/master/index.js#L7)

[christophercrouzet]

Maybe the doc should state that to have the “innermost winning” behaviour, the react-side-effectified component (such as Helmet) needs to be defined before this.props.childrenif any ?

This behaviour might be a nice thing to have though since it allows a parent component to force/overwrite the props regardless of what the children components define by putting the react-side-effectified component after this.props.children.

Well, that is if my understanding is correct—I haven't really used react-side-effect yet. Sorry for the noise otherwise.

[timkindberg]

Yep, we are seeing this issue as well. We have a team creating a base page component and other teams can use it and override some base helmet settings (Helmet uses this lib indirectly).

So the page looks roughly like this:

const Page = ({ children }) =>
  <div>
    <Helmet { ...baseHelmetSettings } />
    { children }
  </div>

And then we use it like this:

<Page>
  <Helmet { ...overridesSettings } />
  // Other stuff
</Page

The children mount first, so the outer helmet acts as the inner.

:(