如何从非反应环境中更新组件？

Question

I have most of my html code generated by server, but some things are much faster and easier to do in client with React so I need to create Component not in #root , but somewhere deep inside of my page. The nature of my application is that after the page is loaded it needs to retrieve data via API and it does it 5-6 times in a row with some small pause between each of requests. This normally takes from 10 to 30 seconds.

On the first request I can just check if element is not rendered yet and render it normally:

if('sorter' in window === false) {
    window.sorter = preactRender(<Sorter filterBoundaries={window.filters} />, document.querySelector('.sorter-holder'))
}

But then I need to send new props to <Sorter /> in order to update it with newly arrived data. But how could I do it? I tried to do window.sorter.forceUpdate() , but it doesn't work because React's render method returns Element , which obviously doesn't have method forceUpdate() .

Maybe it would be a lot easier to remove old component and render it anew from the scratch? Even if it's anti-patern.

Answer 1

I just sorted it out simply. I added to my application a global variable indicating if sorter needs and update:

if('sorter' in window === false) {
    window.sorter = preactRender(<Sorter filterBoundaries={window.filters} />, document.querySelector('.sorter-holder'))
} else {
    window.sorterUpdatePending = true
}

Then in my component I created an interval to check whether sorter update is pending or not. When it is - force an update and reset global variable. And when search is finished it clears the interval.

componentDidMount() {
    var checkInterval = setInterval(() => {
        if(window.sorterUpdatePending === true) {
            this.forceUpdate()
            window.sorterUpdatePending = false
        }

        if(window.isSearching === false) {
            clearInterval(checkInterval)
        }
    }, 100)
}