Experimenting with Provide/Inject API in Vue

user_248665 0
Viewed 247

I am trying to experiment with Provide/Inject in Vue 3. The goal is to get rid of prop drilling by utilizing Provide/Inject API.

Let's consider having the following example:

App 
  |
  |_ _ CatsCollection 
             |
             |_ _ FavoriteCat
             |_ _ FavoriteCat

A config object is passed down from App to FavoriteCat passing through CatsCollection.

By using props to pass down the data, the hook beforeUpdate() fires on both components CatsCollection and FavoriteCat.

Now, I switch to using Provide/Inject. My initial thoughts are that the beforeUpdate() inside the CatsCollection component should not run. This component now receives no props. The FavoriteCat is using inject to retrieve the config object.

However, the beforeUpdate() hook is still running for the CatsCollection. Meaning that this component (middle component) is still re-rendering. Doesn't this defeat the purpose?

Am I missing anything?

I have a running sample here for reference.

https://vue3-prop-drilling-provide-inject.stackblitz.io

And I really appreciate your feedback.

Best, Bill

vue.js
0 Answers
Related