How to avoid looping when updating props?

Question

JavaScript

I have a reducer that puts some array of values ​​in state. There is a component that receives these values ​​from the server and places them in 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);

The problem is that I get an infinite process

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

. This is because in the second argument of the useEffect hook I wrote:
[props.victims]

So this hook works, puts the result in state, but after that it works again because of [props.victims]. And so on ad infinitum

Please explain how to make the hook work once when the page is loaded for the first time, and then work only if the data came really new

Answer 1

[JSON.stringify(props.victims)]have you tried?