Is it possible to have a ref to the Provider? about constate

[weltenwort]

I've come across this a few times while working on https://github.com/elastic/kibana. The solution I used was to decompose the App, providers and content into several components so the context value can be accessed via the hook as usual:

const App = () => (
  <AppProviders initialValue="a">
    <AppEffects />
    <AppContent />
  </AppProviders>
)

const AppProviders = ({ children, initialValue }) => {
  <ValueProvider initialValue={initialValue}>
    {children}
  </ValueProvider>
}

const AppEffects = () => {
  const [, setValue] = useValueContext();

  useEffect(() => {
    setTimeout(() => {
       setValue('b');
    }, 2000);
  }, [setValue]);
}

I find that pretty readable without the need for a more complex API. @awkpagong, could that work for you?

[awkpagong]

@diegohaz ok I will try @weltenwort's suggestion then. It's a bit more verbose, but I agree it will keep the API simple. Thanks for the suggestions guys!

[diegohaz]

I've never seen that. Maybe something like this?

function useValueWithRef({ providerRef }) {
  ...
}

...

<ValueProvider providerRef={ref} />

[awkpagong]

I've never seen that. Maybe something like this?

function useValueWithRef({ providerRef }) {
  ...
}

...

<ValueProvider providerRef={ref} />

@diegohaz thanks for the suggestion. I will try that. And thanks for all your amazing work on this package!

[diegohaz]

I still don't understand the use case. But, If @weltenwort's solution solves your problem, it's preferable.