В чем разница между передачей в setState объекта и функции и зачем вообще передавать функцию?

Передача функции в состояния дает возможность получить предыдущее значение состояния даже если оно еще не ререндерилось.

Пример:

class App extends Component {
  state = {
    counter: 0
  }

  updateCounter = () => {
    this.setState({ counter: this.state.counter + 1});
    this.setState({ counter: this.state.counter + 1});
  }

  render(){
    return (
      <div>
        <button onClick={this.updateCounter}>update</button>
        {this.state.counter}
      </div>
    )
  }
}

Такой код в конечном итоге увеличит счетчик только на единицу. Это похоже на this.setState({ counter: 1});, this.setState({ counter: 1}); поэтому counter становится равным 1, а не 2.

Когда вы передаете объект в setState, React объединяет его со старым состоянием компонента. Если в объекте присутствуют свойства, которые уже существуют в состоянии, то они будут заменены новыми значениями, а остальные свойства останутся неизменными. При этом React может объединять обновления состояния для оптимизации производительности.

Использование функции обратного вызова дает возможность получить предыдущее состояние.

Пример:

class App extends Component {
  state = {
    counter: 0
  };

  updateCounter = () => {
    this.setState((previusState) => ({
      counter: previusState.counter + 1
    }));
    this.setState((previusState) => ({
      counter: previusState.counter + 1
    }));
  };

  render() {
    return (
      <div>
        <button onClick={this.updateCounter}>update</button>
        {this.state.counter}
      </div>
    );
  }
}

Как и было задумано будет увеличивать счетчик на 2, а не на 1.

Когда вы передаете функцию в setState, React вызывает эту функцию, передавая ей текущее состояние в качестве аргумента. Функция должна вернуть новый объект состояния. Этот подход полезен, когда новое состояние зависит от предыдущего. React гарантирует, что вызовы функций setState будут объединены воедино и обработаны последовательно.