Experimenting React 18.2.0: Context API

App.jsx

import React, { useState, useReducer, useEffect, useContext } from 'react';

const Ctx = React.createContext();

const Display = () => {
  return (
    <Ctx.Consumer>
      { ctx => ( <span>value: {ctx.a}</span> ) }
    </Ctx.Consumer>
  );
}

const DisplayWithUseContext = () => {
  const ctx = useContext(Ctx);

  return (
    <>
    <span>value: {ctx.a}</span>
    </>
  )
}

const CtxProvider = ({children}) => {
  const [a, setA] = useState(123);

  return (
    <>
    <Ctx.Provider value={{a, setA}}>
      {children}
    </Ctx.Provider>
    </>
  )
}

const App = (props) => {
  const [a, setA] = useState(123);

  return (
    <>
    <Ctx.Provider value={{a, setA}}>
      <Display />
      <DisplayWithUseContext />
    </Ctx.Provider>
    
    <CtxProvider>
      <Display />
      <DisplayWithUseContext />
    </CtxProvider>
    </>
  );
}

export default App;

This code snippet shows how to use the Context API with Provider and Consumer or useContext. It's simple, but took me a few to fully understand all the underlyings and to reduce the code to the minimum as a reference.