support for React's Context

[jhegedus42]

It seems that at the moment there is no support for React Context.

I am trying to make this code type-safe with flow but it does not seem to be possible.

[vkurchatkin]

It's inherently impossible to make context type-safe. Since it's passed implicitly, it can only be verified at runtime

[jhegedus42]

Thanks for the clarification @vkurchatkin !

[milesj]

Jumping in this as I'm running into the same situation. Wouldn't a 4th generic argument solve this?

type Context = { foo: string };

class Foo extends React.Component<{}, Props, State, Context, ChildContext> {}

Edit: Got bored, something like this: https://github.com/milesj/flow/commit/76e9495d47732ee335754af6b63fd2cdae75be14

[lifeiscontent]

@vkurchatkin any updates on this seems @milesj update is working, right?

[awitherow]

@vkurchatkin can you please provide some information on this ticket as the update from @milesj works?

[awitherow]

@vkurchatkin any updates on this?

[vkurchatkin]

@awitherow the problem with this approach is that it doesn't really provide any safety, but breaks a lot of existing code. I'm not sure that it's worth it

[awitherow]

Well is there a way we could make this happen in some way?

Assuming flow is the future, our project has completely switched from using propTypes to using flow... except it does not work in 3 lines of code where we use context types. It would be great to be able to remove the package prop-types completely and be able to have complete consistency.

Or is it a "not possible".

[vkurchatkin]

Or is it a "not possible".

I would say that, no it's not possible. And context requires propTypes anyway.

[Peeja]

Why is this not possible? Flow knows statically all of the ways the components could be put together. Can't it find type problems in the context tree?

[milesj]

All we really need (I want) to solve/type annotate is accessing context in components: const a = this.context.foo.

class Foo extends React.Component<{}, {}, { foo: string }> {}

[zhengxiaoyao0716]

@milesj I take a try but it not work (with VSCode).

What's I want to see here is like the lint of props and state:

But in fact, what I really need is just got the context type lint from the static contextType = Context;, for it already had enought message to deduced the type of this.context:

[zhengxiaoyao0716]

Well, I resolved it by define the context again (context: ContextType;).

What? I found that I could not upload the screenshot! It seems all the image from https://user-images.githubusercontent.com returns 404... Here I paste the code instead:

import { Context, ContextType } from './...';

class extends Component {
    static contextType = Context;
    context: ContextType;
    ...
}

[milesj]

This issue was about the legacy context API, not the new one.

[zhengxiaoyao0716]

@milesj oh, I'm sorry I didn't notice it...