React Context and Component Coupling
One of React’s more advanced features is Context. Developers say it’s advanced because it’s a double-edged sword that can lead to huge problems further down the road of a project if used for the wrong purpose.
What is it for?
React Context is specifically for coupling components. What do I mean by coupling? I mean creating a component that 100% depends on a parent component. Without the parent component, the component that requires its context should have limited functionality.
Let’s look at a simple react-native example
In this case it’s clear that the
CardTextInput component depends on the
Card component to work but because
CardTextInput doesn’t understand that dependency, the developer that is interfacing with both the
CardTextInput components is forced to build that dependency.
That just plain sucks. For more complex dependencies, things only get worse and building around these dependencies requires a lot of communication in a team to get people to really know how to wire up non-contextual components with real dependencies.
How to couple using Context
Context we have to build our components with 3 important properties:
getChildContext is a function that goes on the parent component, it is run by the child component to set
this.context. This is where we set the properties we want the child component to have access to.
childContextTypes is an object that describes what the content of
getChildContext looks like on the parent component. It does a type check much like
propTypes to make sure the context returned by
getChildContext is correct.
contextTypes is an object that describes what part of the parent component’s context the child component needs. Think of it like a request from child to parent that also does a type check. This object is attached to the child component.
Using Context to remove complexity
Let’s use context to simplify this clear dependency.
Card don’t need any additional wiring to work. This is awesome and what any developer would expect to see. Now all
CardTextInput will scroll to position when they receive focus.
The case against Context
So why does react advise against using Context? Because of the way
Context changes but neither
state changes with a component that is in between the two coupled components, then the coupled child component will not update. Read more about it here. It is also an experimental API which could potentially change in the future but is actively used in React Router.
What does this mean when coupling? It means your
Context should never update! That should be handled via props.