How does React provide independent contexts for subtrees?

Question

If, as a thought experiment, I were to write my own createElement implementation for JSX, what might support for implicit context look like?

In particular, I can't figure out how with the limited means of JSX's createElement signature, contexts can be independent for different subtrees. (It appears React's Context handling has become more elaborate in recent versions; I'm mostly interested in the seemingly more straightforward mechanisms of earlier versions.)

This might be used to automatically determine heading levels, for example:

<Section title="Hello World">
    <Card title="Details" />
</Section>
<Card title="Example" />

Here Card would automatically generate <h3> and <h2>, respectively, by relying on something like context.headingLevel.

Answer 1

A very nice question, that shows how different is the concept of creating React Elements to actually executing the render functions (either the .render method of class components or simply the main body of a functional component).

In JSX itself (which is just React.createElement(…)) there‘s no concept of “context” at all. It comes into existance only when the components are rendered. It is indeed a duty of the React Renderer (such as React DOM or React Native) to actually implement Context APIs.

If you remove the ability to store states and to update the UI you are left with a minimal React implementation that only “renders once”, but perfectly fine to understand the problem at hand.

Everytime the React Renderer needs to render a React Elements tree (such as one built with JSX) it passes every single element and transforms it into a DOM structure, but when it encounters a component node (not a “native” element) it needs to render it to obtain its React Element sub tree, and swap the original node with it.

It’s in this specific moment that React can keep track of which Context values to pass to which components, since it is traversing the tree.

So, to answer directly your question, you can’t implement context in the “element creation phase”, inside your JSX implementation, you need to do it in a subsequent phase when you can traverse the tree.

If you were trying to build an “immediate JSX” you probably have something like this:

function createElement(type, props, ...children) {
  props = { children, ...props };

  if (typeof type === 'function') {
    return type(props);
  } else {
    return { type, props };
  }
}

In thise case you will not be able to implement an API similar to context, because the execution order is inner-then-outer:

const div = createElement('div', {}, createElement(Card, {}));
// identical to
const card = createElement(Card, {}); // inner, and then…
const div = createElement('div', {}, card); // outer