Docs > API > useFetchers > not using useState in example code

[DrummerHead]

Reading the useFetchers' example code I notice that the state completedTasks inside the component is a javascript const and not contained in a useState hook.

Inlined here for your viewing pleasure:

function ProjectTaskCount({ project }) {
  const fetchers = useFetchers();
  let completedTasks = 0;

  // 1) Find my task's submissions
  const myFetchers = new Map();
  for (const f of fetchers) {
    if (
      f.submission &&
      f.submission.action.startsWith(
        `/projects/${project.id}/task`
      )
    ) {
      const taskId = f.submission.formData.get("id");
      myFetchers.set(
        parseInt(taskId),
        f.submission.formData.get("complete") === "on"
      );
    }
  }

  for (const task of project.tasks) {
    // 2) use the optimistic version
    if (myFetchers.has(task.id)) {
      if (myFetchers.get(task.id)) {
        completedTasks++;
      }
    }
    // 3) use the normal version
    else if (task.complete) {
      completedTasks++;
    }
  }

  return (
    <small>
      {completedTasks}/{project.tasks.length}
    </small>
  );
}

Doesn't this mean that the state change will not be recognized by React and UI not updated? Or perhaps I'm misunderstanding or not aware of something?

If the change is desired, I can do a PR with it 👍

Thanks!

[hollandThomas]

That's what you could call "derived state": It depends on props.project and fetchers and thus will be recalculated on each render. If it didn't depend on state or props, you'd be right.

For detailed information, I recommend reading Don't Sync State. Derive It!