With React, we have quite a few options when it comes to state management. One of the most obvious ones is using the local state. Unfortunately, it might lead to prop drilling. It happens when we pass data from one component through many layers. When some of the components along the way do not need the data but only help passing it around, it starts to feel like an issue.

Due to the above issue, the React community implemented various solutions. Redux is one of the most popular, and the Context API didn’t replace it. In fact, Redux uses context under the hood. In this article, we learn what the context is and how to use it with TypeScript and hooks.

Introducing the context

The React Context allows us to provide data through components. With it, we don’t need to pass them down manually through every level of components. We can also update the data from any child component. Doing so affects all the other places that use the same context.

#JavaScript #React #TypeScript