Open MMauro94 opened 2 years ago
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
Seeing the same thing. It appears to only be a problem when the component is wrapped in <React.StrictMode />
somewhere in the tree.
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.
Another alternative (also useful for those battling with TypeScript support), there is https://www.npmjs.com/package/react-async-hook
https://github.com/async-library/react-async/issues/256#issuecomment-1133103444
I'm still waiting for this feature...
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
No updates in almost 2 years. No React 18 support. I guess this library is dead.
Looks like there's a proposed fix: https://github.com/async-library/react-async/pull/331
Anyone been able to compile and test this?
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.
@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
Hi, I tried to upgrade to React 18 but this library doesn't seem to work. As soon as I switched
ReactDOM.render(..., ...)
tocreateRoot(...).render(...)
all async states stopped working.More specifically, all states stay in
pending
state and the promises are inexplicably of typeNeverSettle
.Here you can find the React 18 upgrade guide