[No QA] perf: React Compiler Batch 3: setState-in-effect warnings #83382

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

roryabraham merged 80 commits into main from rory-react-compiler-set-state-in-effect

Mar 6, 2026

package.json

-Original file line number
+Diff line change
@@ Expand Up / @@ -45,7 +45,7 @@ @@
         "perf-test": "NODE_OPTIONS=--experimental-vm-modules npx reassure",
         "typecheck": "NODE_OPTIONS=--max_old_space_size=8192 tsc",
         "typecheck-tsgo": "tsgo --project tsconfig.tsgo.json",
-        "lint": "NODE_OPTIONS=--max_old_space_size=8192 eslint . --max-warnings=381 --cache --cache-location=node_modules/.cache/eslint --cache-strategy content --concurrency=auto",
+        "lint": "NODE_OPTIONS=--max_old_space_size=8192 eslint . --max-warnings=335 --cache --cache-location=node_modules/.cache/eslint --cache-strategy content --concurrency=auto",
         "lint-changed": "NODE_OPTIONS=--max_old_space_size=8192 ./scripts/lintChanged.sh",
         "check-lazy-loading": "ts-node scripts/checkLazyLoading.ts",
         "lint-watch": "npx eslint-watch --watch --changed",
@@ Expand Down @@

src/components/AnimatedCollapsible/index.tsx

-Original file line number
+Diff line change
@@ -1,4 +1,4 @@
-    import React, {useEffect} from 'react';
+    import React, {useState} from 'react';
     import type {ReactNode} from 'react';
     import {View} from 'react-native';
     import type {StyleProp, ViewStyle} from 'react-native';
@@ Expand Down Expand Up / @@ -76,13 +76,14 @@ function AnimatedCollapsible({ @@
         const contentHeight = useSharedValue(0);
         const descriptionHeight = useSharedValue(0);
         const hasExpanded = useSharedValue(isExpanded);
-        const [isRendered, setIsRendered] = React.useState(isExpanded);
-        useEffect(() => {
-            hasExpanded.set(isExpanded);
-            if (isExpanded) {
-                setIsRendered(true);
-            }
-        }, [isExpanded, hasExpanded]);
+        const [isRendered, setIsRendered] = useState(isExpanded);
+        // Keep Reanimated shared value in sync with prop (idempotent when unchanged)
+        hasExpanded.set(isExpanded);
+        // Mount content for collapse animation once expanded; unmount after animation via scheduleOnRN
+        if (isExpanded && !isRendered) {
+            setIsRendered(true);
+        }
         const animatedHeight = useDerivedValue(() => {
             if (!contentHeight.get()) {
@@ Expand Down @@

src/components/AutoUpdateTime.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -2,7 +2,7 @@ @@
      * Displays the user's local time and updates it every minute.
      * The time auto-update logic is extracted to this component to avoid re-rendering a more complex component, e.g. DetailsPage.
      */
-    import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+    import React, {useEffect, useRef, useState} from 'react';
     import {View} from 'react-native';
     import useLocalize from '@hooks/useLocalize';
     import useThemeStyles from '@hooks/useThemeStyles';
@@ Expand All / @@ -18,33 +18,22 @@ type AutoUpdateTimeProps = { @@
     function AutoUpdateTime({timezone}: AutoUpdateTimeProps) {
         const {translate, getLocalDateFromDatetime} = useLocalize();
         const styles = useThemeStyles();
-        /** @returns Returns the locale Date object */
-        const getCurrentUserLocalTime = useCallback(() => getLocalDateFromDatetime(undefined, timezone.selected), [getLocalDateFromDatetime, timezone.selected]);
-        const [currentUserLocalTime, setCurrentUserLocalTime] = useState(getCurrentUserLocalTime);
+        const [, setTick] = useState(0);
         const minuteRef = useRef(new Date().getMinutes());
-        const timezoneName = useMemo(() => {
-            if (timezone.selected) {
-                return DateUtils.getZoneAbbreviation(currentUserLocalTime, timezone.selected);
-            }
-            return '';
-        }, [currentUserLocalTime, timezone.selected]);
+        const currentUserLocalTime = getLocalDateFromDatetime(undefined, timezone.selected);
+        const timezoneName = timezone.selected ? DateUtils.getZoneAbbreviation(currentUserLocalTime, timezone.selected) : '';
         useEffect(() => {
-            // If any of the props that getCurrentUserLocalTime depends on change, we want to update the displayed time immediately
-            setCurrentUserLocalTime(getCurrentUserLocalTime());
-            // Also, if the user leaves this page open, we want to make sure the displayed time is updated every minute when the clock changes
-            // To do this we create an interval to check if the minute has changed every second and update the displayed time if it has
             const interval = setInterval(() => {
-                const currentMinute = new Date().getMinutes();
-                if (currentMinute !== minuteRef.current) {
-                    setCurrentUserLocalTime(getCurrentUserLocalTime());
-                    minuteRef.current = currentMinute;
+                if (new Date().getMinutes() === minuteRef.current) {
+                    return;
                 }
+                setTick((t) => t + 1);
+                minuteRef.current = new Date().getMinutes();
             }, 1000);
             return () => clearInterval(interval);
-        }, [getCurrentUserLocalTime]);
+        }, []);
         return (
             <View style={[styles.w100, styles.detailsPageSectionContainer]}>
@@ Expand Down @@

src/components/Avatar.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,4 +1,4 @@
  
    import React, {useEffect, useState} from 'react';

    import React, {useState} from 'react';

    import type {ImageStyle, StyleProp, ViewStyle} from 'react-native';

    import {View} from 'react-native';

    import useDefaultAvatars from '@hooks/useDefaultAvatars';

    @@ -77,13 +77,10 @@ function Avatar({
  
        const theme = useTheme();

        const styles = useThemeStyles();

        const StyleUtils = useStyleUtils();

        const [imageError, setImageError] = useState(false);

        const [errorSource, setErrorSource] = useState<string | undefined>(undefined);

        const imageError = errorSource !== undefined && errorSource === originalSource;

        useNetwork({onReconnect: () => setImageError(false)});

        useEffect(() => {

            setImageError(false);

        }, [originalSource]);

        useNetwork({onReconnect: () => setErrorSource(undefined)});

        const isWorkspace = type === CONST.ICON_TYPE_WORKSPACE;

        const userAccountID = isWorkspace ? undefined : (avatarID as number);

    @@ -124,7 +121,7 @@ function Avatar({
  
                        <Image

                            source={{uri: avatarSource}}

                            style={imageStyle}

                            onError={() => setImageError(true)}

                            onError={() => setErrorSource(typeof originalSource === 'string' ? originalSource : undefined)}

                            cachePolicy="memory-disk"

                        />

                    </View>

src/components/ImageView/index.native.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -6,6 +6,7 @@ import type ImageViewProps from './types'; @@
     function ImageView({attachmentID, isAuthTokenRequired = false, url, style, zoomRange = DEFAULT_ZOOM_RANGE, onError}: ImageViewProps) {
         return (
             <Lightbox
+                key={url}
                 attachmentID={attachmentID}
                 uri={url}
                 zoomRange={zoomRange}
@@ Expand Down @@

src/components/ImageView/index.tsx

-Original file line number
+Diff line change
@@ Expand Up @@
         if (canUseTouchScreen) {
             return (
                 <Lightbox
+                    key={url}
                     uri={url}
                     isAuthTokenRequired={isAuthTokenRequired}
                     onError={onError}
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[No QA] perf: React Compiler Batch 3: setState-in-effect warnings #83382

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!

Uh oh!

Uh oh!