Cant perform a react state update on an unmounted component

Open Q&A
#1

error1
error1383×737 41.9 KB

I am using algolia InstantSearch, and I have implemented a Hits component, where I can get data from my index, I can display the name, but when I try to show other attributes like image or brand name or company name, then I can not change the page (if I only have name it works and I can change pages) I get this warning which tells me “Cant perform a react state update on an unmounted component”,

what do I have to do?

#2

SO i have this:

<InstantSearch searchClient={searchClient} indexName="myDB">

          <SearchBox />

          <ScrollView>

            <Configure clickAnalytics />

            <CustomHits />

            <ConnectedPagination padding={5} />

          </ScrollView>

        </InstantSearch>

when I use this I can change the pages and go to the next page and go on like that (its very slow), but when I use this:

InstantSearch searchClient={searchClient} indexName="myDB">

          <SearchBox />

          <ScrollView>

            <Configure clickAnalytics />

            <CustomHits />

          </ScrollView>

          <View

            style={{

              flex: 1,

              marginTop: -50,

              top: 50,

              flexDirection: "row",

              justifyContent: "space-between",

              marginBottom: 20,

              borderTopWidth: 3,

              borderTopColor: "#aaa",

            }}

          >

            <ConnectedPagination padding={5} />

          </View>

        </InstantSearch>

whith this code, I cant change the pages and some times I get the warning on the picture, how can I get rid of this?
is something that I am doing wrong?

#3

Hi @najafisaeed,

This is a React issue that usually comes from a lifecycle method (or an effect) calling setState on a component unmounted (or going to be unmounted). Unfortunately, without the code (or an example) it would be complicated for us to find the root cause of the issue.

I have tried to replicate the problem locally without luck. Would be possible to have a live example? It would help to better understand the issue. We rely on CodeSandbox for live examples, but with React Native it is probably simpler to create a repo with a demo.

Thank you!