CODEWITHSUNDEEP
javascriptreactjsreact-componentreact-state
Rob Cipolla
Rob Cipolla

Reputation: 3

React component is re-rendering items removed from state

This is a difficult one to explain so I will do my best!

My Goal

I have been learning React and decided to try build a Todo List App from scratch. I wanted to implement a "push notification" system, which when you say mark a todo as complete it will pop up in the bottom left corner saying for example "walk the dog has been updated". Then after a few seconds or so it will be removed from the UI.

Fairly simple Goal, and for the most part I have got it working... BUT... if you quickly mark a few todos as complete they will get removed from the UI and then get re-rendered back in!

I have tried as many different ways of removing items from state as I can think of and even changing where the component is pulled in etc.

This is probably a noobie question, but I am still learning!

Here is a link to a code sandbox, best way I could think of to show where I am at:

Alert Component State/Parent

https://codesandbox.io/s/runtime-night-h4czf?file=/src/components/layout/PageContainer.js

Alert Component

https://codesandbox.io/s/runtime-night-h4czf?file=/src/components/parts/Alert.js

Any help much appreciated!

Upvotes: 0

Views: 57

Answers (3)

Hero Wanders
Hero Wanders

Reputation: 3292

If asynchronous events are happening, the value in the scope of the executed event handler might be out of date.

When updating lists of values, use the updating method which receives the previous state, for example

setAlerts(previousAlerts => {
  const newAlerts = (build new alerts from prev alerts);
  return newAlerts;
});

instead of directly using the alerts you got from useState.

Upvotes: 0

Ray Chan
Ray Chan

Reputation: 1180

In the PageContainer.js, modify this function

const removeAlert = (id) => {
  setAlerts(alerts.filter((alert) => alert.id !== id));
};

to this

const removeAlert = (id) => {
  setAlerts(prev => prev.filter((alert) => alert.id !== id));
};

This will also fix the issue when unchecking completed todos at high speed

Upvotes: 0

Todd Skelton
Todd Skelton

Reputation: 7239

When you call a set function to update state, it will update from the last rendered value. If you want it to update from the last set value, you need to pass the update function instead of just the new values.

For instance, you can change your setTodos in your markComplete function to something like this.

           setTodos(todos => todos.map((todo) => {
                if (id === todo.id) {
                    todo = {
                        ...todo,
                        complete: !todo.complete,
                    };
                }
                return todo;
            }));

https://codesandbox.io/s/jovial-yalow-yd0jz

Upvotes: 1

Related Questions