Warning: Cannot update a component (Button) while rendering a different component (Button).

[benschac]

Current Behavior

Warning: Cannot update a component (`Button`) while rendering a different component (`Button`). To locate the bad setState() call inside `Button`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render

In ios simulator using takeout.

Can confirm it's tamagui because i haven't updated my project to takeouts latest changes.

Same warning also shows in latest version of takeout as well.

Expected Behavior

No warning.

Tamagui Version

1.76.0

Platform (Web, iOS, Android)

ios, native, have not tried android yet

Reproduction

run the project

System Info

System:
    OS: macOS 14.0
    CPU: (12) arm64 Apple M2 Max
    Memory: 79.66 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.0 - ~/.asdf/installs/nodejs/18.16.0/bin/node
    Yarn: 3.6.3 - /opt/homebrew/bin/yarn
    npm: 9.5.1 - ~/.asdf/plugins/nodejs/shims/npm
    pnpm: 8.9.2 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 118.0.5993.117
    Safari: 17.0
  npmPackages:
    @babel/runtime: ^7.18.9 => 7.22.15 
    @manypkg/cli: ^0.19.1 => 0.19.2 
    @nderscore/tamagui-typescript-plugin: ^0.5.1 => 0.5.4 
    @tamagui/cli: ^1.76.0 => 1.76.0 
    @turbo/gen: ^1.10.12 => 1.10.14 
    change-case: ^4.1.2 => 4.1.2 
    check-dependency-version-consistency: ^3.0.3 => 3.3.0 
    dotenv: ^16.3.1 => 16.3.1 
    dotenv-cli: ^6.0.0 => 6.0.0 
    eslint: ^8.46.0 => 8.49.0 
    node-gyp: ^9.3.1 => 9.4.0 
    prettier: ^2.7.1 => 2.8.8 
    ts-pattern: ^5.0.5 => 5.0.5 
    turbo: latest => 1.10.14 
    typescript: ^5.1.3 => 5.2.2 
    zx: ^7.2.3 => 7.2.3

[henry-infevo]

I also encounter this issue:

