Sort the obj in array By React useEffect method

Question

I only paste a part of my React Code here, I have an array in my State, it can be updated and added the new array from browser.

My question is I want that array can be sorted from smallest to greatest on the time values and output to console.log, when the array was updated, how can I make it sort correctly by useEffect method?

The array structure is like the following code, the other part just control the UI updating I haven’t post there because those parts do not affect that sorting function.

const [rows, setRows] = useState([ 
{time: 3, msg:”there is the first msg”},
{time: 6, msg:”2nd msg”},
{time:11, msg:”do you have any question?”}
]);

Nikita Madeev · Accepted Answer · 2020-07-20 10:11:33Z

4

You can use useMemo which will sort the array only when rows changes

const [rows, setRows] = React.useState([
    { time: 3, msg: 'there is the first msg' },
    { time: 6, msg: '2nd msg' },
    { time: 11, msg: 'do you have any question?' },
]);

const sorted = React.useMemo(() => rows.slice().sort((a, b) => a.time - b.time), [rows]);

console.log(sorted);

but in most cases react is very fast and you can sort the array every render and don't worry about performance

const sorted = rows.slice().sort((a, b) => a.time - b.time);

answered Jul 20, 2020 at 10:11

Nikita Madeev

4,49012 silver badges23 bronze badges

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

Comments

Muhammad Ali · Accepted Answer · 2020-07-20 15:04:33Z

1

You can use useEffect and add rows in its dependencies array, so it'll watch whenever rows is updated. There are two ways to achieve this:

Create a new state variable to save the sorted array

const [sortedRows, setSortedRows] = useState([])
useEffect(() => {
  const _sortedRows = [...rows].sort((a, b) => a.time - b.time); // as sort mutates the array, thats why created new array through spread operator
  setSortedRows(_sortedRows);
}, [rows])

Use useMemo hook:

const sortedRows = React.useMemo(() => [...rows].sort((a, b) => a.time - b.time), [rows])

edited Jul 20, 2020 at 15:04

answered Jul 20, 2020 at 10:12

Muhammad Ali

2,6582 gold badges18 silver badges22 bronze badges

1 Comment

Nikita Madeev Over a year ago

get infinite rendering, because setRows set new array rows, useEffect called because rows changed :)

Collectives™ on Stack Overflow

Sort the obj in array By React useEffect method

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related