reactjs - How to prevent reloading the entire component on updating some firestore documents?

Question

I am trying to build a drag and drop to do list...After every drag and drop position of each element is updated in firebase...This is the function doing so

unfinishedTodos.forEach((each, index) => {
 firebaseApp.firestore().collection("todos").doc(each.id).update({
   index: index})
});

But after the update function is run the entire component is reloading..The problem is that since there are lots of items in the list I have to again scroll to find the item i was working with...I want to make sure that the firestore documents get updated but the page should not reload...How can I can prevent this reload? Update: I found out what went wrong...Actually I was using the onSnapshot function of firebase...So on every change it got triggered and reloaded the data...

question from:https://stackoverflow.com/questions/65858735/how-to-prevent-reloading-the-entire-component-on-updating-some-firestore-documen

Answer 1

React updates a component whenever any state or props variable changes.

So, to prevent a re-render conditionally, you can use this lifecycle function (returning false means avoiding a re-render):

class component

shouldComponentUpdate(prevState, prevProps) {
    if (this.state.someVariable !== prevState.someVariable || 
        this.props.someVariable !== prevProps.someVariable) {
        return false;
    }

    return true;
}

functional component

React.memo(MyComponent, (props, nextProps)=> {
    if(this.state.someVariable !== prevState.someVariable) {
        // if don't re-render/update
        return true
    }

    //...
})