Escape Prop Drilling with React Navigation Hooks
React Navigation hooks let components control navigation without prop drilling. useNavigation gives you the navigation object to change screens, while useRoute provides data about the current screen. The footgun: they only work inside a navigator.
Why it exists
In React, data flows down via props. For a deeply nested component to trigger a screen change, the navigation object would have to be passed down through every intermediate parent. This pattern, called "prop drilling," is verbose and makes components harder to reuse. Navigation hooks were created to bypass this entirely.
The mental model
Think of navigation hooks as a universal remote for your app's screens. Instead of passing the remote from person to person (prop drilling), any component can use its own copy (useNavigation) to control the TV (the navigator) directly. It lets a component "reach up" the tree to get what it needs, rather than waiting for a parent to pass it down.
How it works
Under the hood, React Navigation uses React's Context API. The NavigationContainer creates a context that holds the current navigation state. When you call useNavigation() in a component, it searches up the component tree for this context and gives you the navigation object. This object has methods like navigate(), goBack(), and setParams(). The useRoute() hook works the same way, but provides the route object, which contains data like route.params.
When to use it
Use these hooks in any functional component that needs to interact with navigation but doesn't receive the navigation or route objects as props. This is perfect for reusable components like a custom header, a button inside a generic card, or any component nested several levels deep within a screen.
When not to use it
Do not use hooks in class components; you must wrap them in a functional component as shown in the docs. The biggest footgun is using them in a component that is not a descendant of a NavigationContainer and a screen. If the hook can't find the navigation context up the tree, your app will crash.
One canonical example
A ProductCard component is rendered in a list. When a user taps a "View Details" button inside the card, it should navigate to a ProductDetail screen. Instead of the screen passing its navigation prop down to the list, then to the ProductCard, the button component can just call const navigation = useNavigation() and then navigation.navigate('ProductDetail', { id: productId }). This makes the ProductCard self-sufficient.
Interview question
What is the primary advantage of using React Navigation's useNavigation hook compared to passing navigation props?
- a.It allows navigation logic to be easily shared and reused across different types of navigators.
- b.It prevents the need to pass navigation objects through multiple layers of nested components.Correct
- c.It enables class components to access navigation functions directly without any additional wrappers.
- d.It significantly improves application performance by reducing the number of component re-renders.
Why? this is the answer
The useNavigation hook directly addresses the problem of 'prop drilling' by allowing deeply nested components to access the navigation object without it being passed down through every parent. Option C is incorrect because the card explicitly states that hooks do not work in class components directly.
Just read this? Test yourself on what you have been reading.
Read the original → reactnavigation.org
- #react-native
- #react-navigation
- #hooks
- #prop-drilling
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react-native — each one lists the topics its interview covers.
See open roles