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

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.

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.

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.

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

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, ...

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.

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 

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.

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.

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)

The same problem and it resolved by upgrading to 1.94.4

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.

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/,
]) 

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)

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}

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)