React ContextAPI - The Prop Buster

By James Ashok R

Elevator Pitch

The React ContextAPI - when known how to properly use could be a savior in disguise, an undercover cop. It makes our code refactoring easy and our communication and data sharing among components simple.

What problems does it solve, and what has it left out, and what is the upcoming challenge?

Description

React ContextAPI - solves the problem of multi layered prop data passing, which could get out of control if the nesting of components gets deeper. While designing communications / data passing among components, it is important to reduce the complexity without introducing further much bugs into the app. React ContextAPI resolves one such problem for us. Lets see with examples, what problems does it solve, and what has it left out, and what is the upcoming challenge?

Notes

Technical Requirement: + ReactJS - latest version + Typescript - to make the best use of strict type checking

I have been a part of developing big applications with React which essentially required components to pass data and communicate among themselves often. A single approach is not always best for all different scenarios. After realising it with experience, I would like to present React context API and what problems it solved and what problems it could not solve and what are the alternatives.