React 18 support

[MMauro94]

Hi, I tried to upgrade to React 18 but this library doesn't seem to work.
As soon as I switched ReactDOM.render(..., ...) to createRoot(...).render(...) all async states stopped working.

More specifically, all states stay in pending state and the promises are inexplicably of type NeverSettle.

Here you can find the React 18 upgrade guide

[orlaqp]

Hi I am experimenting the same issue. I even copied and pasted the code example from here:

import { useAsync } from "react-async"

// You can use async/await or any function that returns a Promise
const loadPlayer = async ({ playerId }, { signal }) => {
  const res = await fetch(`<changed to my endpoint>`, { signal })
  if (!res.ok) throw new Error(res.statusText)
  return res.json()
}

const MyComponent = () => {
  const { data, error, isPending } = useAsync({ promiseFn: loadPlayer, playerId: 1 })
  if (isPending) return "Loading..."
  if (error) return `Something went wrong: ${error.message}`
  if (data)
    return (
      <div>
        <strong>Player data:</strong>
        <pre>{JSON.stringify(data, null, 2)}</pre>
      </div>
    )
  return null
}

and still does not work

[bensie]

Seeing the same thing. It appears to only be a problem when the component is wrapped in <React.StrictMode /> somewhere in the tree.

[PaulMest]

I was able to replace react-async with react-use with about 2 minutes of work per invocation.

The TypeScript types are cleaner and useAsync in react-use works just fine in StrictMode on React 18.

[johnnyreilly]

Another alternative (also useful for those battling with TypeScript support), there is https://www.npmjs.com/package/react-async-hook

#256 (comment)

[holasoycael]

I'm still waiting for this feature...

[timbielawski]

I am using the useAsync hook and deferred function was not running for the below reason

"With Strict Mode starting in React 18, whenever a component mounts in development, React will simulate immediately unmounting and remounting the component."

The code has a isMounted ref and this is set to false when useEffect cleans up. I have updated the code to reset to its' default value of true on mount

[cbookg]

No updates in almost 2 years. No React 18 support. I guess this library is dead.

[chillitom]

Looks like there's a proposed fix: #331

Anyone been able to compile and test this?

[mibadim]

I guess I am having the same problem. Using React 18, Promises will always remain in "pending" state, even after my custom fetch method finished, and never be solved. A fix would be appreciated.

[timbielawski]

@mibadim Yeah I have the same issue, there is a PR waiting, you can also set strict mode to false, which is not ideal. Until that PR gets merged you kind of stuck

[HK-SHAO]

hi You can try react-client-async, which provides asynchronous rendering support for React 16+, including Hooks and components, and supports other features!

• https://github.com/HK-SHAO/react-client-async