Warning: Cannot update a component (`ListItemTitle`) while rendering a different component (`ListItem`). To locate the bad setState() call inside `ListItem`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
    in ListItem
    in Unknown (created by Themed(Anonymous))
    in Unknown (created by Themed(Anonymous))
    in Themed(Anonymous) (created by SettingsScreen)
    in GroupItem (created by SettingsScreen)
    in RCTView (created by GroupFrame)
    in GroupFrame
    in GroupProvider
    in Unknown (created by SettingsScreen)
    in RCTScrollContentView (created by ScrollView)
    in RCTScrollView (created by ScrollView)
    in ScrollView (created by ScrollView)
    in ScrollView (created by ScrollView)
    in ScrollView (created by SettingsScreen)
    in SettingsScreen (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by SceneView)
    in RCTView (created by View)
    in View (created by DebugContainer)
    in DebugContainer (created by MaybeNestedStack)
    in MaybeNestedStack (created by SceneView)
    in RCTView (created by View)
    in View (created by SceneView)
    in RNSScreen
    in Unknown (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by SceneView)
    in SceneView (created by NativeStackViewInner)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by ScreenStack)
    in RNSScreenStack (created by ScreenStack)
    in ScreenStack (created by NativeStackViewInner)
    in NativeStackViewInner (created by NativeStackView)
    in RCTView (created by View)
    in View (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator (created by SettingTab)
    in SettingTab (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by BottomTabView)
    in RCTView (created by View)
    in View (created by Screen)
    in RCTView (created by View)
    in View (created by Background)
    in Background (created by Screen)
    in Screen (created by BottomTabView)
    in RNSScreen
    in Unknown (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by MaybeScreen)
    in MaybeScreen (created by BottomTabView)
    in RNSScreenNavigationContainer (created by ScreenContainer)
    in ScreenContainer (created by MaybeScreenContainer)
    in MaybeScreenContainer (created by BottomTabView)
    in RCTView (created by View)
    in View (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by BottomTabView)
    in BottomTabView (created by BottomTabNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by BottomTabNavigator)
    in BottomTabNavigator (created by BottomTabNavigator)
    in BottomTabNavigator (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by SceneView)
    in RCTView (created by View)
    in View (created by DebugContainer)
    in DebugContainer (created by MaybeNestedStack)
    in MaybeNestedStack (created by SceneView)
    in RCTView (created by View)
    in View (created by SceneView)
    in RNSScreen
    in Unknown (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by SceneView)
    in SceneView (created by NativeStackViewInner)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by ScreenStack)
    in RNSScreenStack (created by ScreenStack)
    in ScreenStack (created by NativeStackViewInner)
    in NativeStackViewInner (created by NativeStackView)
    in RCTView (created by View)
    in View (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator (created by RootNavigator)
    in RootNavigator (created by Navigation)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by Navigation)
    in Navigation (created by App)
    in Provider (created by App)
    in _QueryClientProvider (created by App)
    in ColorScheme (created by App)
    in ThemeProvider (created by App)
    in PortalProviderComponent (created by App)
    in Unknown (created by _ThemeProvider)
    in _ThemeProvider (created by _TamaguiProvider)
    in Provider (created by _TamaguiProvider)
    in _TamaguiProvider (created by App)
    in Unknown (created by App)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by App)
    in RCTView (created by View)
    in View (created by GestureHandlerRootView)
    in GestureHandlerRootView (created by App)
    in App (created by withDevTools(App))
    in withDevTools(App)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)
    ```

[natew]

Yes, when I fixed the regression causing super slow theme changes these came back (the back and forth of fixing bugs :/).

For some reason web is super fast and doesn't mind queueMicrotask but native does. I think there's some flag in Hermes you have to enable to make microtasks work like they should or something.

Anyway the error isn't harmful just annoying. I will fix it soon.

[osmanyz]

I'm having this issue as well. I've been trying to figure out it but couldn't find anything helpful yet.

The first thing that I noticed is that; my button element was like that

<Button icon={} themeInverse>
Sign in
</Button>

After I removed themeInverse it (which is annoying), it started working ok.

I am not sure why that argument for Button component was making a trouble.

I hope this will be fixed soon.

[5o50]

I'm having the same issue on react-native when switching the theme with <Theme name={theme}>...</Theme>

Sometimes it's crashing my app, I'm having 6 warnings of the same message with different components clashing, here for Circle:

 ERROR  Warning: Cannot update a component (`Circle`) while rendering a different component (`Button`). To locate the bad setState() call inside `Button`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
    in Button
    in Unknown (created by Themed(Anonymous))
    in Unknown (created by Themed(Anonymous))
    in Themed(Anonymous)
    in _c (created by Me)
    in RCTView
    in Unknown (created by Me)
    in RCTView (created by BgView)
    in BgView (created by TopBgView)
    in TopBgView (created by Me)
    in Me
    in Unknown (created by Route(index))
    in Route (created by Route(index))
    in Route(index) (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by SceneView)
    in RCTView (created by View)
    in View (created by DebugContainer)
    in DebugContainer (created by MaybeNestedStack)
    in MaybeNestedStack (created by SceneView)
    in RCTView (created by View)
    in View (created by SceneView)
    in RNSScreen
    in Unknown (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by SceneView)
    in SceneView (created by NativeStackViewInner)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by ScreenStack)
    in RNSScreenStack (created by ScreenStack)
    in ScreenStack (created by NativeStackViewInner)
    in NativeStackViewInner (created by NativeStackView)
    in RCTView (created by View)
    in View (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator
    in Unknown (created by Layout)
    in Layout
    in Unknown (created by Route(me))
    in Route (created by Route(me))
    in Route(me) (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by BottomTabView)
    in RCTView (created by View)
    in View (created by Screen)
    in RCTView (created by View)
    in View (created by Background)
    in Background (created by Screen)
    in Screen (created by BottomTabView)
    in RNSScreen
    in Unknown (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by MaybeScreen)
    in MaybeScreen (created by BottomTabView)
    in RNSScreenNavigationContainer (created by ScreenContainer)
    in ScreenContainer (created by MaybeScreenContainer)
    in MaybeScreenContainer (created by BottomTabView)
    in RCTView (created by View)
    in View (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by BottomTabView)
    in BottomTabView (created by BottomTabNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by BottomTabNavigator)
    in BottomTabNavigator
    in Unknown (created by Layout)
    in Layout
    in Unknown (created by Route((tabs)))
    in Route (created by Route((tabs)))
    in Route((tabs)) (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by SceneView)
    in RCTView (created by View)
    in View (created by DebugContainer)
    in DebugContainer (created by MaybeNestedStack)
    in MaybeNestedStack (created by SceneView)
    in RCTView (created by View)
    in View (created by SceneView)
    in RNSScreen
    in Unknown (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by SceneView)
    in SceneView (created by NativeStackViewInner)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by ScreenStack)
    in RNSScreenStack (created by ScreenStack)
    in ScreenStack (created by NativeStackViewInner)
    in NativeStackViewInner (created by NativeStackView)
    in RCTView (created by View)
    in View (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator
    in Unknown (created by Layout)
    in Layout
    in Unknown (created by Route((auth)))
    in Route (created by Route((auth)))
    in Route((auth)) (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by QualifiedSlot)
    in QualifiedSlot (created by Slot)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by QualifiedNavigator)
    in QualifiedNavigator (created by Navigator)
    in Navigator (created by Slot)
    in Slot (created by Layout)
    in Suspense (created by Layout)
    in RCTView (created by View)
    in View (created by GestureHandlerRootView)
    in GestureHandlerRootView (created by Layout)
    in _ToastImperativeProvider (created by ToastProvider)
    in Provider (created by ToastProvider)
    in Provider (created by CollectionProvider)
    in CollectionProvider (created by ToastProvider)
    in ToastProvider (created by Layout)
    in Unknown (created by Layout)
    in PortalProviderComponent (created by _TamaguiProvider)
    in Unknown (created by _ThemeProvider)
    in _ThemeProvider (created by _TamaguiProvider)
    in Provider (created by _TamaguiProvider)
    in _TamaguiProvider (created by _TamaguiProvider)
    in _TamaguiProvider (created by Layout)
    in ClientProvider (created by Layout)
    in FiberProvider (created by Layout)
    in Layout
    in Unknown (created by Route())
    in Route (created by Route())
    in Route() (created by ContextNavigator)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by wrapper)
    in RCTView (created by View)
    in View (created by GestureHandlerRootView)
    in GestureHandlerRootView (created by GestureHandlerRootView)
    in GestureHandlerRootView (created by wrapper)
    in wrapper (created by ContextNavigator)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by ContextNavigator)
    in ContextNavigator (created by ExpoRoot)
    in ExpoRoot (created by App)
    in App (created by withDevTools(App))
    in withDevTools(App) (created by ErrorOverlay)
    in ErrorToastContainer (created by ErrorOverlay)
    in ErrorOverlay
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)

[osmanbaskaya]

Hi there,

Just more context: It is happening on 1.74.10 as well. When I remove the <Theme> wrapper, it doesn't show these warnings. @natew, which version were you referring to that this issue started from; I just wanted to let you know.

[longnguyen2508]

I have the same problem as @osmanyz with the latest version (^1.78.0)

Both the themeInverse and the theme properties of the Button component cause the same error

theme={selectedTab === 'skill' ? 'active' : undefined}

[LucasBourgeois]

Also having this warning :
It's occuring on a theme debug view.
I'm defining at a top level of my app a theme : either the system color scheme, or a stored value, or an overriding value.

In this view, Im applying the theme dark or light to a ScrollView and the warning is :
Cannot update a component (H6) while rendering a different component (ScrollView). To locate the bad setState() call inside ScrollView, follow the stack trace as described in https://reactjs.org/link/setstate-in-render

It only occurs when change the defined theme like so :

<ScrollView theme={activeAppTheme} backgroundColor={'$background'} padding={10}>
		<H6 fontWeight={'bold'}>Active base theme : {activeAppTheme ?? 'system'}</H6>
                [...]
</ScrollView

Any news ?

[BenjaminSnoha]

I'm getting a similar warning with the Tabs component. Cannot update a component (H2) while rendering a different component (TabsTrigger). To locate the bad setState() call inside TabsTrigger, ...

[natew]

I will get to this soon, but just know nothing is breaking. There's a patch to get rid of it but it slows down your app theme changes a lot, I'd rather fix it right but it's one of the most complex areas in Tamagui so needs a whole day or two of heavy concentration.

[Brunowilliang]

Hi guys, I'm facing the same problem when changing the theme. 🫤

 ERROR  Warning: Cannot update a component (`ButtonText`) while rendering a different component (`Button`). To locate the bad setState() call inside `Button`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
    in Button (created by Page)
    in RCTView (created by View)
    in View (created by AnimatedComponent(View))
    in AnimatedComponent(View)
    in Unknown
    in Unknown (created by Page)
    in Page (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by SceneView)
    in RCTView (created by View)
    in View (created by DebugContainer)
    in DebugContainer (created by MaybeNestedStack)
    in MaybeNestedStack (created by SceneView)
    in RCTView (created by View)
    in View (created by SceneView)
    in RNSScreen
    in Unknown (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by SceneView)
    in SceneView (created by NativeStackViewInner)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by ScreenStack)
    in RNSScreenStack (created by ScreenStack)
    in ScreenStack (created by NativeStackViewInner)
    in NativeStackViewInner (created by NativeStackView)
    in RCTView (created by View)
    in View (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator (created by AppRoutes)
    in AppRoutes (created by Routes)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by Routes)
    in Unknown (created by Routes)
    in Routes (created by App)
    in _QueryClientProvider (created by PreloadWrapper)
    in PortalProviderComponent (created by BottomSheetModalProviderWrapper)
    in BottomSheetModalProviderWrapper (created by PreloadWrapper)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by PreloadWrapper)
    in PreloadWrapper (created by App)
    in PortalProviderComponent (created by _TamaguiProvider)
    in Unknown (created by _ThemeProvider)
    in _ThemeProvider (created by _TamaguiProvider)
    in Provider (created by _TamaguiProvider)
    in _TamaguiProvider (created by _TamaguiProvider)
    in _TamaguiProvider (created by ThemeWrapper)
    in ThemeWrapper (created by App)
    in RCTView (created by View)
    in View (created by GestureHandlerRootView)
    in GestureHandlerRootView (created by App)
    in App (created by withDevTools(App))
    in withDevTools(App)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)
    ```

