App.js

// EXAMPLE WITH CONTEXT + REDUCER

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

const AppContext = React.createContext(null);

const ContextProvider = ({children}) => {
  
  const reducer = (state, action) => {
    switch (action.type) {
      case 'INCREMENT':
        return {...state, counter: state.counter + 1};
      default:
        return state;
    }
  }
  
  const store = useReducer(reducer, {counter: 0});
  
  return (
    <AppContext.Provider value={store}>
      {children}
    </AppContext>
  );
}

const App = () => {
  return (
    <ContextProvider>
      <Counter />
    <ContextProvider/>
  );
}

const Counter = () => {
  const {state, dispatch} = useContext(AppContext);
  return (
    <>
      <button onClick={() => dispatch({type: 'INCREMENT'})}>Click me</button>
      <p>You clicked me {state.counter} times</p>
    </>
  );
}