renderDom.tsx 964 B

123456789101112131415161718192021222324252627282930313233
  1. import {render} from 'react-dom';
  2. import {createRoot} from 'react-dom/client';
  3. import {USE_REACT_CONCURRENT_MODE} from 'sentry/constants';
  4. export function renderDom(
  5. Component: React.ComponentType,
  6. container: string,
  7. props: Record<string, any> = {}
  8. ) {
  9. const rootEl = document.querySelector(container);
  10. // Note: On pages like `SetupWizard`, we will attempt to mount main App
  11. // but will fail because the DOM el wasn't found (which is intentional)
  12. if (!rootEl) {
  13. return;
  14. }
  15. // Types are for ConfigStore, the window object is from json and features is not a Set
  16. if (
  17. (window.__initialData.features as unknown as string[]).includes(
  18. 'organizations:react-concurrent-renderer-enabled'
  19. ) ||
  20. USE_REACT_CONCURRENT_MODE
  21. ) {
  22. // Enable concurrent rendering
  23. const root = createRoot(rootEl);
  24. root.render(<Component {...props} />);
  25. } else {
  26. // Legacy rendering
  27. render(<Component {...props} />, rootEl);
  28. }
  29. }