Как избежать зацикленности при обновлении props?

Question

[zlodiak]

У меня есть редюсер, который помещает в state некоторый массив значений. Есть компонент, который получает эти значения с сервера и помещает в state

function Victims(props) {
  useEffect(() => {
    apiRequest('/victims')
      .then(res => {
        store.dispatch(actionCreator(victims))
      })
  }, [props.victims]);

  return(
    <>
      Victims comp
    </>
  )
}

const mapStateToProps = state => {
  return {
    victims: state.victimsReducer.victims,
  }
}

export default connect(mapStateToProps, { })(Victims);

Проблема в том, что у меня получается бесконечный процесс

получение данных -> помещение их в state

Это происходит потому, что во втором аргументе хука useEffect я прописал:
[props.victims]

Таким образом, этот хук срабатывает, помещает результат в state, но после этого опять срабатывает из-за [props.victims]. И так до бесконечности

Объясните пожалуйста как сделать так чтобы хук срабатывал один раз при первой загрузке страницы, а потом срабатывал только если данные пришли действительно новые

Comments

[Alex]

Почитайте пожалуйста правила оформления вопросов

Answer 1

[brabrubra]

[JSON.stringify(props.victims)] пробовали?