состояние обновляется внутри useffect (), но компонент не рендерится

Question

Я извлекаю Список URL-адресов изображений из getUserCollection функции, которая возвращает обещание, изначально состояние в консоли пустое, но как только оно получает ответ от функции состояние обновляется в консоли, но компоненты не обновляются для обновленного состояния. Я знаю, что если я сделаю отдельный компонент и передам состояние в качестве подпорки, то оно наверняка будет перерисовано для обновленного состояния. Но почему это не происходит внутри одного и того же компонента? Кто-нибудь может помочь? Также, когда я передаю состояние ( userCollection ) в качестве второго аргумента внутри useEffect, его выполнение выполняется бесконечное число раз.

import React, { useState, useEffect } from "react";
import { getUserCollection } from "../../firebase/firebase";

const CollectionPage = ({ userAuth }) => {
  const [userCollection, setUserCollection] = useState([]);

  useEffect(() => {
    getUserCollection(userAuth.uid)
      .then((response) => {
        if (response) setUserCollection(response);
      })
      .catch((error) => console.log(error));
  }, []);                                                       
  console.log("updating???", userCollection);    //its updating in console
  return (
    <main className="container">
      <h3>collection page</h3>
      {userCollection.map((url) => (
        <div class="card-columns">
          <div class="card">
            <img
              src={ url}                  // its not updating 
              class="card-img-top"
              alt="user-collection"
              width="100"
            />
          </div>
        </div>
      ))}
    </main>
  );
};

export default CollectionPage;

Answer 1

https://reactjs.org/docs/hooks-effect.html

"Если вы передадите пустой массив ([]), реквизиты и состояние внутри эффекта всегда будут иметь свои начальные значения. При передаче [] в качестве Второй аргумент ближе к знакомой ментальной модели componentDidMount и componentWillUnmount, обычно есть лучшие решения, позволяющие избежать повторного запуска эффектов слишком часто.Кроме того, не забывайте, что React откладывает запуск useEffect до того, как браузер нарисовал, поэтому выполнение дополнительной работы меньше проблем. "

2-й аргумент - это то, что заставляет ваш компонент перерисовываться, устанавливая это в вашей переменной состояния userCollection, запускает ваш useEffect при каждом обновлении состояния - вызывая бесконечное l oop, потому что your useEffect обновляет состояние.

Что вы хотите на самом деле запустить рендеринг? Если сначала он должен быть пустым, а затем запускаться только один раз для загрузки изображений, вы можете изменить его на что-то вроде этого:

useEffect(() => {
    if(!userCollection){
    getUserCollection(userAuth.uid)
      .then((response) => {
        if (response) setUserCollection(response);
      })
      .catch((error) => console.log(error));
    }
  }, [userCollection]);      

С этим логом c, useEffect обновит только состояние, когда оно пустое. Если вы ожидаете непрерывных повторных визуализаций, вам следует создать переменную, которая будет обновляться, когда повторные визуализации должны происходить.