fix: rare useEffect cycle with multiple tabs

Author: cardoso

apps/meteor/client/providers/UserProvider/UserProvider.tsx

@@ -157,16 +157,43 @@ const UserProvider = ({ children }: UserProviderProps): ReactElement => {
 	);
 
 	useEffect(() => {
-		if (!!userId && preferedLanguage !== userLanguage) {
-			setUserPreferences({ data: { language: preferedLanguage } });
-			setUserLanguage(preferedLanguage);
+		if (user?.language === undefined) {
+			return;
 		}
 
-		if (user?.language !== undefined && user.language !== userLanguage) {
+		if (user.language !== userLanguage) {
 			setUserLanguage(user.language);
+		}
+
+		if (user.language !== preferedLanguage && preferedLanguage === userLanguage) {
 			setPreferedLanguage(user.language);
+			return;
+		}
+
+		if (user.language === userLanguage && preferedLanguage !== userLanguage) {
+			setPreferedLanguage(userLanguage);
+		}
+	}, [preferedLanguage, setPreferedLanguage, setUserLanguage, user?.language, userLanguage]);
+
+	useEffect(() => {
+		if (!userId || user?.language === undefined) {
+			return;
 		}
-	}, [preferedLanguage, setPreferedLanguage, setUserLanguage, user?.language, userLanguage, userId, setUserPreferences]);
+
+		if (user.language !== userLanguage) {
+			return;
+		}
+
+		if (preferedLanguage !== userLanguage) {
+			return;
+		}
+
+		if (preferedLanguage === user.language) {
+			return;
+		}
+
+		void setUserPreferences({ data: { language: preferedLanguage } });
+	}, [preferedLanguage, setUserPreferences, user?.language, userId, userLanguage]);
 
 	useEffect(() => {
 		if (!samlCredentialToken && !inviteTokenHash) {

apps/meteor/tests/e2e/user-language-preferences.spec.ts

@@ -0,0 +1,61 @@
+import { Users } from './fixtures/userStates';
+import { expect, test } from './utils/test';
+
+const DEFAULT_LANGUAGE = 'en';
+const DIVERGING_LANGUAGE = 'pt-BR';
+const USERS_SET_PREFERENCES_ENDPOINT = '/api/v1/users.setPreferences';
+
+test.use({ storageState: Users.user1.state });
+
+test.describe('user-language-preferences', () => {
+	test.beforeAll(async ({ api }) => {
+		const response = await api.post('/users.setPreferences', {
+			userId: Users.user1.data._id,
+			data: { language: DEFAULT_LANGUAGE },
+		});
+
+		expect(response.status()).toBe(200);
+	});
+
+	test.afterAll(async ({ api }) => {
+		const response = await api.post('/users.setPreferences', {
+			userId: Users.user1.data._id,
+			data: { language: DEFAULT_LANGUAGE },
+		});
+
+		expect(response.status()).toBe(200);
+	});
+
+	test('avoids redundant language preference updates when cache diverges', async ({ page }) => {
+		await page.addInitScript(([language, serverLanguage]) => {
+			// Emulate a stale tab whose cache disagrees with the server preference.
+			window.localStorage.setItem('fuselage-localStorage-userLanguage', JSON.stringify(language));
+			window.localStorage.setItem('fuselage-localStorage-preferedLanguage', JSON.stringify(serverLanguage));
+		}, [DIVERGING_LANGUAGE, DEFAULT_LANGUAGE]);
+
+		const languageRequests: string[] = [];
+
+		page.on('request', (request) => {
+			if (request.method() !== 'POST' || !request.url().includes(USERS_SET_PREFERENCES_ENDPOINT)) {
+				return;
+			}
+
+			try {
+				const payload = JSON.parse(request.postData() ?? '{}');
+				const language = payload?.data?.language;
+
+				if (language) {
+					languageRequests.push(language);
+				}
+			} catch {
+				// Ignore malformed payloads produced outside this scenario.
+			}
+		});
+
+		await page.goto('/home');
+
+		await page.waitForTimeout(3000);
+
+		expect(languageRequests).toHaveLength(0);
+	});
+});