React Native: Why not just use Navigation hooks all the time?-CodePudding

I've built one or two RN apps for work and whenever I struggle with passing a navigation component for one reason or another useNavigation always saves my bacon.

So if you can use this to access the navigation component from anywhere in your app without having to prop drill it... why not always use it?

Is it solely because the app might employ nested navigation stacks or is there some other reason?

CodePudding user response：

The first reason in my mind is: If you use navigate, the screen do not mount or update. For rendering you have to implement focus or other workarounds.

CodePudding user response：

The navigation prop is passed to all components that are defined as screens in a react-native navigator, e.g. a Stack.Navigator. Thus, in these screens we have access to it. Why should we not use it directly?

In my opinion we should only use useNavigation when there is no other choice. This is not because it breaks something, but because we should not introduce a dependency to a hook when it is not needed. However, this might be personal preference.

That said, the useNavigation hook is a method that was introduced in react-native-navigation v5.x in order to

give access to the navigation object. It's useful when you cannot pass the navigation prop into the component directly, or don't want to pass it in case of a deeply nested child.

If we keep in mind that the navigation prop is only passed to screen components, we need to take care of navigation ourselves in nested components that are not screens listed in the navigator. Suppose that Screen is a screen defined in a Stack.Navigator. The navigation prop is passed. Suppose that in SomeComponentThatNeedsToNavigate has a child that needs to navigate somewhere else. It can't. It has no access to the navigation prop.

There is of course an obvious way to solve this (which I am sure you are aware of).

const Screen = ({navigation}) => {
    return <SomeComponentThatNeedsToNavigate navigation={navigation} />
}

However, this quickly gets out of hands when there is a deeply nested child that needs access to the navigation prop.

That is the reason useNavigation was introduced and is said so in the react navigation documentation.

An ordinary component that is not a screen component will not receive the navigation prop automatically. For example in this GoToButton component:

To resolve this exception, you could pass the navigation prop in to GoToButton when you render it from a screen, like so: <GoToButton navigation={props.navigation} />.

Or as an alternative

Alternatively, you can use the useNavigation to provide the navigation prop automatically (through React context, if you're curious).

To summarize: NO there is no disadvantage or advantage in using useNavigation. Since I have never faced an issue with useNavigation myself during my work, I have checked their Github issue page and have not found any issue concerning useNavigation which makes me more confident that there is none in general. However, as I said earlier we generally should not introduce a dependency if it is not needed.