why my react app has re-rendering loop while using useEffect

I'm currently working on a code to update the content of a previous post.

Among them, there is a part where I convert the image URLs received from the server into files and store them in state.

However, with this coding approach, I'm experiencing excessive re-renders.

I'm not sure what to do anymore. Initially, there can be multiple URLs, so I used useQueries.
Could that be the problem?

In summary:

During the initial rendering,

• fetch the information of the previous post from the server.
• Store the received information in state.
• Convert the array of image URLs into an array of files.
• Store the converted files in state.

If you have any information to help solve this problem, such as the cause of the excessive re-renders or possible solutions, please let me know.

const ShellUpdate: React.FC = () => {
  const { id } = useParams();
  const { data } = useGetShells(parseInt(id as string));
  const urls = data?.data.pictures.map((item: { url: string }) => item.url);
  const ImagesDate = useImageUpload(urls);
  const [uploadedImages, setUploadedImages] = useState<File[]>([]);

  useEffect(() => {
    if (ImagesDate[0].status === 'success') {
      const files = ImagesDate.map((queryResult) => queryResult?.data).filter(
        Boolean
      ) as FileWithPath[];
      console.log(files);
      setUploadedImages(files);
    }
  }, []);
}

export const useImageUpload = (
  updateInitalImages: string[]
): QueryObserverResult<FileWithPath>[] => {

  const queryResults = useQueries(
    updateInitalImages.map((imageUrl) => ({
      queryKey: [queryKeys.imageData, imageUrl],
      queryFn: () => getImageFile(imageUrl),
    }))
  );


  return queryResults;
};

When I console logged, I noticed excessive re-renders occurring, and the data was not getting stored in setUploadedImages.

The issue is with useEffect dependency array, first you didn't provide it with any variable, which mean the useEffect callback function will run one time after the component elements are rendered, which mean you will have an old version of ImagesDate (which belong to a stale closure to be more technical), so to fix this you'd think, okay let's pass it in the dependency array:

    useEffect(() => {
  
      if (ImagesDate?.[0]?.status === 'success') {

        const files = ImagesDate
          ?.filter((queryResult) => Boolean(queryResult.data))
          ?.map((queryResult) => queryResult.data)
          ?? [];
  
        //console.log(files);
        setUploadedImages(files as File[]);
      }
  
    }, [ImagesDate]);

well that's normally okay, but having objects(arrays or functions too) in the dependency array is very dangerous for the reason of Referential Equality, which mean react will do comparison on the dependency array based on Object.is which for objects will always return false, because in javascript:

{} === {} // false
Object.is({}, {}) // false

so that will cause the useEffect callback to run every time the component re-render, you might ask, but I will not trigger re-render?! well, the use of this line

        setUploadedImages(files as File[]);

will of course trigger the re-render again, which mean you will get an infinite loop of re-renders...

what possible solutions to this?
the simplest solution possible that I suggest is not to have uploadedImages as controlled state, instead have it as derived state because you can have it's value based on another state, there's no need to have a setter function for that and have to go all the way to setup a side effect to set it, so this should be enough for it:

  //  const [uploadedImages, setUploadedImages] = useState<File[]>([]);

  const uploadedImages = ImagesDate
    ?.filter((queryResult) => Boolean(queryResult.data))
    ?.map((queryResult) => queryResult.data)
    ?? [];

  /*
    useEffect(() => {
  
      if (ImagesDate?.[0]?.status === 'success') {

        const files = ImagesDate
          ?.filter((queryResult) => Boolean(queryResult.data))
          ?.map((queryResult) => queryResult.data)
          ?? [];
  
        //console.log(files);
        setUploadedImages(files as File[]);
      }
  
    }, [ImagesDate]);
    */

one more point related to useQueries, following the documentation, you should pass a queries property to useQueries

export const useImageUpload = (updateInitalImages: string[]) => {

  const queryResults = useQueries(
    {
      queries:
        updateInitalImages.map((imageUrl) => ({
          queryKey: ['convert to image file', imageUrl],
          queryFn: () => {
            console.log('re calling api with', imageUrl);
            return getImageFile(imageUrl)
          },
        }))
    }
  );


  return queryResults;
};