reactjs - Todo list flickering checkboxes (React, Typescript, Mobx) - Stack Overflow

admin管理员组

文章数量:1345189

I am designing a todo list as an exercise. I have a client side copy of the todos list that updates with a fetchTodos function after every network request. I have simulated network lag with a setTimout function after every fetch, before the data is stored in my local todos list.

When I toggle too many different todos (each from unfinished to finished) too quickly, each todo flickers, going from finished to unfinished and back to finished.

I understand that happens because the first toggle updates my todos after the second toggle is triggered. So until the second toggle updates the todos in turn, there is that flicker.

My question is, what is the best way to eliminate that flicker?

//My fetchTodos is here:

  async fetchTodos() {
    const response = await fetch('/todos');
    if (!response.ok) {
      console.error('Failed to fetch tasks');
      return;
    }
    const todos: Task[] = await response.json();
    await new Promise(resolve => setTimeout(resolve, 1000));
    //this.todos.splice(0, this.todos.length, ...todos);

    this.storeTodos(todos);
  }

  storeTodos(todos: Task[]) {
    for (let todo of todos) {
      this.todos[todo.id] = todo;
    }

    for (let id of Object.keys(this.todos)) {
      if (!todos.find(todo => todo.id === +id)) {
        delete this.todos[+id];
      }
    }

  }

//My toggleTodo is here:

 toggleTodo(id: number) {
    const task = this.findTask(id);

    if (task) {
      task.finished = !task.finished;
      fetch(`/todo/${id}`, {
        method: 'PATCH',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(task)
      }).then(response => {
        if (response.ok) {
          this.fetchTodos(); // Refetch todos after successful update
        } else {
          console.error('Failed to update task');
        }
      }).catch(error => {
        console.error('Failed to update task', error);
      });
    }
  }

I am designing a todo list as an exercise. I have a client side copy of the todos list that updates with a fetchTodos function after every network request. I have simulated network lag with a setTimout function after every fetch, before the data is stored in my local todos list.

When I toggle too many different todos (each from unfinished to finished) too quickly, each todo flickers, going from finished to unfinished and back to finished.

I understand that happens because the first toggle updates my todos after the second toggle is triggered. So until the second toggle updates the todos in turn, there is that flicker.

My question is, what is the best way to eliminate that flicker?

//My fetchTodos is here:

  async fetchTodos() {
    const response = await fetch('/todos');
    if (!response.ok) {
      console.error('Failed to fetch tasks');
      return;
    }
    const todos: Task[] = await response.json();
    await new Promise(resolve => setTimeout(resolve, 1000));
    //this.todos.splice(0, this.todos.length, ...todos);

    this.storeTodos(todos);
  }

  storeTodos(todos: Task[]) {
    for (let todo of todos) {
      this.todos[todo.id] = todo;
    }

    for (let id of Object.keys(this.todos)) {
      if (!todos.find(todo => todo.id === +id)) {
        delete this.todos[+id];
      }
    }

  }

//My toggleTodo is here:

 toggleTodo(id: number) {
    const task = this.findTask(id);

    if (task) {
      task.finished = !task.finished;
      fetch(`/todo/${id}`, {
        method: 'PATCH',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(task)
      }).then(response => {
        if (response.ok) {
          this.fetchTodos(); // Refetch todos after successful update
        } else {
          console.error('Failed to update task');
        }
      }).catch(error => {
        console.error('Failed to update task', error);
      });
    }
  }

• reactjs
• typescript
• mobx-react

Share Improve this question Follow asked Feb 21 at 11:20 Fotis KakogiannisFotis Kakogiannis 111 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

The flickering happens because fetchTodos updates the list after your local state changes, causing a brief mismatch.

I think maybe Updating the state immediately before making the request helps,

like...

   toggleTodo(id: number) {
  const task = this.findTask(id);
   if (!task) return;

    task.finished = !task.finished; // Instant UI update

     fetch(`/todo/${id}`, { 
       method: 'PATCH', 
        headers: { 'Content-Type': 'application/json' }, 
         body: JSON.stringify(task) 
   }).catch(() => task.finished = !task.finished); // Revert on failure
  }

本文标签： reactjsTodo list flickering checkboxes (ReactTypescriptMobx)Stack Overflow