react context template

import React, { FC, Dispatch, SetStateAction, createContext, useState } from "react";

interface Data {
  foo: string;
}

type SetData = Dispatch<SetStateAction<Data>>;

export const FooContext = createContext<Data>({ foo: "" });
export const SetFooContext = createContext<SetData>(() => Promise.resolve());

interface Props {
  bar: number;
}

export const Provider: FC<Props> = ({ children }) => {
  const [data, setData] = useState<Data>({ foo: "" });

  return (
    <FooContext.Provider value={data}>
      <SetFooContext.Provider value={setData}>{children}</SetFooContext.Provider>
    </FooContext.Provider>
  );
};