Is the navigation prop immutable / pure? – react navigation v4

I’m using React Navigation v4, and I need to know if the navigation prop is immutable because I want to wrap my component with React.memo

For context here is my (hopefully) pure React component:

    // notice the React.memo and the usage of navigation.state.routes and navigation.navigate
    const TabBarComponent: React.FC<Props> = React.memo(({ navigation }) => {
      const onSelect = (index) => {
        const { [index]: selectedTabRoute } = navigation.state.routes
        navigation.navigate(selectedTabRoute.routeName)
      }
    ...
   }

Answer

I’m going to answer my own question based on this tweet by Satyajit Sahoo.

It’s not immutable, but it only changes when it needs to (e.g. navigation.state changes). In v5, navigation.state is moved to a separate route prop (or in case of tab bar, state prop). So, yeah you can wrap components accepting it in React.memo.

However, the tab bar also accepts more props such as a descriptors object containing options for each screen. So it depends whether it’ll have much difference depending on when those other props change.

All screens are wrapped in React.memo by default.

Essentially, React Navigation doesn’t change props when it doesn’t need to.

And it doesn’t make anything immutable (e.g. with Object.freeze), but they aren’t treated as mutable internally and you are not supposed to mutate them, similar to other things in React ecosystem.