Subscribes to context changes.

The value argument passed to the function will be equal to the value prop of the closest Provider for this context above in the tree. If there is no Provider for this context above, the value argument will be equal to the defaultValue that was passed to createContext().

All Consumers that are descendants of a Provider will re-render whenever the Provider's value prop changes. The propagation from Provider to its descendant Consumers is not subject to the shouldComponentUpdate method, so the Consumer is updated even when an ancestor component bails out of the update.

Changes are determined by comparing the new and old values using referential equality.

Allows Consumers to subscribe to context changes. Accepts a value prop to be passed to Consumers that are descendants of this Provider. One Provider can be connected to many Consumers. Providers can be nested to override values deeper within the tree.

Caveat:

The React Context API uses Object.is to determine equality (see https://reactjs.org/docs/context.html#caveats). This affects

scalajs-react will use plain JS values without translation where possible (eg. booleans, ints, strings) in which case, universal equality is used by React (eg. true == true, 123 == 123, "hello" == "hello"). For these types of contexts, feel free to call context.provide(value)(children) the same way you would in React JS.

Non-JS values (eg. case classes) are boxed into JS objects in which case, React will use referential equality meaning that you need to hold on to and reuse the boxed instance. Seeing as you're not doing the boxing yourself, what you should hold on to and reuse is the result of .provide() before you apply children. For example, instead of:

class Backend {
  def render(p: Props) =
    context.provide(X(...))(<.div("hello"))
}

you should save and reuse the provide result:

class Backend {
  private val contextX = context.provide(X(...))

  def render(p: Props) =
    contextX(<.div("hello"))
}

Doing so will keep React happy and avoid needless re-renders.