Context.write

[acdlite]

This is a very early stage proposal. I'm opening this RFC as a way to explain the problem space. We're still exploring alternative solutions. If this were an ECMAScript proposal it'd be Stage 0.

Summary

Proposes an extension to the context API for updating the default context value. This would allow for React-managed state that lives outside the UI tree and is shared across roots.

Basic example

const Context = React.createContext(initialValue, contextDidUpdate);
// Update the global context value across all roots. Any context consumer that
// is not wrapped in a Provider will re-render with this value.
Context.write(newValue);
// Functional updates also supported for access to the previous value.
Context.write(prevValue => newValue);

function contextDidUpdate(newContext) {
  // Optional callback that fires whenever context changes
}

Rendered text

[theKashey]

For each context, React would have to maintain a separate version per root, as well as a separate queue of updates.

I was just thinking about it - per-root changeable defaultValue would allow "automatic Provider injection" effect, making some stuff(like React-Helmet, side-effect, etc) easier.

[gaearon]

We could also use this to store latest versions of component implementations in hot reloading, and instead of forceUpdate we'd update the context.

[gaearon]

"The trickiest question is how"

[tf]

"The underlying principle"

[tf]

In particular, consumer components could still be used with a provided context to replace the global default context with a fixture in tests, right?

[jfo84]

Great job @acdlite :)

[hikire]

If by "discarded roots" you mean those which are just removed from DOM without calling unmountComponentAtNode(), why not use MutationObserver?

[acdlite]

How would that work? AFAIK MutationObserver only works for immediate children. It won't tell you if a tree is disconnected by an ancestor node.

[mfrachet]

There's a point I'm misunderstanding. What does it mean concretely that

Actions are applied in the render phase using the functional form of Context.write?

[acdlite]

Explanation of render phase versus commit phase: https://twitter.com/acdlite/status/977291318324948992

[timoxley]

+1 for more symmetry between component state and context. Ideally, lifting component state & logic up to into a shared context wouldn't require rewriting the whole thing.

[diegohaz]

Agreed. I've been doing stuff on this direction on https://github.com/diegohaz/constate

Ideally, we should be writing local state until we really need to lift it up. Then, refactoring it into global/shared/contextual state should be something really simple.

[rybon]

@acdlite fantastic proposal!

What's the plan? Where do we go from here? Is there a concrete path forward like there is for the Hooks proposal?

[zombieJ]

Is that possible to add freeze like:

const Context = React.createContext(initialValue, contextDidUpdate);
Context.freeze();

Context.write(newValue); // Error. This context has been freeze and can't change defaultValue.

[dancerphil]

implement in https://codesandbox.io/s/react-context-next-xk1rk using redux

[mucsi96]

I have submitted an RFC with alternative solution. I believe more inline with hooks direction.
#130
Would like to ask for feedback from all of you :)

[gaearon]

Looks like this either needs more work and/or won't work at all.