[ammarfaris]

Encountering the same error/warning with a fresh install of tamagui with npm create tamagui@latest when switching dark-light mode in react native:

ERROR  Warning: Cannot update a component (`Anchor`) while rendering a different component (`ForwardRef`). To locate the bad setState() call inside `ForwardRef`

 ERROR  Warning: Cannot update a component (`Button`) while rendering a different component (`Button`). To locate the bad setState() call inside `Button`

ERROR  Warning: Cannot update a component (`SheetHandle`) while rendering a different component (`Sheet`). To locate the bad setState() call inside `Sheet`

ERROR  Warning: Cannot update a component (`ToastTitle`) while rendering a different component (`ToastImpl`). To locate the bad setState() call inside `ToastImpl`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render

[mohamadchehab]

@natew Has this issue been fixed yet? I am getting it as well on web when using Select.

[extralsc]

Im having the same issue above when using Select component in ios and web.

Warning: Cannot update a component (`ForwardRef`) while rendering a different component (`Select`). To locate the bad setState() call inside `Select`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
    at exports.Select.Adapt (http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=web&dev=true&hot=false&lazy=true&resolver.environment=client&transform.environment=client:162343:33)
    at div
    at http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=web&dev=true&hot=false&lazy=true&resolver.environment=client&transform.environment=client:139466:82
    at div
    at http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=web&dev=true&hot=false&lazy=true&resolver.environment=client&transform.environment=client:139466:82
    at Dashboard (http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=web&dev=true&hot=false&lazy=true&resolver.environment=client&transform.environment=client:354648:44)
    at div
    at http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=web&dev=true&hot=false&lazy=true&resolver.environment=client&transform.environment=client:139466:82
    at View
    at AppLayout (http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=web&dev=true&hot=false&lazy=true&resolver.environment=client&transform.environment=client:353828:42)
    at Route (http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=web&dev=true&hot=false&lazy=true&resolver.environment=client&transform.environment=client:87992:25)
    at http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=web&dev=true&hot=false&lazy=true&resolver.environment=client&transform.environment=client:88298:25
    at StaticContainer (http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=web&dev=true&hot=false&lazy=true&resolver.environment=client&transform.environment=client:84018:18)
    at EnsureSingleNavigator (http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=web&dev=true&hot=false&lazy=true&resolver.environment=client&transform.environment=client:80516:25)
    at SceneView (http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=web&dev=true&hot=false&lazy=true&resolver.environment=client&transform.environment=client:83927:23)
    at div
    at http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=web&dev=true&hot=false&lazy=true&resolver.environment=client&transform.environment=client:45916:27
    at div
    at http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=web&dev=true&hot=false&lazy=true&resolver.environment=client&transform.environment=client:45916:27
    at Background (http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=web&dev=true&hot=false&lazy=true&resolver.environment=client&transform.environment=client:86307:22)
    at Screen (http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=web&dev=true&hot=false&lazy=true&resolver.environment=client&transform.environment=client:87796:71)
    at div
    at http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=web&dev=true&hot=false&lazy=true&resolver.environment=client&transform.environment=client:45916:27
    at NativeScreen (http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=web&dev=true&hot=false&lazy=true&resolver.environment=client&transform.environment=client:91500:36)
    at http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=web&dev=true&hot=false&lazy=true&resolver.environment=client&transform.environment=client:52318:62
    at MaybeScreen (http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=web&dev=true&hot=false&lazy=true&resolver.environment=client&transform.environment=client:352337:25)
    at div
    at http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=web&dev=true&hot=false&lazy=true&resolver.environment=client&transform.environment=client:45916:27
    at MaybeScreenContainer (http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=web&dev=true&hot=false&lazy=true&resolver.environment=client&transform.environment=client:352326:24)
    at div
    at http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=web&dev=true&hot=false&lazy=true&resolver.environment=client&transform.environment=client:45916:27
    at div
    at http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=web&dev=true&hot=false&lazy=true&resolver.environment=client&transform.environment=client:45916:27
    at AnimatedComponent (http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=web&dev=true&hot=false&lazy=true&resolver.environment=client&transform.environment=client:129258:38)
    at div
    at 

