New Quote in React Option 1 (Provider does the loading, single object for state)

Quotes.tsx

import React, { createContext } from "react";

function QuoteRouter() {
  return (
    // Apollo Provider
    // INTL provider
    // FreatureProvider at router level rather than page level
    <FeatureProvider>
      <NewQuote />
    </FeatureProvider>
  );
}

function NewQuote() {
  //Single object for state
  const [state, setState] = React.useState({
    client: null,
    lineItems: [],
    ///....
  });
  return <QuoteForm state={state} setState={setState} />;
}

function EditQuoteLoader() {
  //useLoadQuote is a custom hook that calls apollo query
  // There will be a loading state
  const { availableFeatures } = useFeatureContext(FeatureContext);
  const { quote, isLoading } = useLoadQuote(availableFeatures);

  return <EditQuote quote={quote} />;
}

function EditQuote({ quote }: { quote: any }) {
  const [state, setState] = React.useState(quote);

  return <QuoteForm state={state} setState={setState} />;
}

function QuoteForm({
  state,
  setState,
}: //only one state and corresponding setter passed to quote form
{
  state: any;
  setState: (state: any) => void;
}) {
  return (
    <Form>
      <ClientPicker state={state} setState={setState} />
      <LineItems state={state} setState={setState} />
      <Button type="submit" />
    </Form>
  );
}

function FeatureProvider(props: { children: React.ReactNode }) {
  //Feature provider directly calls loading hook
  //useLoadAvailableFeatures is a wrapper calling apollo query
  const { availableFeatures, isLoading } = useLoadAvailableFeatures();
  return (
    <FeatureContext.Provider value={availableFeatures}>
      {props.children}
    </FeatureContext.Provider>
  );
}