Enable React StrictMode (#28258)

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/Modal.tsx

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { StrictMode } from "react";
 import ReactDOM from "react-dom";
 import classNames from "classnames";
 import { IDeferred, defer, sleep } from "matrix-js-sdk/src/utils";
@@ -416,18 +416,20 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
             const classes = classNames("mx_Dialog_wrapper mx_Dialog_staticWrapper", this.staticModal.className);
 
             const staticDialog = (
-                <TooltipProvider>
-                    <div className={classes}>
-                        <Glass className="mx_Dialog_border">
-                            <div className="mx_Dialog">{this.staticModal.elem}</div>
-                        </Glass>
-                        <div
-                            data-testid="dialog-background"
-                            className="mx_Dialog_background mx_Dialog_staticBackground"
-                            onClick={this.onBackgroundClick}
-                        />
-                    </div>
-                </TooltipProvider>
+                <StrictMode>
+                    <TooltipProvider>
+                        <div className={classes}>
+                            <Glass className="mx_Dialog_border">
+                                <div className="mx_Dialog">{this.staticModal.elem}</div>
+                            </Glass>
+                            <div
+                                data-testid="dialog-background"
+                                className="mx_Dialog_background mx_Dialog_staticBackground"
+                                onClick={this.onBackgroundClick}
+                            />
+                        </div>
+                    </TooltipProvider>
+                </StrictMode>
             );
 
             ReactDOM.render(staticDialog, ModalManager.getOrCreateStaticContainer());
@@ -443,18 +445,20 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
             });
 
             const dialog = (
-                <TooltipProvider>
-                    <div className={classes}>
-                        <Glass className="mx_Dialog_border">
-                            <div className="mx_Dialog">{modal.elem}</div>
-                        </Glass>
-                        <div
-                            data-testid="dialog-background"
-                            className="mx_Dialog_background"
-                            onClick={this.onBackgroundClick}
-                        />
-                    </div>
-                </TooltipProvider>
+                <StrictMode>
+                    <TooltipProvider>
+                        <div className={classes}>
+                            <Glass className="mx_Dialog_border">
+                                <div className="mx_Dialog">{modal.elem}</div>
+                            </Glass>
+                            <div
+                                data-testid="dialog-background"
+                                className="mx_Dialog_background"
+                                onClick={this.onBackgroundClick}
+                            />
+                        </div>
+                    </TooltipProvider>
+                </StrictMode>
             );
 
             setTimeout(() => ReactDOM.render(dialog, ModalManager.getOrCreateContainer()), 0);

src/components/views/elements/PersistedElement.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { MutableRefObject, ReactNode } from "react";
+import React, { MutableRefObject, ReactNode, StrictMode } from "react";
 import ReactDOM from "react-dom";
 import { isNullOrUndefined } from "matrix-js-sdk/src/utils";
 import { TooltipProvider } from "@vector-im/compound-web";
@@ -167,13 +167,15 @@ export default class PersistedElement extends React.Component<IProps> {
 
     private renderApp(): void {
         const content = (
-            <MatrixClientContext.Provider value={MatrixClientPeg.safeGet()}>
-                <TooltipProvider>
-                    <div ref={this.collectChild} style={this.props.style}>
-                        {this.props.children}
-                    </div>
-                </TooltipProvider>
-            </MatrixClientContext.Provider>
+            <StrictMode>
+                <MatrixClientContext.Provider value={MatrixClientPeg.safeGet()}>
+                    <TooltipProvider>
+                        <div ref={this.collectChild} style={this.props.style}>
+                            {this.props.children}
+                        </div>
+                    </TooltipProvider>
+                </MatrixClientContext.Provider>
+            </StrictMode>
         );
 
         ReactDOM.render(content, getOrCreateContainer("mx_persistedElement_" + this.props.persistKey));

src/components/views/messages/TextualBody.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { createRef, SyntheticEvent, MouseEvent } from "react";
+import React, { createRef, SyntheticEvent, MouseEvent, StrictMode } from "react";
 import ReactDOM from "react-dom";
 import { MsgType } from "matrix-js-sdk/src/matrix";
 import { TooltipProvider } from "@vector-im/compound-web";
@@ -118,7 +118,12 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
         // Insert containing div in place of <pre> block
         pre.parentNode?.replaceChild(root, pre);
 
-        ReactDOM.render(<CodeBlock onHeightChanged={this.props.onHeightChanged}>{pre}</CodeBlock>, root);
+        ReactDOM.render(
+            <StrictMode>
+                <CodeBlock onHeightChanged={this.props.onHeightChanged}>{pre}</CodeBlock>
+            </StrictMode>,
+            root,
+        );
     }
 
     public componentDidUpdate(prevProps: Readonly<IBodyProps>): void {
@@ -192,9 +197,11 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
                 const reason = node.getAttribute("data-mx-spoiler") ?? undefined;
                 node.removeAttribute("data-mx-spoiler"); // we don't want to recurse
                 const spoiler = (
-                    <TooltipProvider>
-                        <Spoiler reason={reason} contentHtml={node.outerHTML} />
-                    </TooltipProvider>
+                    <StrictMode>
+                        <TooltipProvider>
+                            <Spoiler reason={reason} contentHtml={node.outerHTML} />
+                        </TooltipProvider>
+                    </StrictMode>
                 );
 
                 ReactDOM.render(spoiler, spoilerContainer);

src/utils/pillify.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { StrictMode } from "react";
 import ReactDOM from "react-dom";
 import { PushProcessor } from "matrix-js-sdk/src/pushprocessor";
 import { MatrixClient, MatrixEvent, RuleId } from "matrix-js-sdk/src/matrix";
@@ -76,9 +76,11 @@ export function pillifyLinks(
                 const pillContainer = document.createElement("span");
 
                 const pill = (
-                    <TooltipProvider>
-                        <Pill url={href} inMessage={true} room={room} shouldShowPillAvatar={shouldShowPillAvatar} />
-                    </TooltipProvider>
+                    <StrictMode>
+                        <TooltipProvider>
+                            <Pill url={href} inMessage={true} room={room} shouldShowPillAvatar={shouldShowPillAvatar} />
+                        </TooltipProvider>
+                    </StrictMode>
                 );
 
                 ReactDOM.render(pill, pillContainer);
@@ -133,14 +135,16 @@ export function pillifyLinks(
 
                         const pillContainer = document.createElement("span");
                         const pill = (
-                            <TooltipProvider>
-                                <Pill
-                                    type={PillType.AtRoomMention}
-                                    inMessage={true}
-                                    room={room}
-                                    shouldShowPillAvatar={shouldShowPillAvatar}
-                                />
-                            </TooltipProvider>
+                            <StrictMode>
+                                <TooltipProvider>
+                                    <Pill
+                                        type={PillType.AtRoomMention}
+                                        inMessage={true}
+                                        room={room}
+                                        shouldShowPillAvatar={shouldShowPillAvatar}
+                                    />
+                                </TooltipProvider>
+                            </StrictMode>
                         );
 
                         ReactDOM.render(pill, pillContainer);

src/utils/tooltipify.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { StrictMode } from "react";
 import ReactDOM from "react-dom";
 import { TooltipProvider } from "@vector-im/compound-web";
 
@@ -53,11 +53,13 @@ export function tooltipifyLinks(rootNodes: ArrayLike<Element>, ignoredNodes: Ele
             // wrapping the link with the LinkWithTooltip component, keeping the same children. Ideally we'd do this
             // without the superfluous span but this is not something React trivially supports at this time.
             const tooltip = (
-                <TooltipProvider>
-                    <LinkWithTooltip tooltip={href}>
-                        <span dangerouslySetInnerHTML={{ __html: node.innerHTML }} />
-                    </LinkWithTooltip>
-                </TooltipProvider>
+                <StrictMode>
+                    <TooltipProvider>
+                        <LinkWithTooltip tooltip={href}>
+                            <span dangerouslySetInnerHTML={{ __html: node.innerHTML }} />
+                        </LinkWithTooltip>
+                    </TooltipProvider>
+                </StrictMode>
             );
 
             ReactDOM.render(tooltip, node);

src/vector/app.tsx

@@ -12,7 +12,7 @@ Please see LICENSE files in the repository root for full details.
 
 // To ensure we load the browser-matrix version first
 import "matrix-js-sdk/src/browser-index";
-import React, { ReactElement } from "react";
+import React, { ReactElement, StrictMode } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import { createClient, AutoDiscovery, ClientConfig } from "matrix-js-sdk/src/matrix";
 import { WrapperLifecycle, WrapperOpts } from "@matrix-org/react-sdk-module-api/lib/lifecycles/WrapperLifecycle";
@@ -111,17 +111,19 @@ export async function loadApp(fragParams: {}, matrixChatRef: React.Ref<MatrixCha
 
     return (
         <wrapperOpts.Wrapper>
-            <MatrixChat
-                ref={matrixChatRef}
-                onNewScreen={onNewScreen}
-                config={config}
-                realQueryParams={params}
-                startingFragmentQueryParams={fragParams}
-                enableGuest={!config.disable_guests}
-                onTokenLoginCompleted={onTokenLoginCompleted}
-                initialScreenAfterLogin={initialScreenAfterLogin}
-                defaultDeviceDisplayName={defaultDeviceName}
-            />
+            <StrictMode>
+                <MatrixChat
+                    ref={matrixChatRef}
+                    onNewScreen={onNewScreen}
+                    config={config}
+                    realQueryParams={params}
+                    startingFragmentQueryParams={fragParams}
+                    enableGuest={!config.disable_guests}
+                    onTokenLoginCompleted={onTokenLoginCompleted}
+                    initialScreenAfterLogin={initialScreenAfterLogin}
+                    defaultDeviceDisplayName={defaultDeviceName}
+                />
+            </StrictMode>
         </wrapperOpts.Wrapper>
     );
 }

src/vector/init.tsx

@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import * as ReactDOM from "react-dom";
-import * as React from "react";
+import React, { StrictMode } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import * as languageHandler from "../languageHandler";
@@ -105,7 +105,9 @@ export async function showError(title: string, messages?: string[]): Promise<voi
         "../async-components/structures/ErrorView"
     );
     window.matrixChat = ReactDOM.render(
-        <ErrorView title={title} messages={messages} />,
+        <StrictMode>
+            <ErrorView title={title} messages={messages} />
+        </StrictMode>,
         document.getElementById("matrixchat"),
     );
 }
@@ -116,7 +118,9 @@ export async function showIncompatibleBrowser(onAccept: () => void): Promise<voi
         "../async-components/structures/ErrorView"
     );
     window.matrixChat = ReactDOM.render(
-        <UnsupportedBrowserView onAccept={onAccept} />,
+        <StrictMode>
+            <UnsupportedBrowserView onAccept={onAccept} />
+        </StrictMode>,
         document.getElementById("matrixchat"),
     );
 }