[johnbindel]

I am also having this issue, starting with 1.75.7.

1.75.1 seems to work, so for now I will stop my upgrading at that version.

[dukemai]

I am having the same issue with the latest 1.89.8

[Victor-FT]

Same issue with LTS 1.89.8

Warning: Cannot update a component (`Theme`) while rendering a different component (`GroupFrame`). To locate the bad setState() call inside `GroupFrame`, follow the stack trace as described in https://react.dev/link/setstate-in-render
    in GroupFrame
    in GroupProvider
    in Unknown (created by Slot)
    in Slot (created by Stack)
    in Stack (created by RovingFocusGroup)
    in RovingFocusGroup (created by TabsList)
    in TabsList (at chats/index.tsx:68)
    in RCTView (created by YStack)
    in YStack (at chats/index.tsx:67)
    in RCTView (created by Tabs)
    in Tabs
    in Provider
    in Unknown (created by Tabs)
    in Theme (created by Tabs)
    in Themed(Anonymous) (at chats/index.tsx:58)
    in RCTView (created by YStack)
    in YStack (at chats/index.tsx:39)
    in RCTView (created by YStack)
    in YStack (at chats/index.tsx:24)
    in ChatsScreen (at useScreens.js:112)
    in Unknown (at useScreens.js:116)
    in Suspense (at useScreens.js:115)
    in Route (at useScreens.js:131)
    in Route(index) (at SceneView.tsx:132)
    in StaticContainer
    in EnsureSingleNavigator (at SceneView.tsx:124)
    in SceneView (at useDescriptors.tsx:218)
    in RCTView (at View.js:116)
    in View (at DebugContainer.native.tsx:34)
    in DebugContainer (at NativeStackView.native.tsx:82)
    in MaybeNestedStack (at NativeStackView.native.tsx:325)
    in RCTView (at View.js:116)
    in View (at NativeStackView.native.tsx:318)
    in RNSScreen (at createAnimatedComponent.js:54)
    in Unknown (at src/index.native.tsx:314)
    in Suspender (at src/index.tsx:40)
    in Suspense (at src/index.tsx:39)
    in Freeze (at src/index.native.tsx:206)
    in DelayedFreeze (at src/index.native.tsx:313)
    in InnerScreen (at src/index.native.tsx:566)
    in Screen (at NativeStackView.native.tsx:253)
    in SceneView (at NativeStackView.native.tsx:413)
    in Suspender (at src/index.tsx:40)
    in Suspense (at src/index.tsx:39)
    in Freeze (at src/index.native.tsx:206)
    in DelayedFreeze (at src/index.native.tsx:220)
    in RNSScreenStack (at src/index.native.tsx:227)
    in ScreenStack (at NativeStackView.native.tsx:401)
    in NativeStackViewInner (at NativeStackView.native.tsx:474)
    in RCTView (at View.js:116)
    in View (at SafeAreaProviderCompat.tsx:42)
    in SafeAreaProviderCompat (at NativeStackView.native.tsx:473)
    in NativeStackView (at createNativeStackNavigator.tsx:72)
    in PreventRemoveProvider (at useNavigationBuilder.tsx:718)
    in NavigationContent (at useComponent.tsx:35)
    in Unknown (at createNativeStackNavigator.tsx:71)
    in NativeStackNavigator (at withLayoutContext.js:65)
    in Unknown (at _layout.tsx:6)
    in Layout (at useScreens.js:112)
    in Unknown (at useScreens.js:116)
    in Suspense (at useScreens.js:115)
    in Route (at useScreens.js:131)
    in Route(chats) (at SceneView.tsx:132)
    in StaticContainer
    in EnsureSingleNavigator (at SceneView.tsx:124)
    in SceneView (at useDescriptors.tsx:218)
    in RCTView (at View.js:116)
    in View (at Screen.tsx:63)
    in RCTView (at View.js:116)
    in View (at Background.tsx:13)
    in Background (at Screen.tsx:58)
    in Screen (at BottomTabView.tsx:135)
    in RNSScreen (at createAnimatedComponent.js:54)
    in Unknown (at src/index.native.tsx:314)
    in Suspender (at src/index.tsx:40)
    in Suspense (at src/index.tsx:39)
    in Freeze (at src/index.native.tsx:206)
    in DelayedFreeze (at src/index.native.tsx:313)
    in InnerScreen (at src/index.native.tsx:566)
    in Screen (at ScreenFallback.tsx:39)
    in MaybeScreen (at BottomTabView.tsx:127)
    in RNSScreenContainer (at src/index.native.tsx:398)
    in ScreenContainer (at ScreenFallback.tsx:30)
    in MaybeScreenContainer (at BottomTabView.tsx:93)
    in RCTView (at View.js:116)
    in View (at SafeAreaProviderCompat.tsx:42)
    in SafeAreaProviderCompat (at BottomTabView.tsx:92)
    in BottomTabView (at createBottomTabNavigator.tsx:118)
    in PreventRemoveProvider (at useNavigationBuilder.tsx:718)
    in NavigationContent (at useComponent.tsx:35)
    in Unknown (at createBottomTabNavigator.tsx:117)
    in BottomTabNavigator (at withLayoutContext.js:65)
    in Unknown (at _layout.tsx:12)
    in TabLayout (at useScreens.js:112)
    in Unknown (at useScreens.js:116)
    in Suspense (at useScreens.js:115)
    in Route (at useScreens.js:131)
    in Route((tabs)) (at SceneView.tsx:132)
    in StaticContainer
    in EnsureSingleNavigator (at SceneView.tsx:124)
    in SceneView (at useDescriptors.tsx:218)
    in RCTView (at View.js:116)
    in View (at DebugContainer.native.tsx:34)
    in DebugContainer (at NativeStackView.native.tsx:82)
    in MaybeNestedStack (at NativeStackView.native.tsx:325)
    in RCTView (at View.js:116)
    in View (at NativeStackView.native.tsx:318)
    in RNSScreen (at createAnimatedComponent.js:54)
    in Unknown (at src/index.native.tsx:314)
    in Suspender (at src/index.tsx:40)
    in Suspense (at src/index.tsx:39)
    in Freeze (at src/index.native.tsx:206)
    in DelayedFreeze (at src/index.native.tsx:313)
    in InnerScreen (at src/index.native.tsx:566)
    in Screen (at NativeStackView.native.tsx:253)
    in SceneView (at NativeStackView.native.tsx:413)
    in Suspender (at src/index.tsx:40)
    in Suspense (at src/index.tsx:39)
    in Freeze (at src/index.native.tsx:206)
    in DelayedFreeze (at src/index.native.tsx:220)
    in RNSScreenStack (at src/index.native.tsx:227)
    in ScreenStack (at NativeStackView.native.tsx:401)
    in NativeStackViewInner (at NativeStackView.native.tsx:474)
    in RCTView (at View.js:116)
    in View (at SafeAreaProviderCompat.tsx:42)
    in SafeAreaProviderCompat (at NativeStackView.native.tsx:473)
    in NativeStackView (at createNativeStackNavigator.tsx:72)
    in PreventRemoveProvider (at useNavigationBuilder.tsx:718)
    in NavigationContent (at useComponent.tsx:35)
    in Unknown (at createNativeStackNavigator.tsx:71)
    in NativeStackNavigator (at withLayoutContext.js:65)
    in Unknown (at _layout.tsx:107)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:92)
    in SafeAreaProvider (at _layout.tsx:106)
    in Theme (at _layout.tsx:105)

