Weird error

[michelem09]

We are getting a weird error about memory leak when we browse 2/3 pages of our website, after some seconds we got it telling us:

commons.js:77200 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    in LiveChatLoaderProvider (at layout.js:114)
    in ThemeProvider (at layout.js:88)
    in Layout (at print-on-demand.js:23)
    in PoD (created by HotExportedPoD)
    in AppContainer (created by HotExportedPoD)
    in HotExportedPoD (created by PageRenderer)

[mikedijkstra]

Hi @michelem09 — Can you provide some more details on how you've implemented React Live Chat Loader? It seems like it is being removed when it should stay present.

[michelem09]

Sure this is where it resides, it's out layout.js file used as main container of the app:

    return (
        <ThemeProvider theme={streetlibTheme}>
            <Fragment>
                <ResetCSS/>
                <GlobalStyle/>
                <ContentWrapper>
                    <Sticky top={0} innerZ={9999} activeClass="sticky-nav-active">
                        <DrawerProvider>
                            {greenHero && (<span className="has-green-hero"></span>)}
                            <Navbar location={location}/>
                        </DrawerProvider>
                    </Sticky>
                    {children}
                    
                    {!notesBanner && !directPreFooter && !noTestimonial && (<Testimonial 
                      title={intl.formatMessage({ id: 'testimonial.title' })}
                      data={Data}
                    />)}

                    {appBanner && (<DownloadAppBanner data={Data}/>)}
                    {notesBanner && (<SubscribeNotesBanner data={Data}/>)}
                    {!minimal && (<JoinTrailArea/>)}
                    {directPreFooter && (<DirectForm 
                        title={intl.formatMessage({id: "direct.form.title"})}/>)}
                    <Footer/>
                </ContentWrapper>
                <CookieBanner />
                <LiveChatLoaderProvider providerKey="XXX" provider="helpScout">
                  <HelpScout color="#148EA0" icon="message" horizontalPosition="right" />
                </LiveChatLoaderProvider>
            </Fragment>
        </ThemeProvider>
    );

It's really weird, because to reproduce the bug you have to browse some pages before you can catch it and I would say some random pages.

Probably it's not your fault but I really don't know where to put my hands, do you have any hints?

[devalnor]

This bug appear when we have a rerender of the provider because there is no cleanup of the setTimeout that set the state to context to complete

setTimeout(() => {
   setState('complete')
   onReady()
 }, 2000)

A temp solution is to put <LiveChatLoaderProvider> as root of app

[michelem09]

Thanks I will try.