I am new to react.js so troubles caught me. I have small todo-list app connected with mockAPI. Application gets todo list data from API. As required, I call API inside componentDidMount() instead of constructor. However, API is called twice (only after page reloaded, not data manipulation as put\delete data to API). Any errors or warnings in console.

class App extends Component {
  todoServ = new TodoServer();
  
  constructor(props) {
    super(props);
    this.state = { data: [], maxId: 0 };
  }

  /*
    code to add\delete\done todo item;
  */

  findCurrentMaxId = (data) => {
    const idList = [];
    data.forEach(todo => {
      idList.push(todo.id);
    });
    return Math.max(...idList);
  }

  updateTodoData = (data) => {
    const maxId = this.findCurrentMaxId(data);
    this.setState({ data, maxId });
  }

  getTodoData = () => {
    this.todoServ
      .getTodoList()
      .then(this.updateTodoData)
      .catch(this.errorTodoData);
  }

  componentDidMount() {
    this.getTodoData();
  }

  render() {
    return (
      <div className="app">
        <div className="content">
          <AddTodoListItem onAddNewTodoItemData={this.onAddNewTodoItemData}/>
          <TodoList
            data={this.state.data}
            onDoneTodoItemData={this.onDoneTodoItemData}
            onDeleteTodoItemData={this.onDeleteTodoItemData} />
        </div>
      </div>
    )
  }
}

export default App;

Console:

This is the service fetches data.

class TodoService {
    #url = `https://*secret*/todoslist/todo`;

    async getResource(url) {
        let res = await fetch(url);
        if (!res.ok) {
            throw new Error(`Could not fetch ${url}, status: ${res.status}`);
        }
        return await res.json();
    }

    async getTodoList() {
        const res = await this.getResource(this.#url);
        console.log('GET', res);
        return res;
    }
}

export default TodoService;

Thanks for the advices.