Why is array not updating after sorting in React Hooks?

Question

I am new to React. The array in state is updating only once after sort function. Why is it not updated again after the sort function is triggered second time?

const [cases, setCases] = useState([1, 2, 3, 4, 5]);

let sortDown = true
let sorted = []

    function sort(){
        const copy = [...cases]
        if(sortDown){
            sorted = copy.sort(function(a, b){
                return b - a 
            })
        } else {
            sorted = copy.sort(function(a, b){
                return a - b
            })
        }
        sortDown = !sortDown
        setCases(sorted)
    }

Sort directly manipulate the array. You don't need to keep the sorted array into a new array. the copy array is sorted. So use setCases(copy) instead. — Sajeeb Ahamed
– Sajeeb Ahamed, Commented Apr 10, 2020 at 12:04
No one can't answer "why the sort is triggered twice" without showing how you call this function. — Dennis Vash
– Dennis Vash, Commented Apr 10, 2020 at 12:14

K.Lakwa · Accepted Answer · 2020-04-10 12:59:58Z

14

React rerenders the component when props or state changed. In your case, you declare sorted array and then you pass it to setCases. So for the first time setCases takes sorted array and it is new value for that. Then you sort the values again and you mutate the sorted array and pass it again to setCases. But setCases doesn't consider sorted as a new array because it was mutated so the reference was not changed. For React it is still the same array you passed at first time. You need to return new array and then pass it to setCases.

The other thing you should do is to store sortDown in state. Otherwise it will be reintialized every render. Following code should work in your case:

    const [cases, setCases] = useState([1, 2, 3, 4, 5]);
    const [sortDown, setSortDown] = useState(true)

        function sort(){
            const copy = [...cases] // create copy of cases array (new array is created each time function is called)
            if(sortDown){
                copy.sort(function(a, b){ // mutate copy array
                    return b - a 
                })
            } else {
                copy.sort(function(a, b){
                    return a - b
                })
            }
            setSortDown(!sortDown); // set new value for sortDown
            setCases(copy); // pass array to setCases
        }

answered Apr 10, 2020 at 12:59

K.Lakwa

1563 bronze badges

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

1 Comment

Kid Over a year ago

setSortDown(!sortDown); - avoid this

Kid · Accepted Answer · 2020-04-10 12:27:44Z

5

You should be using a state variable to decide sortType.

otherwise it'll be reinitialized every render.

  const [cases, setCases] = useState([1, 2, 3, 4, 5]);
  const [sortDown, setSortDown] = useState(true);

  function sort() {
    const copy = [...cases];
    if (sortDown) {
      copy.sort(function(a, b) {
        return b - a;
      });
    } else {
      copy.sort(function(a, b) {
        return a - b;
      });
    }
    setSortDown((prev) => !prev);
    setCases(copy);
  }

edited Apr 10, 2020 at 12:27

answered Apr 10, 2020 at 12:07

Kid

1,2602 gold badges16 silver badges32 bronze badges

3 Comments

GalAbra Over a year ago

What changes did you make? Please explain your answer

Kid Over a year ago

sortDown is state variable now.

HMR Over a year ago

Sorting can be made simpler when you use direction that can either be 1 or -1: [...cases].sort((a, b) => (a - b) * direction)

Collectives™ on Stack Overflow

Why is array not updating after sorting in React Hooks?

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related