How to prevent tabs from updating / re-rendering when they are not focused?-CodePudding

I'm using material top tabs. Problem is, when a state changes in one tab, all other tabs that use the same state render again which slows the app a little. How do I prevent tabs from getting updated unless they are focused / seen ?

CodePudding user response：

In your components, you can get state property and detect is it in focus or not. And if it is not in focus you can prevent rerendering or place your own logic. An example is here: https://reactnavigation.org/docs/material-top-tab-navigator#tabbar

CodePudding user response：

<TabNavigator.Navigator
  // set lazy true to prevent pre-render
  lazy={true}
  optimizationsEnabled={true}
  tabBarOptions={tabBarOptions}>
    <TabNavigator.Screen name="HOME" component={HOME} />
    <TabNavigator.Screen name="SHOP" component={SHOP} />
</TabNavigator.Navigator>