src/core/packages/rendering/browser/README.mdx
Kibana's browser-side architecture is an application composed of many different points where custom React elements can be mounted onto a DOM container. These elements have a self-contained component tree, this process is often described as an "ad-hoc" render. A self-contained component tree has no awareness of global context or stateful core services, such as i18n and theming which are often needed. That is why we use shared context providers.
The public contract Core Rendering Service offers a wrapper to add context to your React elements. The wrapper uses its own internal state to handle the dependencies needed for each internal context provider, so developers do not have to worry about passing many services from the CoreStart contract. There is only a single service to pass down, the Core Rendering Service, which is available in the CoreStart contract as core.rendering.
This React 16 example adds context from the Core Rendering Service to the MyApplication component, and then mounts it to the DOM.
const renderApp = ({ core, targetDomElement }: { core: CoreStart; targetDomElement: HTMLElement; }) => {
ReactDOM.render(core.rendering.addContext(<MyApplication />), targetDomElement);
return () => ReactDOM.unmountComponentAtNode(targetDomElement);
};