Как бороться с двумя хуками useEffect, которые могут происходить одновременно?

Question

У меня есть приложение, в котором, когда пользователь видит конец страницы, что-то запрашивается.

useEffect(() => {
        if (!isFetching && inView && cards.length !== props.totalCards) {
            requestCards(requestOptions, page, false)
        }
    }, [inView])

Когда я изменяю параметры запроса, запускается другая ловушка

    useEffect(() => {
        if (!isFetching) {
            requestCards(requestOptions, page, true)
        }
    }, [requestOptions])

Иногда когда запрос закончился и isFetching изменился на false, но карты не появились, ловушка inView запускается и делает еще 1 запрос. Как мне прервать эту ошибку? Я пытался изменить зависимость в ловушке на картах, но затем он не запрашивает, когда пользователь видит дно.

Answer 1

Как правило, вам следует избегать опускания реквизита из ловушек эффектов . Если вы объедините обе свои useEffects, это может решить вашу проблему. Например:

useEffect(() => {
  if(!isFetching) {
    if(inView && cards.length !== props.totalCards) {
      requestCards(requestOptions, page, false);
    } else {
      requestCards(requestOptions, page, false);
    }
  }
}, [isFetching, inView, cards, props.totalCards, requestOptions, page]);