16.6 Context API not working in class component

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

[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.