[AbdelhakimMhioul]

I'm getting a similar issue with the Checkbox component:

ERROR Warning: Cannot update a component (ForwardRef) while rendering a different component (Theme). To locate the bad setState() call inside Theme, follow the sta
ck trace as described in https://react.dev/link/setstate-in-render
in Theme (created by Themed(Anonymous))
in Themed(Anonymous) (at checkbox-with-label.tsx:9)
in RCTView (created by Checkbox)
in Provider (created by Checkbox)
in Checkbox
in Provider
in Unknown (created by Themed(Anonymous))
in Theme (created by Themed(Anonymous))
in Themed(Anonymous) (at checkbox-with-label.tsx:8)
in RCTView (created by XStack)
in XStack (at checkbox-with-label.tsx:7)
in CheckboxWithLabel (at login.tsx:70)
in RCTView
in Unknown (at login.tsx:69)
in RCTView
in Unknown (at login.tsx:68)
in Unknown (at login.tsx:64)
in RCTView (created by Form)
in Form
in FormProvider
in Unknown (at login.tsx:42)
in RCTView (at View.js:116)
in View (at ScrollView.js:1732)
in RCTScrollView (at ScrollView.js:1855)
in ScrollView (at ScrollView.js:1925)
in ScrollView (created by ScrollView)
in ScrollView (at login.tsx:41)
in RNCSafeAreaView (at SafeAreaView.tsx:49)
in Unknown (at login.tsx:39)
in Login (at useScreens.js:112)
in Unknown (at useScreens.js:116)
in Suspense (at useScreens.js:115)
in Route (at useScreens.js:131)

