perf: memoize ThemeContext provider value to decouple theme consumers from dimension changes (#7420)

Author: diegolmello

app/containers/ThemeContextProvider.test.tsx

@@ -0,0 +1,60 @@
+import { act, fireEvent, render } from '@testing-library/react-native';
+import { useContext, useState } from 'react';
+import { TouchableOpacity } from 'react-native';
+
+import ThemeContextProvider from './ThemeContextProvider';
+import { ThemeContext } from '../theme';
+import type { IThemePreference } from '../definitions/ITheme';
+
+const defaultPrefs: IThemePreference = { currentTheme: 'light', darkLevel: 'dark' };
+const setTheme = jest.fn();
+
+function ContextCapture({ onCapture }: { onCapture: (v: object) => void }) {
+	const value = useContext(ThemeContext);
+	onCapture(value);
+	return null;
+}
+
+// Parent holds its own counter state; ThemeContextProvider receives fixed props.
+// This forces ThemeContextProvider to re-render on parent state changes, exercising the
+// useMemo dep-check rather than React's same-props bailout shortcut.
+function ParentWithCounter({ onCapture }: { onCapture: (v: object) => void }) {
+	const [count, setCount] = useState(0);
+	return (
+		<>
+			<ThemeContextProvider theme='light' themePreferences={defaultPrefs} setTheme={setTheme}>
+				<ContextCapture onCapture={onCapture} />
+			</ThemeContextProvider>
+			<TouchableOpacity testID='bump' onPress={() => setCount(c => c + 1)} accessibilityLabel={String(count)} />
+		</>
+	);
+}
+
+test('value reference is stable across re-renders when theme/prefs unchanged', () => {
+	const captured: object[] = [];
+	const { getByTestId } = render(<ParentWithCounter onCapture={v => captured.push(v)} />);
+
+	act(() => fireEvent.press(getByTestId('bump')));
+	act(() => fireEvent.press(getByTestId('bump')));
+
+	expect(captured.length).toBe(3);
+	// All three captures must be the exact same object reference.
+	expect(captured[1]).toBe(captured[0]);
+	expect(captured[2]).toBe(captured[0]);
+});
+
+test('value reference changes when theme prop changes', () => {
+	const captured: object[] = [];
+	const Wrapper = ({ theme }: { theme: 'light' | 'dark' }) => (
+		<ThemeContextProvider theme={theme} themePreferences={defaultPrefs} setTheme={setTheme}>
+			<ContextCapture onCapture={v => captured.push(v)} />
+		</ThemeContextProvider>
+	);
+
+	const { rerender } = render(<Wrapper theme='light' />);
+	rerender(<Wrapper theme='dark' />);
+
+	expect(captured.length).toBe(2);
+	expect(captured[1]).not.toBe(captured[0]);
+	expect(captured[1]).toHaveProperty('theme', 'dark');
+});

app/containers/ThemeContextProvider.tsx

@@ -0,0 +1,26 @@
+import { useMemo, type ReactNode } from 'react';
+
+import { type IThemePreference } from '../definitions/ITheme';
+import { colors } from '../lib/constants/colors';
+import { type IThemeContextProps, type TSupportedThemes, ThemeContext } from '../theme';
+
+// Memoized value so unrelated App re-renders don't change context identity and re-render theme consumers.
+const ThemeContextProvider = ({
+	theme,
+	themePreferences,
+	setTheme,
+	children
+}: {
+	theme: TSupportedThemes;
+	themePreferences: IThemePreference;
+	setTheme: IThemeContextProps['setTheme'];
+	children: ReactNode;
+}) => {
+	const value = useMemo<IThemeContextProps>(
+		() => ({ theme, themePreferences, setTheme, colors: colors[theme] }),
+		[theme, themePreferences, setTheme]
+	);
+	return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+};
+
+export default ThemeContextProvider;

app/index.tsx

@@ -13,10 +13,12 @@ import { deepLinkingOpen } from './actions/deepLinking';
 import { ActionSheetProvider } from './containers/ActionSheet';
 import InAppNotification from './containers/InAppNotification';
 import Loading from './containers/Loading';
+import StatusBar from './containers/StatusBar';
+import ThemeContextProvider from './containers/ThemeContextProvider';
 import Toast from './containers/Toast';
 import TwoFactor from './containers/TwoFactor';
 import { type IThemePreference } from './definitions/ITheme';
-import { colors, themes } from './lib/constants/colors';
+import { themes } from './lib/constants/colors';
 import { getAllowAnalyticsEvents, getAllowCrashReport } from './lib/methods/crashReport';
 import { toggleAnalyticsEventsReport, toggleCrashErrorsReport } from './lib/methods/helpers/log';
 import parseQuery from './lib/methods/helpers/parseQuery';
@@ -37,10 +39,9 @@ import {
 } from './lib/services/voip/MediaCallEvents';
 import store from './lib/store';
 import { initStore } from './lib/store/auxStore';
-import { type TSupportedThemes, ThemeContext } from './theme';
+import { type TSupportedThemes } from './theme';
 import ChangePasscodeView from './views/ChangePasscodeView';
 import ScreenLockedView from './views/ScreenLockedView';
-import StatusBar from './containers/StatusBar';
 
 enableScreens();
 initStore(store);
@@ -183,13 +184,7 @@ export default class Root extends Component<{}, IState> {
 		return (
 			<SafeAreaProvider style={{ backgroundColor: themes[this.state.theme].surfaceRoom }}>
 				<Provider store={store}>
-					<ThemeContext.Provider
-						value={{
-							theme,
-							themePreferences,
-							setTheme: this.setTheme,
-							colors: colors[theme]
-						}}>
+					<ThemeContextProvider theme={theme} themePreferences={themePreferences} setTheme={this.setTheme}>
 						<ResponsiveLayoutProvider>
 							<GestureHandlerRootView>
 								<KeyboardProvider>
@@ -206,7 +201,7 @@ export default class Root extends Component<{}, IState> {
 								</KeyboardProvider>
 							</GestureHandlerRootView>
 						</ResponsiveLayoutProvider>
-					</ThemeContext.Provider>
+					</ThemeContextProvider>
 				</Provider>
 			</SafeAreaProvider>
 		);