How to avoid rerenders when using refetch ?

// api.ts

const [todos, { mutate, refetch }] = createResource(fetchTodos)

async function fetchTodos(): Promise<Todo[]> {
  const api = useApi()
  return await api<Todo[]>('/user/todos')
}

export async function createTodo(
  todo: { title: string; description: string; dueTime: Date },
): Promise<Todo> {
  // ... (constructing request)

  const createdTodo = await api<Todo>(
    '/todos',
    { method: 'POST', body: requestBody },
  )

  mutate(todos => [...todos ?? [], createdTodo])
  refetch()  // <- this call causes the re-render

  return createdTodo
}

export { todos as userTodos }

// TodoList.tsx

// ...

const TodoListPart: Component<{ name: string; status: TodoStatus }> = (props) => {
  const filteredTodos = () => userTodos()?.filter(todo => todo.status === props.status) ?? []

  return (
    <div class="mt-8">
      <h2 class="text-lg font-bold">{props.name}</h2>
      <For each={filteredTodos()} fallback={<EmptyPart />}>
        {todo => <TodoItem title={todo.title} status={todo.status} />}
      </For>
    </div>
  )
}

const TodosList: Component = () => {
  return (
    <Suspense fallback={<Loading />}>
      <TodoListPart name="Not started" status={TodoStatus.NOT_STARTED} />
      <TodoListPart name="Todo" status={TodoStatus.TODO} />
      <TodoListPart name="In progress" status={TodoStatus.IN_PROGRESS} />
      <TodoListPart name="Done" status={TodoStatus.DONE} />
    </Suspense>
  )
}

export default TodosList