CODEWITHSUNDEEP
reactjsredux
Sunil tc
Sunil tc

Reputation: 2602

How to add new data to state without data getting refreshed in react

I'm rendering data from api, i'm adding load more option to get more data. But while new data is rendered, component is getting refreshed, as state changes.

How can I solve this ?

This is my code :

export  const newDataReducer = (state= InitialState , action = null) => {
    switch(action.type) {
    case types.GET_NEW_DATA:
        let myData;
        myData = _.unionBy(state.data, action.payload.data, "id");
        return Object.assign({}, state, {isLoading:false, data:myData, notification: "Success" });
    }
}

My component :

_.map(myData, (newData, index) => {
    return (
        newData.id;
    );
});

Thank you

Upvotes: 0

Views: 57

Answers (2)

hazardous
hazardous

Reputation: 10837

You may have a premature optimization situation here. Since the only code to look at here is a reducer, there's no telling how much performance impact your state changes are having in your components. Without having the React component's render code to look at, I can only recommend you to not fix anything. React does a good job of vdom diffing and mostly component rendering doesnt suffer from frequent state changes.

Upvotes: 0

thedude
thedude

Reputation: 9812

You can add some logic to shouldComponentUpdate lifecycle method to prevent the unwanted rendering.

Upvotes: 1

Related Questions