React-redux: Conflict with passing a "context" prop

[jmakGH]

Upon upgrading React and React Redux to the latest versions, an app I am working on started crashing on render.

After some debugging I traced the issue to a connected component being passed a "context" prop that was being used to control some of the app's features and completely unrelated to React's Context API.

I couldn't find any notes about that being a protected prop anywhere in the docs or online and thought it might be a good idea to post this here in case anyone else happened to stumble across this issue.

The biggest takeaway was that the only error message came from React, which made debugging the issue kind of a hassle -- especially because everything was working prior to upgrading to the latest version (which makes sense since the version of React we were using was before their Context update).

Perhaps a note under the Troubleshooting section of the website could document this issue as a potential pitfall.

Issue is recreated at this CodeSandbox. The app crashes whenever a context prop is passed to ConnectedChild.

Which versions of React, ReactDOM/React Native, Redux, and React Redux are you using? Which browser and OS are affected by this issue? Did this work in previous versions of React Redux?
React 16.8.1
ReactDOM 16.8.1
React Redux 6.0.0

This issue wasn't happening with React v15 and React Redux v4

[markerikson]

It is mentioned in the docs a couple times, but not particularly highlighted:

https://react-redux.js.org/api/connect#context-object

https://react-redux.js.org/using-react-redux/accessing-store#providing-custom-context

Up through 5.x, store was effectively a "reserved" prop, allowing users to pass a specific store instance directly to a connected component.

In 6.0, store is no longer meaningful as a prop, but we throw errors to let users know they probably made a mistake when upgrading and should change their code (because it won't do what they expected it to do). We also added context as a "reserved prop", because we allow users to pass a custom context instance to a connected component.

Given that we're considering having our next version be a major version change anyway, perhaps we could consider renaming that prop to be something like customContext instead of just context.

[jmakGH]

My mistake, I had overlooked that in the docs. I'm perhaps at fault for using your comment on #1104 as a reference guide for the migration without completely reading the updated docs.

I think you guys should be fine leaving it as context seeing as how I had a difficult time finding any discussion from others facing this issue. I'd assume most people now generally reserve context for React in general to avoid conflicts in semantics/code. We just had just been using it as a prop for a long time before they updated their Context API.

Thank you for your response! I'll go ahead and close this issue.

[sakulstra]

not sure if it's to late to alter the breaking changes :man_shrugging: but would have been great to have this noted somewhere :D debugged this for more than an hour till i found the problem. context as a component prop is sth we appearently use relatively often so the update broke our app at multiple places with no obvious relation to each other.

[tlginn]

I ran into this issue as well. I'm glad I found this thread!

[TheMoonDawg]

@markerikson Did y'all decided against renaming the prop to something like customContext? We also just ran into this same issue after upgrading.

Just curious. Thanks!