1

I'm a little lost with a current issue in my app when rendering a checklist. react-devtools show no performance issues, however there's a visible delay / kind of fading render appearing on the UI when selecting the Google Maps item from the list. Here are two animated screenshots with different speeds (x1.0 and x0.3):

Issue @ 1.0

Issue @ 0.3

react-devtools shows this for rendering the changed selection:

Changed selection rendering

and this for rendering a FAB component I added in my current version:

Provider and FAB rendering

This is also the major difference to my previous version where the issue did not appear. In my current version I make use of react-native-papers FAB and FAB.Group components:

...
<Portal>
  <FAB.Group
    style={{ paddingBottom }}
    open={open}
    onStateChange={onStateChange}
    icon={icon}
    visible={visible}
    actions={actions}
  />
</Portal>
...

$ react-native info

System:
    OS: macOS 11.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 869.95 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.20.1 - ~/.nvm/versions/node/v12.20.1/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.10 - ~/.nvm/versions/node/v12.20.1/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.0 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.3, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
    Android SDK:
      API Levels: 28, 29, 30
      Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.0
      System Images: android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom_64, android-30 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.7042882
    Xcode: 12.3/12C33 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_261 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.1 => 17.0.1 
    react-native: 0.63.3 => 0.63.3 
  npmGlobalPackages:
    *react-native*: Not Found

package.json

{
  ...
  "dependencies": {
    "@invertase/react-native-apple-authentication": "^2.1.0",
    "@ptomasroos/react-native-multi-slider": "^2.2.2",
    "@react-native-community/async-storage": "^1.12.1",
    "@react-native-community/datetimepicker": "^3.0.6",
    "@react-native-community/geolocation": "^2.0.2",
    "@react-native-community/google-signin": "^5.0.0",
    "@react-native-community/masked-view": "^0.1.10",
    "@react-native-community/push-notification-ios": "^1.8.0",
    "@react-native-community/slider": "^3.0.3",
    "@react-native-firebase/analytics": "^8.0.1",
    "@react-native-firebase/app": "9.0.0",
    "@react-native-firebase/auth": "^9.3.5",
    "@react-native-firebase/crashlytics": "^8.5.2",
    "@react-native-firebase/messaging": "^8.0.1",
    "@react-native-firebase/perf": "^7.4.12",
    "@react-native-picker/picker": "^1.9.2",
    "@react-navigation/material-bottom-tabs": "^5.3.12",
    "@react-navigation/material-top-tabs": "^5.3.12",
    "@react-navigation/native": "^5.9.1",
    "@react-navigation/stack": "^5.14.0",
    "@reduxjs/toolkit": "^1.4.0",
    "@welldone-software/why-did-you-render": "^6.0.0-rc.1",
    "axios": "^0.21.0",
    "babel-plugin-wildcard": "^6.0.0",
    "color": "^3.1.3",
    "date-fns": "^2.16.1",
    "deepmerge": "^4.2.2",
    "equentry-frontend-shared": "2.15.1",
    "expo-local-authentication": "^9.5.0",
    "i18next": "^19.8.3",
    "lodash": "^4.17.20",
    "metro-config": "^0.64.0",
    "react": "17.0.1",
    "react-i18next": "^11.7.3",
    "react-native": "0.63.3",
    "react-native-device-info": "^8.0.0",
    "react-native-fbsdk": "^3.0.0",
    "react-native-gesture-handler": "^1.8.0",
    "react-native-get-random-values": "^1.5.1",
    "react-native-localize": "^2.0.0",
    "react-native-map-clustering": "^3.4.2",
    "react-native-map-link": "^2.7.20",
    "react-native-maps": "^0.27.1",
    "react-native-navigation-bar-color": "^2.0.1",
    "react-native-paper": "^4.7.0",
    "react-native-push-notification": "^7.0.0",
    "react-native-reanimated": "^1.13.1",
    "react-native-safe-area-context": "^3.1.9",
    "react-native-screens": "^2.15.2",
    "react-native-splash-screen": "^3.2.0",
    "react-native-svg": "^12.1.0",
    "react-native-swipe-gestures": "^1.0.5",
    "react-native-tab-view": "^2.15.2",
    "react-native-unimodules": "^0.12.0",
    "react-native-vector-icons": "^7.1.0",
    "react-redux": "^7.2.2",
    "redux": "^4.0.5",
    "redux-persist": "^6.0.0",
    "redux-saga": "^1.1.3",
    "reselect": "^4.0.0",
    "uuid": "^8.3.2"
  }
}

Any help / hint is highly appreciated! :) Cheers!

Jascha
  • 21
  • 6

1 Answers1

1

Update: Actually the issue is that if your clustered map is animation enabled using the animationEnabled prop here, any following UI change is animated on iOS, see here.

I now reverted my original change (see below) and simply set the animationEnabled prop to false.

Initial answer:

Alright, found it (my fault :)) As you can see from the attached package.json file I'm using react-native-maps and react-navigation. As the screen rendering the map was not dismissed by react-navigationwhen navigating to the settings shown in the screenshots and changing the settings affects which map is rendered, changing the settings and the following update to the redux store trigger the hooks of my map component, thus re-rendering the screen and slowing down the app.

I addressed this issue now by using react-navigation event listeners and unmounting the map screen whenever it loses focus.

const navigation = useNavigation();
const [focused, setFocused] = useState(false);

useEffect(() => {
  const u1 = navigation.addListener('focus', () => {
    setFocused(true);
  });

  const u2 = navigation.addListener('blur', () => {
    setFocused(false);
  });

  return () => {
    u1();
    u2();
  }
}, [navigation])

return focused ? <Map /> : null;

However I still wonder why react-devtools don't show this behaviour of my maps component. Am I missing something? Any hint appreciated! :)

Jascha
  • 21
  • 6