UseEffect woes

IsCalledOnce.tsx

import { useEffect, useState, useRef } from "react";

const IsCalledOnce = () => {
  const [result, setResult] = useState({});
  const [numberOfCalls, setNumberOfCalls] = useState(0);
  const httpBinLoadingRef = useRef<boolean>(false);

  const callHTTPBin = async (num: Number) => {
    httpBinLoadingRef.current = true;
    const response = await fetch(`https://httpbin.org/get?num=${num}`);
    setNumberOfCalls(n => n+1);
    if (response.ok) {
      const newResult = await response.json();
      setResult(newResult.args);
    } else {
      httpBinLoadingRef.current = false;
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
  }
  
  useEffect(() => {
    const random = Math.random();
    console.log('httpBinLoadingRef', httpBinLoadingRef.current);
    if(!httpBinLoadingRef.current) callHTTPBin(random);
  }, []);
  
  return (
    <>
      <div>IsCalledOnce</div>
      <div>Called: {numberOfCalls} times!</div>
      <pre>
        {JSON.stringify(result, null, 2)}
      </pre>
    </>
  );
}

export default IsCalledOnce;

NoTech.tsx

import { useEffect, useState } from "react";

const NoTech = () => {
  const [result, setResult] = useState({});
  const [numberOfCalls, setNumberOfCalls] = useState(0);

  const callHTTPBin = async (num: Number) => {
    const response = await fetch(`https://httpbin.org/get?num=${num}`);
    setNumberOfCalls(n => n+1);
    if (response.ok) {
      const newResult = await response.json();
      setResult(newResult.args);
    } else {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
  }
  
  useEffect(() => {
    const random = Math.random();
    callHTTPBin(random);
  }, []);
  
  return (
    <>
      <div>NoTech</div>
      <div>Called: {numberOfCalls} times!</div>
      <pre>
        {JSON.stringify(result, null, 2)}
      </pre>
    </>
  );
}

export default NoTech;

SetLoading.tsx

import { useEffect, useState } from "react";

const SetLoading = () => {
  const [result, setResult] = useState({});
  const [numberOfCalls, setNumberOfCalls] = useState(0);
  const [isLoading, setIsLoading] = useState(false);

  const callHTTPBin = async (num: Number) => {
    setIsLoading(true);
    const response = await fetch(`https://httpbin.org/get?num=${num}`);
    setNumberOfCalls(n => n+1);
    if (response.ok) {
      const newResult = await response.json();
      setResult(newResult.args);
    } else {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    setIsLoading(false);
  }
  
  useEffect(() => {
    const random = Math.random();
    if(!isLoading) callHTTPBin(random);
  }, []);
  
  return (
    <>
      <div>SetLoading</div>
      <div>Called: {numberOfCalls} times!</div>
      <pre>
        {JSON.stringify(result, null, 2)}
      </pre>
    </>
  );
}

export default SetLoading;

UseRef.tsx

import { useEffect, useState, useRef } from "react";

const USEREF = () => {
  const [result, setResult] = useState({});
  const [numberOfCalls, setNumberOfCalls] = useState(0);
  const httpBinLoadingRef = useRef<boolean>(false);

  const callHTTPBin = async (num: Number) => {
    httpBinLoadingRef.current = true;
    const response = await fetch(`https://httpbin.org/get?num=${num}`);
    setNumberOfCalls(n => n+1);
    if (response.ok) {
      const newResult = await response.json();
      setResult(newResult.args);
    } else {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    httpBinLoadingRef.current = false;
  }
  
  useEffect(() => {
    const random = Math.random();
    if(!httpBinLoadingRef.current) callHTTPBin(random);
  }, []);
  
  return (
    <>
      <div>UseRef</div>
      <div>Called: {numberOfCalls} times!</div>
      <pre>
        {JSON.stringify(result, null, 2)}
      </pre>
    </>
  );
}

export default USEREF;