[React] 왜 렌더링이 한 걸음 씩 느린것인가.

문제 발생

간트차트에서 데이트 피커로 날짜를 수정하면 db에 저장하는 로직을 작성했다. 처음에 이상한 점을 발견한 건 db에 저장이 된다고 하는데 데이터가 변환이 안되는 거 같았다. 그래서 console에 찍어보니, 데이터가 바로 이전것이 저장되는게 아닌가.?

문제 코드

// 날짜 변경 함수
    const handleDateChange = async (task, key, newDate) => {
        // key라고 입력한게 새로운 object가 되었다.
        setTasks((prevTasks) => prevTasks.map((t) => t.id === task.id ? {...t, [key]: newDate } : t))
        console.log('task', task);
        await updateGoalData(task)
    };

원인

저곳에서 task는 내가 선택한 task를 의미한다. 즉 값이 바뀌는건 setTasks 라는 setState를 통해서 변경되는데, setState로 변경된 값이 아니라, 그 전값인 task값을 변경하는 어리석은 일을 한것이다. 근데 화면에서는 바로바로 바뀐게 보이니 변경됫다고 착각했던것! 그래서 변경된 데이터를 넣어주었다.

해결 코드

//해결한 코드
  const handleDateChange = async (task, key, newDate) => {
        // 업데이트할 새로운 task 객체 생성
        const updatedTask = { ...task, [key]: newDate };

        // 상태를 업데이트
        setTasks((prevTasks) => prevTasks.map((t) => t.id === task.id ? updatedTask : t));

        // 업데이트된 값으로 updateGoalData 호출
        console.log('Updated Task:', updatedTask);
        await updateGoalData(updatedTask);
    };