Summer Sale! All accounts are 50% off this week.

JackJones's avatar

usePage() vs Prop Drilling

Are there any reasons why I would prefer to have to props drill in lots of places rather than just use usePage()?

usePage() saves lots of time and makes everything a lot simpler, but I'm wary that "simple" often has massive repercussions somewhere else.

0 likes
5 replies
JeffreyWay's avatar

Declaring props makes it crystal clear what your Vue component requires. It's similar to declaring constructor params in a PHP class.

In addition to clarity, it provides free validation. "This Vue component may not be used unless the given prop data is provided."

If you reach for $page.props thoughtfully, I agree it can be very useful. But I wouldn't omit props in favor of using it exclusively. That'll pretty quickly create a big mess.

If you find yourself prop drilling down multiple levels, you could consider provide and inject, or something like a Pinia store.

1 like
JussiMannisto's avatar

If you want a reusable component, it shouldn't rely on the external environment. That means you should avoid usePage, and probably useContext. You might still use those in the parent component and just pass down the necessary props.

Relying on usePage is analogous to relying on global state variables on the backend. Whether it makes sense in a specific component comes down to separation of concerns and your own judgment. Should a button rely on page props? No, the component props should define its behavior and label. How about a product order form? Directly using page props makes sense there, since the form is closely tied to your application.

TL;DR: Use your own judgment. Don't rely on page props on reusable low-level components.

1 like
JackJones's avatar

I'll give my example, I have a DatePicker component that is very often 4 or 5 components down the chain. It uses different formats for different countries so I have to pass those settings down.

I only have DatePicker's on specific pages, so I have to pass it through the layers.

I can use usePage() however and it solves the issue. I understand I can use provides and inject but it just "feels" like that is accomplishing the exact same thing.

I know I am wrong, or at least I feel like I am wrong, but "grabbing" it from the controller just feels the same as "grabbing" it from provides

I've watched a few of Jeff's videos on it and he always uses Props, and obviously I defer to his judgement because he knows a lot more than I do, but :dateSettings="dateSettings" or especially inject just feels like I am doing the same thing

martinbean's avatar

@JackJones I don‘t really follow your example. Either way, you should be employing the Tell, Don‘t Ask principle where you’re passing components the data it needs via props, rather than those components “reaching out” and magically grabbing the data from somewhere.

If we’re talking usePage and therefore Inertia, then you should have a page component, that then makes use of other components to render its UI. If you have components that format dates and times, then pass Date instances rather than grabbing stuff from usePage. Your component can then be responsible for formatting that date-time based on whatever timezone and locale information.

I also don’t really understand why you would be populating on-page date-pickers using page props; surely you’d be setting date-picker values based on some sort of database record or form data; not URL segments?

kerelka's avatar

I only use useProps() when I need to retrieve shared data like user auth. Otherwise I always make explicit the data I need in defineProps<>

Please or to participate in this conversation.