React state update on an unmounted component on screen orientation change

[colinbes]

Using version 1.8.1 in expo environment on macos.

If I show Modal component with a MultiSelect component and then close the Modal component a change in screen orientation (tested on ios simulator) I get a error message on update on unmounted component.

This is my first react native (and react project) so I am not qualified to give best solution but warning is generated when calling setOrientation in onChange function.

It appears to me that event listener should be removed and would think this sufficient but I had to add additional logic to useEffect and onChange

Apologies for not creating a mini project but I am about to jump into meetings and wanted to get this out there.

Here are changes to onChange and useEffect in useDeviceOrientation.ts (adding isLoaded checking)

Note that 'isloaded is false' is printed when Modal is closed and screen rotated.

  const onChange = useCallback((screen, isLoaded) => {
    if (isLoaded) {
      setOrientation({
        portrait: isOrientationPortrait(screen),
        landscape: isOrientationLandscape(screen),
      });
    } else {
      console.log('isloaded is false')
    }
  }, []);

  useEffect(() => {
    let isLoaded = true

    const susbcription = Dimensions.addEventListener('change', () => {
      const screen = Dimensions.get('window');
      onChange(screen, isLoaded);
    });

    return () => {
      isLoaded = false
      if (typeof susbcription?.remove === 'function') {
        console.log('why called')
        susbcription.remove();
      }else {
        Dimensions.removeEventListener('change', ()=>{
          const screen = Dimensions.get('window');
          onChange(screen, isLoaded);
        });  
      }
    };
  }, []);

[hoaphantn7604]

hi @colinbes , I'm working on it.

[hoaphantn7604]

hi @colinbes , I can't reproduce your issue. Please try again with a later version 1.8.4. Let me know if the problem persists with you.

[colinbes]

I have confirmed that 1.8.4 is still giving the warning. Simply opening the Modal (from react-native) that contains dropdown and then closing it and then rotating screen gives error message (this is using expo and with iOS simulator). Something is bust with my android setup so am busy installing and will let you know if it works on or not on Android simulator.

I will setup test project to share and test early in the week.

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
at node_modules/react-native-element-dropdown/src/useDeviceOrientation.ts:27:19 in useDeviceOrientation
at http://192.168.1.21:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:178445:16 in <unknown>
at node_modules/react-native/Libraries/vendor/emitter/_EventEmitter.js:135:10 in EventEmitter#emit
at node_modules/react-native/Libraries/Utilities/Dimensions.js:89:6 in set
at node_modules/react-native/Libraries/Utilities/Dimensions.js:134:6 in RCTDeviceEventEmitter.addListener$argument_1
at node_modules/react-native/Libraries/vendor/emitter/_EventEmitter.js:135:10 in EventEmitter#emit

[colinbes]

I get same error when using android emulator

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
at node_modules/react-native-element-dropdown/src/useDeviceOrientation.ts:27:19 in useDeviceOrientation
at http://192.168.1.21:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false&strict=false&minify=false:176660:16 in <unknown>
at node_modules/react-native/Libraries/vendor/emitter/_EventEmitter.js:135:10 in EventEmitter#emit
at node_modules/react-native/Libraries/Utilities/Dimensions.js:89:6 in set
at node_modules/react-native/Libraries/Utilities/Dimensions.js:134:6 in RCTDeviceEventEmitter.addListener$argument_1
at node_modules/react-native/Libraries/vendor/emitter/_EventEmitter.js:135:10 in EventEmitter#emit

[colinbes]

Here's link to Github repo which shows the warning on rotating screen https://github.com/colinbes/react-dropdown-test.

Tests run on macOS using both IOS and Android simulators.

Details in readme.md

[colinbes]

Let me know if there is anyway I can assist.

[hoaphantn7604]

Hi @colinbes , There are quite a few tickets I'm trying to process these days.

[colinbes]

Fully understood. I am running 1.8.4 with patch I mention so it's not holding me back for now.

[hoaphantn7604]

hi @colinbes , This issue is resolved. Please install later version 1.8.5

[colinbes]

Perfect, I confirm it works - thanks!!