Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace deprecated ReactDOM methods in OverlayToaster #7166

Open
ggdouglas opened this issue Jan 14, 2025 · 1 comment
Open

Replace deprecated ReactDOM methods in OverlayToaster #7166

ggdouglas opened this issue Jan 14, 2025 · 1 comment

Comments

@ggdouglas
Copy link
Contributor

ggdouglas commented Jan 14, 2025

Tracking work required for full compatibility with React 18. The OverlayToaster component exposes a synchronous OverlayToaster.create() static method that uses ReactDOM.render. The asynchronous OverlayToaster.createAsync method allows for an optional custom DOM renderer to be passed in (such as root.render), but also uses ReactDOM.render as the default. This issue is similar/related to #7165

#### React 18
To maintain backwards compatibility with React 16 and 17, `OverlayToaster.createAsync` uses `ReactDOM.render` out of the box. This triggers a [console warning on React 18](https://react.dev/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis).
A future major version of Blueprint will drop support for React versions before 18 and switch the
default rendering function from `ReactDOM.render` to `createRoot`.
If you're using React 18, we recommend passing in a custom `domRenderer` function.
```tsx
import { OverlayToaster } from "@blueprintjs/core";
import { createRoot } from "react-dom/client";
const toaster = await OverlayToaster.createAsync(toasterProps, {
// Use createRoot() instead of ReactDOM.render(). This can be deleted after
// a future Blueprint version uses createRoot() for Toasters by default.
domRenderer: (toaster, containerElement) => createRoot(containerElement).render(toaster),
});
toaster.show({ message: "Hello React 18!" });
```

We should:

  1. Remove/replace the synchronous OverlayToaster.create() method
  2. Replace the DOMMountOptions defaults with root.render

Code:

overlayToaster.tsx
mountOptions.ts

const toaster = ReactDOM.render<OverlayToasterProps>(

const domRenderer = options?.domRenderer ?? ReactDOM.render;

/**
* Similar to {@link OverlayToaster.create}, but returns a Promise to a
* Toaster instance after it's rendered and mounted to the DOM.
*
* This API will replace the synchronous {@link OverlayToaster.create} in a
* future major version of Blueprint to reflect React 18+'s new asynchronous
* rendering API.
*/

References:

  1. https://react.dev/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis
  2. Replacing render with createRoot reactwg/react-18#5
@ggdouglas
Copy link
Contributor Author

For the initial internal React 18 upgrade, these deprecations will need to be ignored to pass the linter: #7160

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant