Skip to content

Commit da5c97f

Browse files
t3chguyt3chguy
authored
Enable React StrictMode (#28258)
Signed-off-by: Michael Telatynski <[email protected]>
1 parent bdf0f1d commit da5c97f

File tree

7 files changed

+96
-71
lines changed

7 files changed

+96
-71
lines changed

‎src/Modal.tsx

+29-25
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
77
Please see LICENSE files in the repository root for full details.
88
*/
99

10-
import React from "react";
10+
import React, { StrictMode } from "react";
1111
import ReactDOM from "react-dom";
1212
import classNames from "classnames";
1313
import { IDeferred, defer, sleep } from "matrix-js-sdk/src/utils";
@@ -416,18 +416,20 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
416416
const classes = classNames("mx_Dialog_wrapper mx_Dialog_staticWrapper", this.staticModal.className);
417417

418418
const staticDialog = (
419-
<TooltipProvider>
420-
<div className={classes}>
421-
<Glass className="mx_Dialog_border">
422-
<div className="mx_Dialog">{this.staticModal.elem}</div>
423-
</Glass>
424-
<div
425-
data-testid="dialog-background"
426-
className="mx_Dialog_background mx_Dialog_staticBackground"
427-
onClick={this.onBackgroundClick}
428-
/>
429-
</div>
430-
</TooltipProvider>
419+
<StrictMode>
420+
<TooltipProvider>
421+
<div className={classes}>
422+
<Glass className="mx_Dialog_border">
423+
<div className="mx_Dialog">{this.staticModal.elem}</div>
424+
</Glass>
425+
<div
426+
data-testid="dialog-background"
427+
className="mx_Dialog_background mx_Dialog_staticBackground"
428+
onClick={this.onBackgroundClick}
429+
/>
430+
</div>
431+
</TooltipProvider>
432+
</StrictMode>
431433
);
432434

433435
ReactDOM.render(staticDialog, ModalManager.getOrCreateStaticContainer());
@@ -443,18 +445,20 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
443445
});
444446

445447
const dialog = (
446-
<TooltipProvider>
447-
<div className={classes}>
448-
<Glass className="mx_Dialog_border">
449-
<div className="mx_Dialog">{modal.elem}</div>
450-
</Glass>
451-
<div
452-
data-testid="dialog-background"
453-
className="mx_Dialog_background"
454-
onClick={this.onBackgroundClick}
455-
/>
456-
</div>
457-
</TooltipProvider>
448+
<StrictMode>
449+
<TooltipProvider>
450+
<div className={classes}>
451+
<Glass className="mx_Dialog_border">
452+
<div className="mx_Dialog">{modal.elem}</div>
453+
</Glass>
454+
<div
455+
data-testid="dialog-background"
456+
className="mx_Dialog_background"
457+
onClick={this.onBackgroundClick}
458+
/>
459+
</div>
460+
</TooltipProvider>
461+
</StrictMode>
458462
);
459463

460464
setTimeout(() => ReactDOM.render(dialog, ModalManager.getOrCreateContainer()), 0);

‎src/components/views/elements/PersistedElement.tsx

+10-8
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
55
Please see LICENSE files in the repository root for full details.
66
*/
77

8-
import React, { MutableRefObject, ReactNode } from "react";
8+
import React, { MutableRefObject, ReactNode, StrictMode } from "react";
99
import ReactDOM from "react-dom";
1010
import { isNullOrUndefined } from "matrix-js-sdk/src/utils";
1111
import { TooltipProvider } from "@vector-im/compound-web";
@@ -167,13 +167,15 @@ export default class PersistedElement extends React.Component<IProps> {
167167

168168
private renderApp(): void {
169169
const content = (
170-
<MatrixClientContext.Provider value={MatrixClientPeg.safeGet()}>
171-
<TooltipProvider>
172-
<div ref={this.collectChild} style={this.props.style}>
173-
{this.props.children}
174-
</div>
175-
</TooltipProvider>
176-
</MatrixClientContext.Provider>
170+
<StrictMode>
171+
<MatrixClientContext.Provider value={MatrixClientPeg.safeGet()}>
172+
<TooltipProvider>
173+
<div ref={this.collectChild} style={this.props.style}>
174+
{this.props.children}
175+
</div>
176+
</TooltipProvider>
177+
</MatrixClientContext.Provider>
178+
</StrictMode>
177179
);
178180

179181
ReactDOM.render(content, getOrCreateContainer("mx_persistedElement_" + this.props.persistKey));

‎src/components/views/messages/TextualBody.tsx

+12-5
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
66
Please see LICENSE files in the repository root for full details.
77
*/
88

9-
import React, { createRef, SyntheticEvent, MouseEvent } from "react";
9+
import React, { createRef, SyntheticEvent, MouseEvent, StrictMode } from "react";
1010
import ReactDOM from "react-dom";
1111
import { MsgType } from "matrix-js-sdk/src/matrix";
1212
import { TooltipProvider } from "@vector-im/compound-web";
@@ -118,7 +118,12 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
118118
// Insert containing div in place of <pre> block
119119
pre.parentNode?.replaceChild(root, pre);
120120

121-
ReactDOM.render(<CodeBlock onHeightChanged={this.props.onHeightChanged}>{pre}</CodeBlock>, root);
121+
ReactDOM.render(
122+
<StrictMode>
123+
<CodeBlock onHeightChanged={this.props.onHeightChanged}>{pre}</CodeBlock>
124+
</StrictMode>,
125+
root,
126+
);
122127
}
123128

124129
public componentDidUpdate(prevProps: Readonly<IBodyProps>): void {
@@ -192,9 +197,11 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
192197
const reason = node.getAttribute("data-mx-spoiler") ?? undefined;
193198
node.removeAttribute("data-mx-spoiler"); // we don't want to recurse
194199
const spoiler = (
195-
<TooltipProvider>
196-
<Spoiler reason={reason} contentHtml={node.outerHTML} />
197-
</TooltipProvider>
200+
<StrictMode>
201+
<TooltipProvider>
202+
<Spoiler reason={reason} contentHtml={node.outerHTML} />
203+
</TooltipProvider>
204+
</StrictMode>
198205
);
199206

200207
ReactDOM.render(spoiler, spoilerContainer);

‎src/utils/pillify.tsx

+16-12
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
66
Please see LICENSE files in the repository root for full details.
77
*/
88

9-
import React from "react";
9+
import React, { StrictMode } from "react";
1010
import ReactDOM from "react-dom";
1111
import { PushProcessor } from "matrix-js-sdk/src/pushprocessor";
1212
import { MatrixClient, MatrixEvent, RuleId } from "matrix-js-sdk/src/matrix";
@@ -76,9 +76,11 @@ export function pillifyLinks(
7676
const pillContainer = document.createElement("span");
7777

7878
const pill = (
79-
<TooltipProvider>
80-
<Pill url={href} inMessage={true} room={room} shouldShowPillAvatar={shouldShowPillAvatar} />
81-
</TooltipProvider>
79+
<StrictMode>
80+
<TooltipProvider>
81+
<Pill url={href} inMessage={true} room={room} shouldShowPillAvatar={shouldShowPillAvatar} />
82+
</TooltipProvider>
83+
</StrictMode>
8284
);
8385

8486
ReactDOM.render(pill, pillContainer);
@@ -133,14 +135,16 @@ export function pillifyLinks(
133135

134136
const pillContainer = document.createElement("span");
135137
const pill = (
136-
<TooltipProvider>
137-
<Pill
138-
type={PillType.AtRoomMention}
139-
inMessage={true}
140-
room={room}
141-
shouldShowPillAvatar={shouldShowPillAvatar}
142-
/>
143-
</TooltipProvider>
138+
<StrictMode>
139+
<TooltipProvider>
140+
<Pill
141+
type={PillType.AtRoomMention}
142+
inMessage={true}
143+
room={room}
144+
shouldShowPillAvatar={shouldShowPillAvatar}
145+
/>
146+
</TooltipProvider>
147+
</StrictMode>
144148
);
145149

146150
ReactDOM.render(pill, pillContainer);

‎src/utils/tooltipify.tsx

+8-6
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
66
Please see LICENSE files in the repository root for full details.
77
*/
88

9-
import React from "react";
9+
import React, { StrictMode } from "react";
1010
import ReactDOM from "react-dom";
1111
import { TooltipProvider } from "@vector-im/compound-web";
1212

@@ -53,11 +53,13 @@ export function tooltipifyLinks(rootNodes: ArrayLike<Element>, ignoredNodes: Ele
5353
// wrapping the link with the LinkWithTooltip component, keeping the same children. Ideally we'd do this
5454
// without the superfluous span but this is not something React trivially supports at this time.
5555
const tooltip = (
56-
<TooltipProvider>
57-
<LinkWithTooltip tooltip={href}>
58-
<span dangerouslySetInnerHTML={{ __html: node.innerHTML }} />
59-
</LinkWithTooltip>
60-
</TooltipProvider>
56+
<StrictMode>
57+
<TooltipProvider>
58+
<LinkWithTooltip tooltip={href}>
59+
<span dangerouslySetInnerHTML={{ __html: node.innerHTML }} />
60+
</LinkWithTooltip>
61+
</TooltipProvider>
62+
</StrictMode>
6163
);
6264

6365
ReactDOM.render(tooltip, node);

‎src/vector/app.tsx

+14-12
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ Please see LICENSE files in the repository root for full details.
1212

1313
// To ensure we load the browser-matrix version first
1414
import "matrix-js-sdk/src/browser-index";
15-
import React, { ReactElement } from "react";
15+
import React, { ReactElement, StrictMode } from "react";
1616
import { logger } from "matrix-js-sdk/src/logger";
1717
import { createClient, AutoDiscovery, ClientConfig } from "matrix-js-sdk/src/matrix";
1818
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
111111

112112
return (
113113
<wrapperOpts.Wrapper>
114-
<MatrixChat
115-
ref={matrixChatRef}
116-
onNewScreen={onNewScreen}
117-
config={config}
118-
realQueryParams={params}
119-
startingFragmentQueryParams={fragParams}
120-
enableGuest={!config.disable_guests}
121-
onTokenLoginCompleted={onTokenLoginCompleted}
122-
initialScreenAfterLogin={initialScreenAfterLogin}
123-
defaultDeviceDisplayName={defaultDeviceName}
124-
/>
114+
<StrictMode>
115+
<MatrixChat
116+
ref={matrixChatRef}
117+
onNewScreen={onNewScreen}
118+
config={config}
119+
realQueryParams={params}
120+
startingFragmentQueryParams={fragParams}
121+
enableGuest={!config.disable_guests}
122+
onTokenLoginCompleted={onTokenLoginCompleted}
123+
initialScreenAfterLogin={initialScreenAfterLogin}
124+
defaultDeviceDisplayName={defaultDeviceName}
125+
/>
126+
</StrictMode>
125127
</wrapperOpts.Wrapper>
126128
);
127129
}

‎src/vector/init.tsx

+7-3
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
99
*/
1010

1111
import * as ReactDOM from "react-dom";
12-
import * as React from "react";
12+
import React, { StrictMode } from "react";
1313
import { logger } from "matrix-js-sdk/src/logger";
1414

1515
import * as languageHandler from "../languageHandler";
@@ -105,7 +105,9 @@ export async function showError(title: string, messages?: string[]): Promise<voi
105105
"../async-components/structures/ErrorView"
106106
);
107107
window.matrixChat = ReactDOM.render(
108-
<ErrorView title={title} messages={messages} />,
108+
<StrictMode>
109+
<ErrorView title={title} messages={messages} />
110+
</StrictMode>,
109111
document.getElementById("matrixchat"),
110112
);
111113
}
@@ -116,7 +118,9 @@ export async function showIncompatibleBrowser(onAccept: () => void): Promise<voi
116118
"../async-components/structures/ErrorView"
117119
);
118120
window.matrixChat = ReactDOM.render(
119-
<UnsupportedBrowserView onAccept={onAccept} />,
121+
<StrictMode>
122+
<UnsupportedBrowserView onAccept={onAccept} />
123+
</StrictMode>,
120124
document.getElementById("matrixchat"),
121125
);
122126
}

0 commit comments

Comments
 (0)