I’m not sure how ReactJs is updating the DOM. In the case bellow, I have a table that display an array that comes from a service like this:
const [dailySchedule, setDailySchedule] = useState([]);
const [isLoading, setIsLoading] = useAtom(loadingAtom);
useEffect(() => {
setIsLoading(true);
myService.getSchedule(new Date())
.then(data => {
setDailySchedule(data);
setIsLoading(false);
});
}, []);
Then, I display this date in a table:
...
<tbody>
{dailySchedule.map((row, i) => (
<tr key={i}>
<td>
<ScheduleActions
schedule={row}
someAction={someActionHandler}>
</ScheduleActions>
</td>
<td>{item.name}</td>
<td>{item.foo}</td>
...
someActionHandler:
const someActionHandler= (row) => {
myService.someAction(row.id)
.then((response) => {
row.foo = response.data != "" ? response.data : null;
setDailySchedule([...dailySchedule]);
}).catch((error) => {
toast.error(error.response.data);
});
}
What’s getting updated in my page? Is it the entire table or only the row that is changing in someActionHandler?