The React Context API is a way for a React app to effectively produce global variables that can be passed around. This is the alternative to "prop drilling" or moving props from grandparent to child to parent, and so on. Context is also touted as an easier, lighter approach to state management using Redux.
Context API is a (kind of) new feature added in version 16.3 of React that allows one to share state across the entire app (or part of it) lightly and with ease.
React.createContext() is all you need. It returns a consumer and a provider. Provider is a component that as it's names suggests provides the state to its children. It will hold the "store" and be the parent of all the components that might need that store. Consumer as it so happens is a component that consumes and uses the state. More information can be found on React's documentation page

Context API will replace redux?
No. Well, not entirely. Redux is great and came perfectly to answer the need for state management. Actually, it answered this need so well that it came to be known that you can't be a "true" React developer if you don't know your way around Redux. However, Redux has its disadvantages, and that's why it's important to know what Context API gives us that Redux doesn't: Simplicity - When using redux people tend to manage almost all of their state in redux and it causes 2 problems: Overhead - Why should I create/update 3 files just to add one tiny feature? One of the significant advantages of React's one-way data binding is that it's easy to understand - A component passes state to its children. Using Redux takes it away from us. Using Context API we can define several unrelated contexts (stores) and use each in its proper place in the app.

The useRef Hook allows you to persist values between renders. It can be used to store a mutable value that does not cause a re-render when updated. It can be used to access a DOM element directly.

Does Not Cause Re-renders
Does Not Cause Re-renders useRef() only returns one item. It returns an Object called current. When we initialize useRef we set the initial value: useRef(0). It's like doing this: const count We can access the count by using count.current.

Accessing DOM ElementsIn general, we want to let React handle all DOM manipulation. But there are some instances where useRef can be used without causing issues. In React, we can add a ref attribute to an element to access it directly in the DOM.
Tracking State ChangesThe useRef Hook can also be used to keep track of previous state values. This is because we are able to persist useRef values between renders.

This time we use a combination of useState, useEffect, and useRef to keep track of the previous state. In the useEffect, we are updating the useRef current value each time the inputValue is updated by entering text into the input field.