16.6 Context API not working in class component

[dericcain]

Do you want to request a feature or report a bug?
Quite possibly a bug (or maybe confusion about the current API)

I am using the new Context API as well as the new static contextType in React 16.6. I am passing context down a couple components deep but when I attempt to access the context within the component, the object is empty (only the default value passed into createContext is being displayed). This is happening in a current feature I am working on at my job, so I cannot display that code, but I did create a Codesandbox with the gist of the problem.

Here is a demonstration of the behavior: https://codesandbox.io/s/r4myz959ro

I would expect to be able to access the current values of the context. This way, if those values change, I would always have the most recent values. Now, maybe this is expected behavior, however, it would be confusing if it is.

React 16.6
ReactDOM 16.6

[dericcain]

@javascrewpt While I do believe that is one way to use the Context API, have you looked at this: https://reactjs.org/docs/context.html#classcontexttype ?

The contextType property on a class can be assigned a Context object created by React.createContext(). This lets you consume the nearest current value of that Context type using this.context. You can reference this in any of the lifecycle methods including the render function.

By the looks of that, I should be able to do what I am attempting to do.

[dericcain]

@javascrewpt That is a solution, but the approach seems to avoid the original issue. Also, the top-level component could be used to store state and also provide methods that manipulate that state. In your last example, you would need to jump through more hoops to account for that. From what I can tell, this is the whole purpose of the changes to the context API in 16.6:

We’ve heard feedback that adopting the new render prop API can be difficult in class components. So we’ve add a convenience API to consume a context value from within a class component.

Quoted from: https://reactjs.org/blog/2018/10/23/react-v-16-6.html?no-cache=1#static-contexttype

I appreciate your help. I would like to address the root of the issue or gain clarification of the intentions of the API. If the API is not supposed to work like I am attempting to use it, then I would propose (and even help) in clarifying the documentation so that others do not run into the same issue.

[dericcain]

@javascrewpt My issue is why do I have to create context in a separate file? Where in the docs does it say this? The example used in the docs has the context created in the same file: https://reactjs.org/docs/context.html#when-to-use-context

When the docs say one thing and the code behaves differently, this is usually one of three things:

• A bug
• A mistake in documentation
• A lack of understanding of the documentation

I am willing to accept any of the above. While you have provided a workaround, of sorts, it does not address the root cause.

Now, on to your proposed solution. As I have previously stated/questioned, what if my top-level component tracks state and also passes methods to change that state (please see the original codesandbox, which I've update: https://codesandbox.io/s/r4myz959ro)? Your simple solution is no longer valid. I would have to completely refactor my solution to separate out the context provider into another top-level component that tracks state, etc. This may be the correct way to do it. But, then again, where is this documented? And, we are back to the original question and the root of the problem.

The documentation makes it seem like my approach should work. It does not mention (anywhere that I can see) why it would not work. Is this a bug, a mistake in documentation, or did I interpret something incorrectly?

I am not trying to dismiss your help and I appreciate you attempting to find a solution for the problem. However, if you are just trying to prove a point by telling me that you, "don't believe I am using it correctly" or that, "there is no bug and it works as intended", please do not feel that you need to help anymore.

[gregordotjs]

I'm sorry if I came off too aggressive, I wasn't trying to dismiss your issue, it's just my lack of knowledge about this that made me question the problem. And you elaborated perfectly and I understand now your concern. I'm looking forward to hearing from some experts about this, seems an interesting issue.

[aweary]

@dericgw the problem you're describing has nothing to do with React, it's the behavior of circular ES6 module imports. Here's an example showing the same problem without React.

The index file imports View, which imports the index file and the AnotherLevelDeep, which itself requires the index file again. It's a circular dependency.

The reason it works with the Context.Consumer API is that the render method is lazily evaluated, while the class definition (including static properties) are evaluated when the module is loaded.

[lxcid]

Did u manage to resolve it? I'm facing similar issue.

context is an empty object {} even if I did something like this

const Context = React.createContext();

class Child extends React.Component {
  render() {
    const renderedContext = this.context;
    console.log({ this: this });
    console.log(renderedContext);
    console.log({ asd: Child.contextType });
    return <div />;
  }
}
Child.contextType = Context;

export const Test = props => (
  <Context.Provider value={{ hello: 'world' }}>
    <Child />
  </Context.Provider>
);

I'm quite sure I have no cyclic rendering, make sure I'm on 16.6.0 but nothing seems to work.

[lxcid]

Is it possible that it only work on production build? or @babel/preset-env and @babel/preset-react is transpiling till it broke context?

I have try many many variation upgrade to 16.7.0-alpha.0, just render the context provider and class component with context type.

I could not get it to work at all though…

[clintjansen]

Can't get this to work either, enclosing in <.Consumer> works fine, but the static contextType object is always empty.
Using latest React Native (with navigation)

[lxcid]

For my case, I forgot to upgrade react-dom to 16.6.0, I manage to get it working after upgrade!

@clintjansen I think you might need react-native to official support 16.6.0

[jacksongabbard]

Unless I'm very much mistaken, @dericgw is right that there is an issue here. @aweary, your point that this is related to modules seems incorrect. I have created a copy of this that is all in one file with no module hijinx in the mix. It still does not work: https://codesandbox.io/s/2xm84n3p1p

[hamlim]

@jacksongabbard it seems like the codesandbox you shared is still using the 16.5.2 versions of React and React-dom and not 16.6.0, here is a codesandbox using 16.6 showing the context being assigned and rendered correctly: https://codesandbox.io/s/m31mv7wox9

[jacksongabbard]

Ah, indeed, indeed. I should've checked the changelog. I would've noted that the this.context syntax arrived with 16.6. Thanks for pointing me in the right direction.

[clintjansen]

I'm having this issue, using 16.6 and no problem with circular dependency.
But I think it's due to how react-navigation works
Tested with only React Native, and it didnt work either.
Does RN need an update for this to work as well?

Oof, just noticed Expo is using RN 0.55 which is why it probably is not working for me.

[JReinhold]

I ran into the same issue as @dericgw, and came to the same conclusion as #13969 (comment) by @aweary, that it is a circular dependency problem. I had to move the Context creation out into a separate file, that both the parent component (that holds the Provider), and the child component (that consumes) imports from. this solves the dependency problem for me, at least.

I don't know how common this problem is, but I agree with @dericgw that if you follow the documentation to the point, you run into this problem, which means there should probably be a note about it in the docs.
It seems like @sophiebits are in charge of the docs, do you agree with me?