Как задать порядок изменения состояний в React?

Question

[Евгений Обыкновенный]

Пусть есть каталог товаров с фильтром. При изменении одних параметров фильра сразу должен вызваться поиск, при изменении других не должен вызваться поиск. Также поиск вызвается по нажатии кнопки. Проблема в том, что поиск вызвается до того, как параметр изменится. Как сделать так, чтобы поиск происходил только после изменения параметров? Как задать порядок изменения состояний в React? Написал простой пример, иллюстрирующий ситуацию.

function App() {
  const [result, setResult] = useState('-');
  const [params, setParams] = useState({param1: false, param2: false});

  async function search() {
    // получаем с сервера какие-то результаты, зависящие от param
    const result = `${params.param1}+${params.param2}`;
    setResult(result);
  }

  function handler1() {
    setParams(params => ({...params, param1: !params.param1}));
    search();
  }

  function handler2() {
    setParams(params => ({...params, param2: !params.param2}));
  }

  function handlerSubmit() {
    search();
  }

  return (
    <div>
      <div>{'result: ' + JSON.stringify(result)}</div>
      <div>{'params: ' + JSON.stringify(params)}</div>
      <form onSubmit={handlerSubmit}>
        <label><input type='checkbox' checked={params.param1} onChange={handler1} />Пункт 1</label>
        <label><input type='checkbox' checked={params.param2} onChange={handler2} />Пункт 2</label>
        <button type='submit'>Найти</button>
      </form>
    </div>
  );
}

upd: Думал юзать useEffect. Но useEffect, следящий за params, будет вызывать поиск при каждом изменении params. Как в useEffect отличать ситуации, когда надо вызывать поиск, а когда нет?
Думал в самом params ставить флаг о том, нужно ли вызывать поиск. Но тогда будет зацикливание. В useEffect будет меняться params, потом изменение params будет снова вызывать useEffect

Comments

[WbICHA]

Передавай params аргументом в сеарч. В случае хэндлеров передавай новый стейт прям из калбека сетстейта.

Answer 1

[SidWonder]

Самый простой вариант - юзать хук useEffect в котором отслеживать изменения стейта и вызывать функцию поиска

Comments

[Евгений Обыкновенный]

Думал юзать useEffect. Но useEffect, следящий за params, будет вызывать поиск при каждом изменении params. Как в useEffect отличать ситуации, когда надо вызывать поиск, а когда нет?
Думал в самом params ставить флаг о том, нужно ли вызывать поиск. Но тогда будет зацикливание. В useEffect будет меняться params, потом изменение params будет снова вызывать useEffect