Как сделать рендер только один раз?

Question

[usbfan_official]

Делаю фетч запрос, получаю данные, вывожу их все в функции, но при этом получаю бесконечный рендер, как мне его остановить?

function App() {
                  const [users, setUsers] = useState([]);
                  const getApiData = async () => {
                  const response = await fetch(
                    "https://example.site/example/example.php"
                  )
                  .then((response) => response.json());
                 {
                    setUsers(response);
                  }
                };
               
                useEffect(() => {
                  getApiData();
                }, []);
              
              
                
                return (
                  <div className="app">
                    {users.map((user) => (
                        <Div className='popular'>
                        <Avatar src={ava}></Avatar>
                        <Text className='popular'>{user.name}</Text>
                        <Text className='popular'>{user.znak}</Text>
                        <Text className='popular1'>Количество популярности: {user.popularnost}</Text>
                        </Div>
                      ))}
                  </div>
                );   
              }

 return (
...
<App />
...
)

Comments

[Rerurk]

Через пропсы передать не лучше ли?

[usbfan_official]

Rerurk, как это сделать?

[szQocks]

usbfan_official, методом тыка не вышло, сюда прибежал ? гениально, иди доку читай по реакту

вообще тут код с ошибками, мне кажется это жэпэтэ тебе нагенерил

[usbfan_official]

szQocks, ответ имба!

[Rerurk]

usbfan_official, тебе запросы надо вынести из этого компонента, а user передававть в виде пропса

[usbfan_official]

Rerurk, спасибо, попробую

[Aetae]

szQocks, вродь не вижу ошибок, только очень странную херню(мб и жпт).

[szQocks]

Aetae, а у него объект, я думал дополнительное типа тело функции, ну не суть)

[szQocks]

Aetae, блок это, а не объект, туплю

[usbfan_official]

Aetae, решил проблему, просто не внимательность, вставлял код функции в основной App.js приложения и там зацепил и случайно заменил }, []); (удалил крч), в консоль некоторое время не лазил пока рендерить инфу не стал, начал рендерить заметил сее чудо, в виде флуда пакетами, пока ковырял данный код даже и не подумал что в App.js мог что то сломать, в общем вернул на место }, []) и рендер прекратился))))

[usbfan_official]

szQocks, где в коде как ты выразился ошибки я так и не понял)))
Ну да ладно, тебе виднее)

[usbfan_official]

Aetae, что за херню, обьясните мне, я не понимаю, нет это не гпт, самопис, не все при старте пишут на проф уровне, это первое приложение в жизни)) А окромя его надо ещё серверную часть навоять с бд, поэтому чем богаты как говорится, работает - не трожь, золотое правило)))))

[Aetae]

usbfan_official, у тебя setUsers(response); зачем то заключён в блок кода. Это не ошибка само по себе, но это тонкая механика которой практически никто не пользуется, кроме особых случаев, и конкретно тут это явно не нужно.

[usbfan_official]

Aetae, там просто в этом блоке после ответа происходят ещё действия, в зависимости от данных response, что бы не работать с Users, можно конечно было работать с users за пределами блока. Но я почему то решил их выполнить там

[Aetae]

usbfan_official, всё равно не вижу ни одной причины для дополнительного блока. Фунуция getApiData и так создаёт свою область, лишние телодвижения - непонятны.

[szQocks]

usbfan_official, ошибок нет, я ступил, и так же я тут не вижу логики для бесконечного рендера

Aetae кстати сомневаюсь что тут memo ему поможет, так как он пишет про бесконечный ререндер, мне кажется не хватает кода в вопросе для ответа на этот вопрос

[szQocks]

Aetae, хотя если ток он над App там бесконечно что-то не обновляет хм, но это маловероятно, ведь app это в большинстве рут компонент хм

usbfan_official - покажи весь код где этот App отрисовывается

[usbfan_official]

szQocks, да я уже исправил, данная функция обернута в другой APP.js в котором все страницы находятся, там был useEffect не закрыт, закрыл его рендер прекратился

[szQocks]

usbfan_official, ну тогда ответ Aetae верный, отмечай его и всё, как вариант ты вот закрыл useEffect который видимо там обновлял useState, чё он у тебя там вообще делает непонятно

[usbfan_official]

szQocks, там апп для инициализации, все настройки обновляются при запуске, ну маршрутизация там настроена, а все остальные страницы уже в него входят

Answer 1

[Aetae]

Обернуть App в memo. Ток прям один раз всё равно не получится: один рендер на отображение пустых users, второй на отображение заполненных когда те загрузятся.