[Bug]: React not re-rendering view after state change (useRequest immediate=true)
proddy opened this issue · 10 comments
Is this a Bug?
- I have confirmed that I want to report a Bug
Has this issue been reported before?
- I have confirmed that this Issue has not been reported before
Alova Version
3.0.4
Framework
React
Problem Description
Using ReactHook and useRequest (with loading and data params included and immediate set to true) the data is correctly fetched but page is not re-rendered as it was in version 2.x.Using ReactHook and useRequest (with loading and data params included and immediate set to true), the data is correctly fetched, but the page is not re-rendered as it was in version 2.x.
Expected Behavior
re-render the view on loading or data changes.
As the documentation states "useRequest is our most commonly used request strategy. It can help us create and maintain responsive states of requests, such as loading/data/error, etc. You can use these responsive states directly in the view. When they change, the view will also change accordingly."
Reproduction Link
https://codesandbox.io/p/sandbox/great-blackwell-gqm7y3?file=%2FApp.js
Reproduction Steps
Easiest way to see this happening is to take the official demo in the documentation at https://alova.js.org/tutorial/getting-started/basic/combine-framework/#automatically-manage-request-status
or run the Sandbox code at: https://codesandbox.io/p/sandbox/great-blackwell-gqm7y3?file=%2FApp.js
You'll see it stays stuck at "Loading...."
System Information
nothing fancy, all latest library, similar to the sandbox demo.Additional Information
using:
- ReactHook
- requestAdapter: xhrRequestAdapter() - same behaviour with
adapterFetch - no caching
Worked in 2.x, broke in 3.x
I think this is related to the optimisations done in https://alova.js.org/release-notes-v3#other-optimizations "This is a performance optimization. All useHooks in alova@3.x will not update unaccessed states to reduce redundant view rendering caused by internal state updates."
as reported this week on Discord: https://discord.com/channels/1151003341883715674/1151003342328307718/1267865206445576306
Thanks for your feedback. We're figuring it out.
appreciate it - let me know if you need me to run further tests.
it seems the problem of codesandbox.
We reproduced the issue you mentioned in codesandbox, but everything works fine when running the codes locally. We found that the browser environment provided by codesandbox includes the node environment, so alova thinks it is running on the server, so it will not automatically send requests.
see: packages/client/src/hooks/core/implements/createRequestState.ts#L164
This explains why everything works fine when sending the request manually.
We'll fix this soon.
Thanks for looking into it. I think my issue could be something different then. I'll create some sample code to run locally after you have implemented the fix. I have a refresh/render problem after the request has been sent. So Alova is doing its job and fetching the data just fine, but its not telling React to render the screen afterwards. This is with immediate=true on a useRequest, but also if I call it explicitly with a useEffect() in the code to invoke the fetch when the page is loaded.
It could very well be a problem with my setup and nothing to do with Alova at all, so I'll make the sample code. As I said, it all works with Alova v2.
now it works. please upgrade to alova@3.0.5
Unfortunately, that didn't fix my problem. I'll see if I can isolate it into a new test. Something else must be incompatible and getting in the way.
The demo https://codesandbox.io/p/sandbox/great-blackwell-gqm7y3?file=%2FApp.js is still stuck on "Loading..." for me.
Yes, you're right, it works for me now too - I had to reset all the browser settings.
Still, my app doesn't work :-( I'll make a new test and share