Get value from query hook or pass via props?
Does anyone have a general guidance of when values should be passed via props vs calling a query hook to get the values? For example, in a dashboard page I call a useUser hook which uses useQuery to return the current user. When a settings component mounts as a child of the dashboard component that also needs the current user value, should I pass the value from the dashboard component to the settings component or should I again call my useUser hook inside of the settings component to get the current user? I am new to using react-query. Any guidance on this general concept would be much appreciated!
3 Replies
fascinating-indigo•3y ago
both are "fine". Passing props is explicit. Moving the component around and having it work everywhere in your tree (because it calls useQuery on its own) is also nice. It's just a tradeoff that you have to decide
passing props over 5 levels is tedious. handling loading states in each component is also tedious 😅
foreign-sapphireOP•3y ago
Great, that is exactly what I was looking for. Thank you!
foreign-sapphire•2y ago
Super helpful response, glad I found this.
One thing to add if using TypeScript
useQuery is one less type to import when creating the component Props type.