#4 House of Commons-Vuejs & React

Hello Everyone, 

Welcome to my blog 🙏.  I hope you are all safe and that this blog finds you in good health ❤️.

In my previous blogs, We have learnt about 

👉 UseEffect hook of React and Created & Mounted hooks of VueJs.

👉 UseEffect hook of React and Computed & Watch properties of VueJs

👉 UseRef hook of React and Template Refs of VueJs

In this blog, let’s learn about Context API of React and Provide-Inject of VueJs

Introduction

Before starting with the main topic, let’s first understand what the need for context API or provide-inject is. 

The common thing between them is that they are used to sharing information or data from parent to child without passing them as props for each child.

As usual, let’s understand them with a scenario.

Scenario 5

A new requirement came to Mr.Goku where he needs to auto-populate some fields in the form with already available data that was procured by an API call in the Home page. Now Goku needs to get that data from the Home page and pass the same information into the form component.

Hope the scenario is clear but let’s try to get more clarity with component structure.

Scenario-5 continued

Now, it's pretty clear for us, that Goku needs user data from the home page to be auto-populated in the delivery information form. As usual he knew how to do it in React but no idea in doing it in VueJs but never mind we are here to help him out.

Let’s first try out the same thing in React using the Context API with useContext() hook.

Context API with useContext() of React

So, using Context API we actually consumed the user state in the “DeliveryInformationForm” component using useContext() hook.

Now, that we did it in react. Let’s try to achieve the same in VueJs. So, without any further delay let’s move ahead.

Provide-Inject of VueJs

In this case, Let’s directly understand it with the example code just to avoid confusion with images.

Isn’t simple? Parent component i.e. “Home/App.vue” in the above code provides the data that can be utilised by Child components and here child component i.e. “DeliveryInformationForm” will consume the data provided by the parent by injecting it into itself.

Note: Please kindly go through the working code links below for better readability and clean code.

Alternatives

Apart from Context or React and Provide-inject of VueJs, there are other ways to achieve the same functionality as above such as 

👉 Using props — hard to maintain if the component tree is larger.

👉 Web storage (Local, session) — Not recommended.

References

Please check the working code of the above examples

👉 Vue Examples

👉 React Examples

For more information, please refer to the below links👇

👉 Provide-Inject of VueJs

👉 Context of React.

---------------------------------------------------------------------------------------------------------

Here we go, That’s it folks for this blog.

Hope everyone liked it.

If you like it, give it a love ❤️ , and share it with your friends.

For more exciting content on Frontend,

Please do follow me 🎯.

Thanks a lot, Everyone 🙏. Until Next time, Happy Learning ✍️

Abhishek Kovuri, UI developer