Infinite loop / browser tab hang

[trbabb]

Not sure if this is a recent issue, or perhaps a simple misconfiguration on my end, but either way, I'm pretty stuck— even the simplest react-async example fails. I am using create-react-app with React 16.9.0. Here is a simple App.js which hangs for me:

import React from 'react';
import './App.css';

import {useAsync, IfPending, IfFulfilled, Async} from 'react-async';

function App() {
  const fn = async () => {
    return "foo"
  }
  const state = useAsync({promiseFn:fn})
  return (
    <div className="App">
      <IfPending state={state}>not loaded</IfPending>
      <IfFulfilled state={state}>loaded!</IfFulfilled>
    </div>
  );
}

export default App;

On Chrome this hangs indefinitely for me, and I have to kill the tab using the Chrome task manager (closing the tab doesn't work!). On at least one occasion I've gotten an infinite spew of console errors about a "maximum update depth", but I am unable to repro that consistently. On Firefox, it simply stops responding (including the dev tools) until the tab is closed. The page shows "not loaded" indefinitely and never changes to "loaded!"

I've tried quite a few permutations by following the examples in the docs, and the result is ever the same. What's wrong?

thanks!

[ghengeveld]

You must either define fn (the promiseFn) outside of App (recommended), or wrap it with useCallback.

const fn = async () => {
  return "foo"
}

function App() {
  const state = useAsync({ promiseFn: fn })
  return (
    <div className="App">
      <IfPending state={state}>not loaded</IfPending>
      <IfFulfilled state={state}>loaded!</IfFulfilled>
    </div>
  );
}

React Async will restart the promiseFn when it changes. Since you're creating the function inside your component body, you're effectively creating a new function every time the component renders. Because it's a new function it will restart the promise, causing state to update, causing a rerender and there you have your infinite loop.

See the notes on promiseFn in the docs (although it's written to apply to the <Async> component, but it applies similarly to useAsync).

There's already an issue that aims to do something about this (i.e. throw an error instead of hanging indefinitely). Therefore I'm closing this.