Inifinite loop when saving an object from async await

Question

When I create and object out of async/await operation...

export const getData = async datas => {
  const a1 = await getData1(datas);
  return { a1 };
};

...and then save it with useState...

import { useState, useEffect } from "react";
import { getData } from "./getData";

export const useData = ababab => {
  const [data, setData] = useState();

  useEffect(() => {
    const loadData = async () => {
      const newData = await getData(ababab);
      setData(newData);
    };
    console.log(Date.now().toString());
    loadData();
  }, [ababab]);

  return data;
};

...I get an infinite loop. I don't get it. If you comment out the setData - it won't loop. If you return just a1, it will not loop.

Here is where useData is used:

import React from "react";
import "./styles.css";
import { useAbabab } from "./usaAbabab";
import { useData } from "./useData";

export default function App() {
  const ababab = useAbabab();
  const data = useData(ababab);
  return (
    <div className="App">
      <h1>Hello CodeSandbox {data && data.a1}</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

And here are the contents of useAbabab:

import { useState } from "react";

export const useAbabab = () => {
  const [aaa, setAaa] = useState(0);
  const [bbb, setBbb] = useState(5);

  return { aaa, bbb, setAaa, setBbb };
};

Code Sandbox example

Answer 1

As you've probably gathered, the infinite loop is caused by the useEffect in useData, which is triggered by a change to ababab (can be shown by removing ababab from the dependency array).

While ababab is really just two full useState outputs together in an object, the object itself is redefined on each render, triggering the useEffect to run.

The simplest way I can think to fix this is to wrap the return value of useAbabab in a useMemo, like this:

import { useState, useMemo } from "react";

export const useAbabab = () => {
  const [aaa, setAaa] = useState(0);
  const [bbb, setBbb] = useState(5);

  return useMemo(() => ({ aaa, bbb, setAaa, setBbb }), [aaa, bbb]);
};

Answer 2

It's hard to tell precisely what your code is doing because of the ababa variable names, but from what I can read in your code, it looks like you're want a generic hook around an asynchronous resource -

const identity = x => x

const useAsync = (runAsync = identity, deps = []) => {
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)
  const [result, setResult] = useState(null)

  useEffect(_ => { 
    Promise.resolve(runAsync(...deps))
      .then(setResult, setError)
      .finally(_ => setLoading(false))
  }, deps)

  return { loading, error, result }
}

Using our custom hook usAsync looks like this -

function App() {
  const ababab =
    useAbabab()

  const { loading, error, result } = 
    useAsync(getData, [ababab]) // async function, args to function

  if (loading)
    return <p>Loading...</p>

  if (error)
    return <p>Error: {error.message}</p>

  return <div>Got data: {result}</div>
}

---

useAsync is a versatile generic hook that can be specialized in other useful ways -

const fetchJson = (url = "") =>
  fetch(url).then(r => r.json()) // <-- stop repeating yourself

const useJson = (url = "") =>
  useAsync(fetchJson, [url]) // <-- useAsync

const MyComponent = ({ url = "" }) => {
  const { loading, error, result } =
    useJson(url)                       // <-- dead simple

  if (loading)
    return <pre>loading...</pre>

  if (error)
    return <pre className="error">error: {error.message}</pre>

  return <pre>result: {result}</pre>
}

ReactDOM.render(
  <MyComponent url="https://httpbin.org/get?foo=bar" />,
  document.body
)

Run the snippet below to see useAsync and useJson working in your own browser -

const { useState, useEffect } =
  React

// fake fetch slows response down so we can see loading
const _fetch = (url = "") =>
  fetch(url).then(x =>
    new Promise(r => setTimeout(r, 2000, x)))

const identity = x => x

const useAsync = (runAsync = identity, deps = []) => {
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)
  const [result, setResult] = useState(null)

  useEffect(_ => { 
    Promise.resolve(runAsync(...deps))
      .then(setResult, setError)
      .finally(_ => setLoading(false))
  }, deps)

  return { loading, error, result }
}

const fetchJson = (url = "") =>
  _fetch(url).then(r => r.json())

const useJson = (url = "") =>
  useAsync(fetchJson, [url])

const MyComponent = ({ url = "" }) => {
  const { loading, error, result } =
    useJson(url)

  if (loading)
    return <pre>loading...</pre>

  if (error)
    return <pre style={{color: "tomato"}}>error: {error.message}</pre>

  return <pre>result: {JSON.stringify(result, null, 2)}</pre>
}

const MyApp = () =>
  <main>
    ex 1 (success):
    <MyComponent url="https://httpbin.org/get?foo=bar" />

    ex 2 (error):
    <MyComponent url="https://httpbin.org/status/500" />
  </main>

ReactDOM.render(<MyApp />, document.body)

pre {
  background: ghostwhite;
  padding: 1rem;
  white-space: pre-wrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>