Accepted answer

Try to make sure your photos prop is immutable, meaning, you send a new array each time there is a change and not mutating the array


useEffect will update if you pass the new data, find the sample code below and check the console.log.

    import React, { useState, useEffect } from "react";

    const EffectCheck = ({value}) => {
        console.log('Component Trigger', value);
        useEffect(() => {
            console.log('Updated Effect', value);

        return (

    export default function() {
        const [checkValue, setCheckValue] = useState(Math.random());
        const [dynamicCheckValue, setdyamicCheckValue] = useState(Math.random());

        return (
                <div><h3>No Update</h3>
                    <EffectCheck value={checkValue}/>
                <div><h3>New Update</h3>
                    <EffectCheck value={dynamicCheckValue}/>
                <button onClick={() => setCheckValue('Math.random()')}> No Update</button>
                <button onClick={() => setdyamicCheckValue(Math.random())}> New Update</button>


This may not be the most correct answer, but I've tried this and it works. Hat tip to

useEffect(() => {
  Promise.all( photoId => {
      const url = await getImage(photoId);
      return url;
  .then(photoUrls => {
  .catch(e => console.log(e));
}, [JSON.stringify(photos])); // stringify the array used as the trigger, and it'll catch the change

Related Query

More Query from same tag