The React Context API has been introduced in React version 16.3.0. Mostly in React application, data is passed top-down (parent to child) via props, but such usage can be heavy for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Here you can use Context, which provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.
Before moving forward I want to assure you that you have basic knowledge of React and its components, React hook and React class base components. Let’s move forward. This article will understand Context API with ref to two examples, one with class base component and another with hook base component.