Is passing the same ID as a parameter into a tab where two screen shares the same ID considered an anti-pattern?

[JosephLu2022]

Version: V7

I'm using material UI top tab. I'm passing uuid from one screen into a tab. then querying the id individually from an api to display the result to user. see example below

navigation.navigate('tabScreen', {
 _id,
 });

    <Tab.Navigator
      initialRouteName="Screen1"
      screenOptions={{
        tabBarLabelStyle: {textTransform: 'none'},
      }}>
      <Tab.Screen
        name="Screen1"
        initialParams={route.params}
        component={Screen1}
      />
      <Tab.Screen
        name="Screen2"
        component={Screen2}
        initialParams={route.params}
      />
    </Tab.Navigator>

I wonder if this an anti-pattern?

I’m a bit confused because I read something similar to the image below, and it appears very convenient to simply pass the parameter to the tab.

[satya164]

Think of params as state. It's generally an anti-pattern to duplicate state to two places.

It may be convenient to pass route.params in initialParams, but it comes with many downsides:

• When the parent route.params updates, the tab screens won't get new params because initialParams is applied on initial render, so you'll need to write more code to handle this, which negates the convenience
• This pattern makes it possible for each tab to have different IDs which can also differ from the ID in parent params. This can be desirable behavior, but if not, having "impossible state" is generally bad as it adds more edge cases and conditions to test. It's best to design the logic in a way to "make impossible states impossible".

So if your goal is to just access route.params inside the tab screens, context is really the best way. Yes, it's slightly more code to define the context, but it also eliminates the edge cases and will work reliably.

[JosephLu2022]

Thanks for the reply.

i think i understood it.... so is not prop drilling is just create/initializing a state in Tab.screen then it inject the route props into my customer component?