[reimertz]

A short-term fix is just to ignore the log since this is a non-destructive according to @natew.

import { LogBox } from 'react-native'

LogBox.ignoreLogs([
  /bad setState[\s\S]*Themed/,
]) 

[benschac]

more agressive but:

LogBox.ignoreLogs([
  "[Reanimated] Couldn't determine the version of the native part of Reanimated.",
  /Cannot update a component/,
])

[batuhanbalci]

I am having the same issue with the latest 1.91.3

[mfrfinbox]

Yes, when I fixed the regression causing super slow theme changes these came back (the back and forth of fixing bugs :/).

For some reason web is super fast and doesn't mind queueMicrotask but native does. I think there's some flag in Hermes you have to enable to make microtasks work like they should or something.

Anyway the error isn't harmful just annoying. I will fix it soon.

Hey Nate good work on everything, I know you've been busy but have you found any time to check this? It is really annoying for developing and debugging as you said. Thanks a lot.

[daminhtung]

The same problem and it resolved by upgrading to 1.94.4

[mfrfinbox]

The same problem and it resolved by upgrading to 1.94.4

Hey @daminhtung not for me, I think the real issue is "Warning: Cannot update a component X while rendering a different component X", might be fixed for you for button but in my case is for theme, I though it was a general problem but if it's fixed for button and not for theme might be something different then.

