Introducing the React Context API

The React Context API has been officially added since version 16.3.0; before it was just experimental. The new Context API is a game-changer. A lot of people are moving away from Redux in order to use the new Context API. Context provides a way to share data between components without passing a prop to all the child components.

Let's see a basic example where we can use the new Context API. We will do the same example we did in Chapter 3, React Hooks, where we fetched some GitHub issues, but now using the Context API.

Creating our first context

The first thing you need to do is to create the issue context. For this, you can create a folder called contexts inside your src folder and then inside that, add the Issue.tsx file.

Then, you need to import some functions from React and axios:

import { FC, createContext, useState, useEffect, ReactElement, useCallback } from 'react'
import axios from 'axios'

At this point, it is clear that...