Cannot update a component from inside the function body of a different component

[iLightFPS]

"react": "16.13.1", "react-native": "0.63.2",

Everything is up to date

i did find this after some google searches

New Warnings Warnings for some updates during render A React component should not cause side effects in other components during rendering.

It is supported to call setState during render, but only for the same component. If you call setState during a render on a different component, you will now see a warning:

Warning: Cannot update a component from inside the function body of a different component. This warning will help you find application bugs caused by unintentional state changes. In the rare case that you intentionally want to change the state of another component as a result of rendering, you can wrap the setState call into useEffect.

this is from https://reactjs.org/blog/2020/02/26/react-v16.13.0.html

even if this warning pops up everything is working fine but i cannot find a solution to get rid of this warning

[hetmann]

@iLightFPS can you share a screenshot with the issue?

[iLightFPS]

@hetmann

[hetmann]

@iLightFPS go to Drawer.js line 87 ... and share the code snippet :)

[iLightFPS]

This is line 87 in Drawer.js overlayColor="transparent"

This is the rest of the code that belongs to line 87

      <Drawer.Navigator
        drawerType="slide"
        overlayColor="transparent"
        drawerStyle={styles.drawerStyles}
        contentContainerStyle={{ flex: 1 }}
        drawerContentOptions={{
          activeBackgroundColor: 'transparent',
          activeTintColor: 'white',
          inactiveTintColor: 'white',
        }}
        sceneContainerStyle={{ backgroundColor: 'transparent' }}
        drawerContent={(props) => {
          setProgress(props.progress);
          return <DrawerContent {...props} />;
        }}>
        <Drawer.Screen name="Screens">
          {(props) => <Screens {...props} style={animatedStyle} />}
        </Drawer.Screen>
      </Drawer.Navigator>
  );
};

[iLightFPS]

Update!

Inside Drawer.Navigator there is a drawerContent, like this

drawerContent={(props) => {
          setProgress(props.progress);

I then changed it to

drawerContent={(props) => {
          setTimeout(() => {
            setProgress(props.progress);
          }, 100);

After that the warning disapeared

[hetmann]

@iLightFPS nice, but the setTimeout is not the best solution. Probably the component should refactored to fix that.