React Search UI is remounting its children on state or prop update

Elastic Search
1

We are experiencing an issue with the search UI, whenever we perform any action on search ui, it unmount and remount its children. Basically it is remounting its children again n again on any state changes.

Sample code :

 <SearchProvider config={this.config}>
    <WithSearch>
          <TestComponent />
    </WithSearch>
</SearchProvider>

import React from "react";
export class TestComponent extends React.Component{
    componentDidMount(){
        console.log('mounting...')
    }
    render(){
         return  <div>Test Component in action.</div>;
    }
}

-----------output in console----------
mounting....
mounting....

any action on search ui component will force remounting TestComponent
mounting....
mounting....
...

@JasonStoltz could you please help us resolving the issue, we want to prevent multiple unmounting and mounting of TestComponent from the dom.

2

Could someone please help me?

3

Hey Ranjeet - sorry for the very late response on this. I've pinged @JasonStoltz for back-up, but my initial gut instinct is that we're unlikely to make a change/bugfix in the near future to this behavior, although you can certainly open an issue in the repo for it.

In the meanwhile, if it's feasible for your codebase, could I suggest moving away from React class components/componentDidMount and instead using React functional components combined with useEffect? useEffect allows you to filter reactions to changes by specific prop or variables, which might be able to help you with working around componentDidMount.

4

@ranjeet.tiwari Try looking at the https://github.com/elastic/search-ui/blob/master/ADVANCED.md#mapcontexttoprops option. This should let you specify which items from state you're using, and will ONLY re-render when those state items are updated.

As a side note, I'm still unsure why it's causing a full re-mount as it is currently. :thinking:

5

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.