проблема повторного рендеринга с использованием реакционных хуков

Question

Learning React Hooks, я занимаюсь разработкой приложения для тестирования. Мое приложение загружает данные из API, а затем заполняет сетку. Кусочек пирога. Проблема появляется, когда я пытаюсь показать индикатор загрузки. Он входит в повторный рендеринг l oop. Вот что я сделал:

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

function MyComp(props) {
   const [loading, setLoading] = useState(false);
   const [info, setInfo] = useState(null);

   useEffect(() => {
      setLoading(!loading);

      const getData = response => {
         if (response.response) {
            setInfo(response.response);
         } else {
            console.log('there was an error');
         }
         setLoading(!loading);
      };

      fetch(URL, {})
        .then(resp => ({ getData({response: resp}))
        .catch(error => ({ getData({ error });
   }, []);

   return (
     <>
        {loading ? "Loading" : "Not Loading"}
     </>
   );
}

export default MyComp;

Что мне здесь не хватает?

Answer 1

После некоторой «попытки и ошибки» (я должен признать) я нашел это решение:

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

function MyComp(props) {
   const [loading, setLoading] = useState(false);
   const [info, setInfo] = useState(null);

   useEffect(() => {
      setLoading(false);
   }, [info]);

   function getData(response) {
      if (response.response) {
         setInfo(response.response);
      } else {
         console.log('there was an error');
      }
   }

   useEffect(() => {
      setLoading(true);

      fetch(URL, {})
        .then(resp => ({ getData({response: resp}))
        .catch(error => ({ getData({ error });
   }, []);

   return (
     <>
        {loading ? "Loading" : "Not Loading"}
     </>
   );
}

export default MyComp;

Возможно, не самый лучший или самый красивый способ ... но он работает для меня.

Answer 2

Вы устанавливаете загрузку в хуке useEffect. При изменении состояния приложение перерисовывается, что вы также бесконечно делаете в useEffect. Поэтому, как только приложение загружает, запускается ловушка useEffect и изменяется загрузка, что снова вызывает повторную визуализацию приложения, и цикл продолжается.

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

function MyComp(props) {
   const [loading, setLoading] = useState(false);
   const [info, setInfo] = useState(null);

   useEffect(() => {
      setLoading(loading => !loading);

      const getData = response => {
         if (response) {
            setInfo(response);
         } else {
            console.log('there was an error');
         }
         setLoading(loading => !loading);
      };

      fetch(URL, {})
        .then(resp =>  getData( resp))
        .catch(error =>  getData(error));
   }, []);

   return (
     <>
        {loading ? "Loading" : "Not Loading"}
     </>
   );
}

export default MyComp;