[Bug]: React not re-rendering view after state change (useRequest immediate=true)

[proddy]

Is this a Bug?

• [X] I have confirmed that I want to report a Bug

Has this issue been reported before?

• [X] 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."

[proddy]

as reported this week on Discord: https://discord.com/channels/1151003341883715674/1151003342328307718/1267865206445576306

[MeetinaXD]

Thanks for your feedback. We're figuring it out.

[proddy]

appreciate it - let me know if you need me to run further tests.

[MeetinaXD]

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.

[proddy]

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.

[JOU-amjs]

now it works. please upgrade to alova@3.0.5

[proddy]

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.

[JOU-amjs]

@proddy the demo you provided. works well for me

[proddy]

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

[proddy]

I found the issue - it works fine in React but breaks with PreactJS (a lightweight version of React). I created a new issue for this https://github.com/alovajs/alova/issues/492