How to prevent React from rendering twice setState function?

Question

I called a function that changes the state of a boolean property of an object, but since React is rendering my SetState function twice, the value goes from False to True and then from True to False, so i end up getting the same value i had before calling the function.

const updateCheck = () => {
    setTodoList((prev) => {
      const prevAux = [...prev];
      const pos = prevAux.indexOf(item);
      prevAux[pos].checked = !prevAux[pos].checked;
      return prevAux;
    });

This is where i call the function from:

<div
  onClick={updateCheck}
  className={
    item.text !== ""
      ? `${css.liButton} ${css.check} ${
          item.checked ? css["check-true"] : css["check-false"]
        }`
      : css.none
  }
>
  <FontAwesomeIcon className={css.icon} icon="fa-check"></FontAwesomeIcon>
</div>

Does someone know how i can solve it or whether i'm making a mistake?

Can you show us how you call this code? If it's from, say, a click event, i would not expect it to be called twice. — Nicholas Tower
– Nicholas Tower, Commented Jan 23, 2023 at 20:16

Sunamin34 · Accepted Answer · 2023-01-23 20:21:29Z

1

Try this implementation:

setTodoList((prev) => {
  return prev.map((todo) => {
    if (todo === item) {
      return { ...todo, checked: !todo.checked };
    }
    return todo;
  });
});

Let me know if it worked!

answered Jan 23, 2023 at 20:21

Sunamin34

4283 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Redux Zmbs Over a year ago

It worked!! Thanks! But why was my way wrong?

Sunamin34 Over a year ago

You didn't have the (todo === item) condition I presume. This is limiting the number of renders to 1: When todo === item

Collectives™ on Stack Overflow

How to prevent React from rendering twice setState function?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related