Конфликты между useEffect в React

В общем, ключевым моментом здесь является перемещение состояния page до родительского компонента и изменение страницы на 0 всякий раз, когда вы меняете фильтры. Вы можете сделать это либо с useState, либо с useReducer.

Причина, по которой он работает с useState (т.е. есть только один повторный рендеринг), заключается в том, что React меняет состояние пакетов в обработчиках событий, если бы этого не было, вы все равно получили бы два вызова API. CodeSandbox

const PaginationComponent = ({ page, minPrice, maxPrice, setPage }) => {
  const [items, setItems] = useState([]);

  useEffect(() => {
    get(page, minPrice, maxPrice).then(response => setItems(response));
  }, [page, minPrice, maxPrice]);

  return (
    <div>
      {items.map(item => (
        <div key={item.id}>
          {item.id}, {item.name}, ${item.price}
        </div>
      ))}
      <div>Page: {page}</div>
      <button onClick={() => setPage(v => v - 1)}>back</button>
      <button onClick={() => setPage(v => v + 1)}>next</button>
    </div>
  );
};

const App = () => {
  const [page, setPage] = useState(0);
  const [minPrice, setMinPrice] = useState(25);
  const [maxPrice, setMaxPrice] = useState(50);

  return (
    <div>
      <div>
        <label>Min price:</label>
        <input
          value={minPrice}
          onChange={event => {
            const { value } = event.target;
            setMinPrice(parseInt(value, 10));
            setPage(0);
          }}
        />
      </div>
      <div>
        <label>Max price:</label>
        <input
          value={maxPrice}
          onChange={event => {
            const { value } = event.target;
            setMaxPrice(parseInt(value, 10));
            setPage(0);
          }}
        />
      </div>

      <PaginationComponent minPrice={minPrice} maxPrice={maxPrice} page={page} setPage={setPage} />
    </div>
  );
};

export default App;

Другое решение - использовать useReducer, который более прозрачен, но также, как обычно с редукторами, немного тяжелее для шаблона. Этот пример ведет себя немного иначе, потому что есть кнопка «установить фильтры», которая изменяет состояние, которое передается компоненту разбиения на страницы, немного более «реальный» сценарий IMO. CodeSandbox

const PaginationComponent = ({ tableConfig, setPage }) => {
  const [items, setItems] = useState([]);

  useEffect(() => {
    const { page, minPrice, maxPrice } = tableConfig;
    get(page, minPrice, maxPrice).then(response => setItems(response));
  }, [tableConfig]);

  return (
    <div>
      {items.map(item => (
        <div key={item.id}>
          {item.id}, {item.name}, ${item.price}
        </div>
      ))}
      <div>Page: {tableConfig.page}</div>
      <button onClick={() => setPage(v => v - 1)}>back</button>
      <button onClick={() => setPage(v => v + 1)}>next</button>
    </div>
  );
};

const tableStateReducer = (state, action) => {
  if (action.type === "setPage") {
    return { ...state, page: action.page };
  }
  if (action.type === "setFilters") {
    return { page: 0, minPrice: action.minPrice, maxPrice: action.maxPrice };
  }
  return state;
};

const App = () => {
  const [tableState, dispatch] = useReducer(tableStateReducer, {
    page: 0,
    minPrice: 25,
    maxPrice: 50
  });
  const [minPrice, setMinPrice] = useState(25);
  const [maxPrice, setMaxPrice] = useState(50);

  const setPage = useCallback(
    page => {
      if (typeof page === "function") {
        dispatch({ type: "setPage", page: page(tableState.page) });
      } else {
        dispatch({ type: "setPage", page });
      }
    },
    [tableState]
  );

  return (
    <div>
      <div>
        <label>Min price:</label>
        <input
          value={minPrice}
          onChange={event => {
            const { value } = event.target;
            setMinPrice(parseInt(value, 10));
          }}
        />
      </div>
      <div>
        <label>Max price:</label>
        <input
          value={maxPrice}
          onChange={event => {
            const { value } = event.target;
            setMaxPrice(parseInt(value, 10));
          }}
        />
      </div>
      <button
        onClick={() => {
          dispatch({ type: "setFilters", minPrice, maxPrice });
        }}
      >
        Set filters
      </button>

      <PaginationComponent tableConfig={tableState} setPage={setPage} />
    </div>
  );
};

export default App;

Вы можете использовать следующие

const fetchData = () => {
 get(page, minPrice, maxPrice)
    .then(response => setItems(response));
}
// Whenever page updated fetch new data
useEffect(() => {
 fetchData();
}, [page]);

// Whenever filter updated reseting page
useEffect(() => {
 const prevPage = page;
 setPage(0);
 if(prevPage === 0 ) {
   fetchData();
 }
},[minPrice, maxPrice]);