Бесконечный цикл при сохранении объекта из async await

Как вы, наверное, догадались, бесконечный цикл вызывается useEffect в useData, который запускается изменением на ababab (можно показать, удалив ababab из массива зависимостей).

В то время как ababab на самом деле всего лишь два полных useState выхода вместе в объекте, сам объект переопределяется при каждом рендеринге, вызывая запуск useEffect.

Самый простой способ исправить это - обернуть возвращаемое значение useAbabab в useMemo, например:

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]);
};

Трудно точно сказать, что делает ваш код из-за имен переменных ababa, но из того, что я могу прочитать в вашем коде, похоже, что вам нужен общий крючок для асинхронного ресурса -

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 }
}

Использование нашего пользовательского хука usAsync выглядит так:

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 - это универсальный универсальный хук, который может быть специализирован другими полезными способами:

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
)

Запустите приведенный ниже фрагмент, чтобы увидеть, как useAsync и useJson работают в вашем собственном браузере -

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>