Solution

[HiBlurryface]

https://HiBlurryface.github.io/react_todo-app-with-api/

[Zibi95]

Array.filter() już zwraca nową tablicę. Spread [...todos] jest niepotrzebny.

[Zibi95]

Here ytou have some good tips for context

https://kentcdodds.com/blog/how-to-use-react-context-effectively

[Zibi95]

use useMemo for this

[Zibi95]

Both contexts create new object on each render

[Zibi95]

Why are you impolrting in each line from the same module it can be squashed into one line

import { useRef, useEffect, useContext, useState } from 'react';

[Zibi95]

Here it should listen for onChange event. onClick z checked will create React warning about controlled component

[Zibi95]

In editTodo, you add todo.id to loadingIds and then (if the title is empty) call deleteTodoFromServer(), which also adds the same todo.id to loadingIds. So the same ID gets added twice. Then editTodo removes the ID in its finally, but deleteTodoFromServer also tries to remove it in its own finally- this creates a race condition where one finally can clear the loading state while the other operation is still in progress.

[Zibi95]

Better name fro this could be patchTodo

[Zibi95]

Suggested change

	const completed = todos.filter(todo => todo.completed);
	const completedCount = completed.length;
	const active = todos.filter(todo => !todo.completed);
	const activeCount = active.length;
	const activeCount = todos.filter(t => !t.completed).length;
	const completedCount = todos.length - activeCount;

[Zibi95]

Each setTodos call inside the loop is a separate state update. In React 18, batching usually covers updates in event handlers, but in async code (after an await) it isn’t guaranteed. It’s better to collect the results first and then call setTodos once:

const deletedIds = results
  .map((r, i) => (r.status === "fulfilled" ? idsToDelete[i] : null))
  .filter(Boolean);

setTodos((prev) => prev.filter((t) => !deletedIds.includes(t.id)));