<DrizzleProvider> some incompatibility when integrating with <Route> components

[cwang25]

Hi,

Recently, we're working some DApp project (love Drizzle !).
But, we noticed that when we uses DrizzleProvider under Route components, some misbehavior happens.

Have tried two approach:

1. Using one DrizzleProvider in each sub component in Route

<Router>
     <Route path='/DApp/Path'>
          <DrizzleProvider>
               <DrizzleConsumer>
                   ... // Project code here
               </DrizzleConsumer> 
         </DrizzleProvider>
     </Route>
</Router>

Got errors that the Provider states will never update, even use code to force refresh the state will stay on "uninitialized." Until we manually refresh browser via F5 to have "initialized" state. (Which is not ideal for user experience)

2. Usng DrizzleProvider as one shared global provider

 <DrizzleProvider>
    <Router>
          <Route path='/DApp/Path'>
                 <DrizzleConsumer>
                       ... // Project code here
                 </DrizzleConsumer> 
           </Route>
      </Router>
</DrizzleProvider>

// ... OR ....

<Router>
     <DrizzleProvider>
       <Route path='/DApp/Path'>
            <DrizzleConsumer>
                 ... // Project code here
            </DrizzleConsumer> 
       </Route>
     </DrizzleProvider>
</Router>

Never able to get this one work, when ever the page is loaded. Will always get into "Maximum update depth exceeded" error. Which is causing the parent page keep on re-rendering indefinitely.

Sort of running out of ideas about what causes incompatibility between DrizzleProvider and Route components.
What would be a workaround for this?

Thank you very much for your time and your help!

[cwang25]

Was wondering if anyone got into this errors ?

After some trials, it seems the legacy components won't have this issue 🤔