[aarizz]

Changing the theme in 1.94.4 (using expo, native only) >>>

I'm getting these warning since I started using tamagui [v1.91.1]

Warning: Cannot update a component (Image) while rendering a different component (Card). To locate the bad setState() call inside Card, follow the stack trace as described in https://react.dev/link/setstate-in-render

Warning: Cannot update a component (Button) while rendering a different component (Button). To locate the bad setState() call inside Button, follow the stack trace as described in https://react.dev/link/setstate-in-render

Warning: Cannot update a component (Label) while rendering a different component (Fieldset). To locate the bad setState() call inside Fieldset, follow the stack trace as described in https://react.dev/link/setstate-in-render

I get more of the warnings at a time, its really annoying 😒

And now I expericenced this:

At times it gets stuck in between, and sometimes the text color does not change at all or is some unusual gray.

@natew, done a great job, but the issue needs to be fixed at earnest.

[anguer]

I'm getting a similar issue with the ToggleGroup component(latest version 1.94.5):

 ERROR  Warning: Cannot update a component (`ForwardRef`) while rendering a different component (`Theme`). To locate the bad setState() call inside `Theme`, follow the stack trace as described in https://react.dev/link/setstate-in-render
    in Theme (created by Toggle)
    in RCTView (created by Toggle)
    in Toggle
    in Unknown
    in Unknown (created by Slot)
    in Slot (created by Stack)
    in Stack (created by RovingFocusGroupItem)
    in RovingFocusGroupItem (created by ToggleGroupItem)
    in Provider (created by ToggleGroupItem)
    in ToggleGroupItem (at create-room.tsx:106)
    in RCTView (created by GroupFrame)
    in GroupFrame
    in GroupProvider
    in Unknown (created by Themed(Anonymous))
    in Theme (created by Themed(Anonymous))
    in Themed(Anonymous) (created by ToggleGroup)
    in ToggleGroup (created by Slot)
    in Slot (created by Stack)
    in Stack (created by RovingFocusGroup)
    in RovingFocusGroup
    in Provider
    in Unknown
    in Provider
    in Unknown (created by ToggleGroup)
    in ToggleGroup (at create-room.tsx:95)
    in RCTView
    in Unknown (at create-room.tsx:78)
    in RCTScrollContentView (at ScrollView.js:1732)
    in RCTScrollView (at ScrollView.js:1855)
    in ScrollView (at ScrollView.js:1925)
    in ScrollView (created by ScrollView)
    in ScrollView (at create-room.tsx:67)
    in RCTView (created by Form)
    in Form
    in FormProvider
    in Unknown (at create-room.tsx:65)
    in CreateRoom (at useScreens.js:112)
    in Unknown (at useScreens.js:116)
    in Suspense (at useScreens.js:115)
    in Route (at useScreens.js:131)
    in Route(club/create-room) (at SceneView.tsx:132)
    in StaticContainer
    in EnsureSingleNavigator (at SceneView.tsx:124)
    in SceneView (at useDescriptors.tsx:218)
    in RCTView (at View.js:116)
    in View (at DebugContainer.native.tsx:34)
    in DebugContainer (at NativeStackView.native.tsx:82)
    in MaybeNestedStack (at NativeStackView.native.tsx:325)
    in RCTView (at View.js:116)
    in View (at NativeStackView.native.tsx:318)
    in RNSScreen (at createAnimatedComponent.js:54)
    in Unknown (at src/index.native.tsx:314)
    in Suspender (at src/index.tsx:27)
    in Suspense (at src/index.tsx:26)
    in Freeze (at src/index.native.tsx:206)
    in DelayedFreeze (at src/index.native.tsx:313)
    in InnerScreen (at src/index.native.tsx:566)
    in Screen (at NativeStackView.native.tsx:253)
    in SceneView (at NativeStackView.native.tsx:413)
    in Suspender (at src/index.tsx:27)
    in Suspense (at src/index.tsx:26)
    in Freeze (at src/index.native.tsx:206)
    in DelayedFreeze (at src/index.native.tsx:220)
    in RNSScreenStack (at src/index.native.tsx:227)
    in ScreenStack (at NativeStackView.native.tsx:401)
    in NativeStackViewInner (at NativeStackView.native.tsx:474)
    in RCTView (at View.js:116)
    in View (at SafeAreaProviderCompat.tsx:43)
    in SafeAreaProviderCompat (at NativeStackView.native.tsx:473)
    in NativeStackView (at createNativeStackNavigator.tsx:72)
    in PreventRemoveProvider (at useNavigationBuilder.tsx:718)
    in NavigationContent (at useComponent.tsx:35)
    in Unknown (at createNativeStackNavigator.tsx:71)
    in NativeStackNavigator (at withLayoutContext.js:65)
    in Unknown (at _layout.tsx:52)
    in GameProvider (at provider.tsx:18)
    in AuthProvider (at provider.tsx:17)
    in ToastImperativeProvider (created by ToastProvider)
    in Provider (created by ToastProvider)
    in Provider (created by CollectionProvider)
    in CollectionProvider (created by ToastProvider)
    in ToastProvider (at provider.tsx:16)
    in RCTView (at View.js:116)
    in View (at GestureHandlerRootView.tsx:20)
    in GestureHandlerRootView (at provider.tsx:15)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:92)
    in SafeAreaProvider (at provider.tsx:14)
    in Provider (at _layout.tsx:51)
    in Theme (at _layout.tsx:50)
    in PortalProviderComponent (created by TamaguiProvider)
    in Theme (created by ThemeProvider)
    in ThemeProvider (created by TamaguiProvider)
    in Provider (created by TamaguiProvider)
    in TamaguiProvider (created by TamaguiProvider)
    in TamaguiProvider (at _layout.tsx:49)
    in ThemeProvider (at _layout.tsx:48)
    in RootLayout
    in Try (at useScreens.js:73)
    in Unknown (at useScreens.js:112)
    in Unknown (at useScreens.js:116)
    in Suspense (at useScreens.js:115)
    in Route (at useScreens.js:131)
    in Route() (at ExpoRoot.js:90)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:92)
    in SafeAreaProvider (at ExpoRoot.js:55)
    in wrapper (at ExpoRoot.js:89)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:433)
    in BaseNavigationContainer (at NavigationContainer.native.js:105)
    in ThemeProvider (at NavigationContainer.native.js:104)
    in NavigationContainerInner (at ExpoRoot.js:86)
    in ContextNavigator (at ExpoRoot.js:64)
    in ExpoRoot (at qualified-entry.js:20)
    in App (created by ErrorOverlay)
    in ErrorToastContainer (created by ErrorOverlay)
    in ErrorOverlay (at withDevTools.ios.js:29)
    in withDevTools(ErrorOverlay) (at renderApplication.js:57)
    in RCTView (at View.js:116)
    in View (at AppContainer.js:127)
    in RCTView (at View.js:116)
    in View (at AppContainer.js:155)
    in AppContainer (at renderApplication.js:50)
    in main(RootComponent) (at renderApplication.js:67)

