Hey guys,
I have the following question:

I have a provider using context to provide a global state for my pages, let's say this:

export const StateProvider = ({ children }: ProviderProps) => {
  const [state, setState] = useState({});

  const clearState = () => setState({});

  return (
    <StateProvider.Provider value={{ state, clearState }}>
      {children}
    </StateProvider.Provider>
  );
};

And this provider covers like

app/dashboard
/page_1
/page_2
layout.ts (where I declare the provider to serve the pages under it)

ok this works well, all pages part of this layout have access to this state.

However, I have the following situation:
Since the page_1 e page_2 relay on this state, when would be the moment I can clear this state?
For ex: Imagine that the flow ends in page_2 and I want to reset and back to page_1. If clear while click back the state in page_2 disappear (of course), and if I clear in useEffect of page_1 I have a blinking during the page load.

If both pages uses that state, how to properly reset/or manage this without side-effects or blinking problems?