Crochets React - bonne façon d'effacer les délais et les intervalles

Question

Je ne comprends pas pourquoi, lorsque j'utilise setTimeout fonction mon composant react commence à être infini console.log. Tout fonctionne, mais le PC se met à lagger comme l'enfer. Certaines personnes disent que la fonction en timeout changer mon état et que le composant rerender, qui définit un nouveau timer et ainsi de suite. Maintenant, j'ai besoin de comprendre comment effacer c'est juste.

export default function Loading() {
  // if data fetching is slow, after 1 sec i will show some loading animation
  const [showLoading, setShowLoading] = useState(true)
  let timer1 = setTimeout(() => setShowLoading(true), 1000)

  console.log('this message will render  every second')
  return 1
}

L'effacement dans une version différente du code n'aide pas :

const [showLoading, setShowLoading] = useState(true)
  let timer1 = setTimeout(() => setShowLoading(true), 1000)
  useEffect(
    () => {
      return () => {
        clearTimeout(timer1)
      }
    },
    [showLoading]
  )

Answer 1

Si vous voulez créer un bouton comme "start", l'utilisation du hook "useInterval" peut ne pas convenir car react ne permet pas d'appeler des hooks ailleurs qu'au sommet du composant.

export default function Loading() {
  // if data fetching is slow, after 1 sec i will show some loading animation
  const [showLoading, setShowLoading] = useState(true)
  const interval = useRef();

  useEffect(() => {
      interval.current = () => setShowLoading(true);
  }, [showLoading]);

  // make a function like "Start"
  // const start = setInterval(interval.current(), 1000)

  setInterval(() => interval.current(), 1000);

  console.log('this message will render  every second')
  return 1
}