React hooks - useEffect method keeps fetching

Question

In many of my components, I have to use token from store to get data and represent it (header menu, footer menu, products on page, slider images, etc.). What I am trying to do is to get this data only if I don't have it, but React keeps sending requests every time token changes (as token is dependency), even though I clearly put condition and I can see it if I console.log it. What am I doing wrong?

const [cities, setCities] = useState([]);

useEffect(() => {
 if (!cities.length) {
  fetch(`.....&token=${props.token}`)
  .then(response => response.json())
  .then(data => {

    if (data.data.results) {
    setCities(data.data.results.cities)

    }
   })
  }
}, [props.token, cities.length]);

Answer 1

The cities will be empty on first render anyway, so you don't need to check for its length and specify it as a dependency:

const [cities, setCities] = useState([]);

useEffect(() => {
  fetch(`.....&token=${props.token}`)
    .then(response => response.json())
    .then(data => {
      if (data.data.results) {
        setCities(data.data.results.cities)
      }
    })
}, [props.token]);

You can also memoize the token to prevent it from triggering the useEffect callback:

const token = useMemo(() => props.token, []);