[Arthurmtro]

same here for buttons

[natew]

Thanks guys I hear you. And sorry it's taking so long.

I have my PR here with the refactor to fix it you can subscribe to.

I spent a few days on it in January and got a long way there but the long tail of getting the themes system correct + fast on every platform is quite long. In fact it's pretty damn fast now so it's been hard to match even without correctness. I'll resume on it soon.

[pgosk]

Any updates? In my case it crashing iOS app when I navigate between screens in production mode.

[natew]

It definitely doesn’t crash, you likely just have a crash at the same time from something else

[thecodehunter]

🙏

[pgosk]

It definitely doesn’t crash, you likely just have a crash at the same time from something else

You are right. In my case, there is a problem with the fonts.

[Pamavoc]

Hello guys, same things happening with ToggleGroup here. Should I remove the theme provider before the fix ? Also, thanks to for the future fix @natew, I subscribed to the issue.

[natew]

I'm making a note to revisit this soon - we are very close to shipping a big project that has been taking up a lot of time (not to mention Bento), but as soon as that merges we are much more cleared up to move through and cleanup the backlog.

[natew]

Keep in mind the LogBox ignore should be good for now to silence these:

LogBox.ignoreLogs([
  /^Cannot update a component/,
])

[natew]

By the way this issue is actually I believe due to the async bridge. I’ll have to test if the new architecture with sync mode will just fix this for us automatically.

[Vaib215]

please fix it

[maximihajlov]

Similar error happens when using Select inside Sheet:

 ERROR  Warning: Cannot update a component (`SelectValue`) while rendering a different component (`Theme`). To locate the bad setState() call inside `Theme`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
    in Theme (created by Themed(Anonymous))
    in Themed(Anonymous) (created by CustomSelect)
    in RCTView (created by ListItem)
    in ListItem
    ...