Skip to content

Instantly share code, notes, and snippets.

Last active January 22, 2022 01:52
What would you like to do?
Parent vs. Owner Context

If you've reached this page, it's probably because your "parent-based and owner-based contexts differ".

As we've been iterating on React's "context" feature, we've discovered that the parent-based relationship is more useful than the owner-based relationship, so we're migrating to use a parent-based hierarchy.

In short, the owner of a component is whomever creates the component, while the parent of a component is whomever would be the containing ancestor in the DOM hierarchy. To learn more about the owner relationship, see the docs here:

In many cases, the owner and the parent are the same node, in which case, no further action is necessary. However, if your owner and your parent differ, you should ensure that the context variables you're using aren't going to break when we switch from owner-based contexts to parent-based contexts. If you're seeing the warning, your component may not be ready for the switch.

NOTE: semantically-equal context variables... In some rare cases, you might have a getChildContext function which is not idempotent or which returns objects using value semantics. For instance, if your getChildContext() returns a random number, you might get a warning like:

Warning: owner-based and parent-based contexts differ (values: '0.91666' vs '0.37677')...

Such cases are not necessarily a bug, but are probably bad practice. Our recommendation is that you fix these situations to ensure getChildContext returns the same value (triple equals equality) for a particular set of inputs (props/context). That said, as long as your context variables are semantically equivalent, you should be able to update to 0.14 without things breaking.

Copy link

Is there a way to get parent context (not owner context) in the child in current version of react?

Copy link

Alright, so given that my owner and parent contexts have different content (i.e.: the parent context is empty and the owner context has goodies), how am I supposed to manage the parent context? The parent isn't a genuine React component -- it's just some div or span or whatever. It's going to be a problem if I'm expected to promote into full-fledged custom components each of the ancestors between the owner and the sub-component. But I don't see an alternative.

I.e.: what does it look like to "ensure that the context variables you're using aren't going to break when we switch from owner-based contexts to parent-based contexts" ?

As far as I can tell, this gist is long on diagnosis and short on prescription. Both are needed.

Copy link

I am also seeing this error when trying to pass context to dynamic children. So if I have a component like:

render: function() {

Whatever component that gets passed in gets undefineds in its context. This makes sense since the owner is the parent component, but the parent is the component doing the render. Not sure what to do about it.

Copy link

L8D commented Sep 8, 2015

@hellogerard you're getting that issue because you're passing in a component (like dynamicComponentFromParent={Foo}) instead of a react element (like dynamicComponentFromParent={<Foo/>})

Copy link

ghost commented Mar 22, 2016

What is meant by reparenting in reactjs .. An example would be great.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment