Wanted to share my learning related to Context API.
Before going into what Context API is, we need to understand why there was a need for it.
Let's take an example:
Imagine an web app with a homepage featuring a dashboard. The dashboard is divided into two parts: the left and right sides. The right side further divides into an upper and lower part, with a card component in the upper part.
In the card component, we require a title. Let's assume we are fetching data from an API, and the title comes from this API. The title, initially received from the API, first pass to the App component, then moves to the dashboard component, followed by the right side, and then progresses to the upper side component. Finally, it reaches the card component.
In this process, the data is passed through different components to reach its original destination. All these data pass-on are inefficient and not an optimized way of handling this.
To address this issue, we can create a global object that stores all the necessary data or the fetched data required by different components of the app.
This is where the Context API comes into play.
Think of the Context API as a global object where different data or Fetched data can be stored, and this data can then be directly accessed by specific components.
Using the Context API can make handling data and managing states in React apps simpler. This is especially helpful when different parts of your app need to use the same data.
Top comments (4)
Sorry, but your post lacks some basic information:
First: you are obviously talking about REACT? Nice to know, as there are hundreds of API´s out there (e.g. about 100 browser API´s for different purposes). Not everybody on dev.to is working with REACT (luckily), so it was nice to tell people what you are talking about.
Second: There is no single link or any other reference in your text that could help for better understanding. You can create links with a text in square brackets followed by a link in round brackets, so it should not be too much work to share some references.
Third: Good to see you contributing to this forum. You are very welcome! Try to make your posts as helpful as possible to others to make it more valuable.
Best regards,
Eckehard
Thanks for the helpful feedback! From now on, I will take care of these points while writing. I'm new to technical writing, so your input is really appreciated.
Wouldn't a statemanagement system be better in combination with e.g. RxJS instead of using the rather simple Context API?
Context API is best for simple projects in which there is no need for complex state management, whereas RxJS + a state management tool (like Redux) would be overkill in such situations. It is best suited for advanced projects or large-scale projects.