using useEffect, setState and Sort for Array

Question

I am using React Hooks to sort an array list by the 'points' item after I update an object item. After much tinkering with the code I managed to sort the Array in the 'Sorted' variable using useMemo (which I confess I didn’t understand very well how it works).

But now I can’t use useState setStudents(Sorted) to transfer this variable to the interface. If I put setStudents(Sorted) inside the useEffect or changePontuation function it ignores changing the 'points' variable'

function App() {
  const [students, setStudents] = useState([
    { name: 'Letícia Lima', id: 1, points: 12090 },
    { name: 'Flávia Augusto', id: 2, points: 11276 },
    { name: 'Douglas Adams', id: 3, points: 11181 },
    { name: 'Carina Rosa', id: 4, points: 11019 },
    { name: 'Amanda Nunes', id: 5, points: 10981 },
    { name: 'Fabrício Frazoli', id: 6, points: 10756 },
  ]);

  useEffect(() => {
    const timer = setTimeout(() => {
      changePontuation();
    }, 2000);
    console.log(sorted);
  }, []);

  function changePontuation() {
    let changedStudents = [...students];
    changedStudents[2] = { ...students[2], points: 11297 };
    setStudents(changedStudents);
    console.log('executando função interval');
  }
  const sorted = React.useMemo(() =>
    students.slice().sort((a, b) => b.points - a.points)
  );
  console.log(sorted);

Answer 1

The state is being changed normally and useMemo and Slice I believe they are unnecessary:

https://codesandbox.io/s/stackoverflow-students-kj4lt?file=/src/App.js:583-584

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [students, setStudents] = useState([
    { name: "Letícia Lima", id: 1, points: 12090 },
    { name: "Flávia Augusto", id: 2, points: 11276 },
    { name: "Douglas Adams", id: 3, points: 11181 },
    { name: "Carina Rosa", id: 4, points: 11019 },
    { name: "Amanda Nunes", id: 5, points: 10981 },
    { name: "Fabrício Frazoli", id: 6, points: 10756 }
  ]);

  useEffect(() => {
    const timer = setTimeout(() => {
      changePontuation();
    }, 2000);
  }, []);

  function changePontuation() {
    let changedStudents = [...students];
    changedStudents[2] = { ...students[2], points: 11297 };
    setStudents(changedStudents);
    console.log("executando função interval");
  }

  const sorted = students.sort((a, b) => b.points - a.points);

  const createView = (student) => {
    const { id, name, points } = student;

    return (
      <p key={id}>
        {name}
        {points}
      </p>
    );
  };

  return <div className="App">{students.map(createView)}</div>;
}