search

amplitude / redux-query

A library for managing network state in Redux
https://amplitude.github.io/redux-query
Other
1.1k stars 67 forks source link

isPending Bug on useRequest #198

Closed alt95 closed 4 years ago

alt95 commented 4 years ago

The isPending property on a useRequest is determined by a boolean.

E.g.

[{ isPending }] = useRequest(config)

On the first render of a component isPending is false, followed by true till it loads and then false when it is resolved.

The issue is that if you are blocking a render with isPending, the initial value causes a "flash" of the page to be seen.

Possible Solutions:

A loading state should be determined by 3 possible states, not 2 (a.k.a. a boolean) Initial, Loading, Resolved

This way you can show data on "resolved" and a load spinner or whatever on "loading"

OR

The isPending starts with true if the request is being made onMount

rctbusk commented 4 years ago

Could you post example code with codesandbox that shows this issue?

alt95 commented 4 years ago

Could you post example code with codesandbox that shows this issue?

https://codesandbox.io/s/redux-query-basic-example-forked-bhf4t

Hit MAKE REQUEST - I made it red to be noticeable, you will see that it flashes very briefly before going into Loading... followed by displaying the red screen again (when you would actually want it)

rctbusk commented 4 years ago

In the Query State, we also have an isFinished variable. This is a better loading state controller to use for requests that are made on mount than requests made on user action. isPending is better for those.

isFinished is good since it starts as false and only changes to true once the request is complete. isPending starts as false, then changes to true once the request has been made, and then changes back to false once it is done.

isFinished is great for queries run right on mount that are only run on mount. isPending is good for queries that are run multiple times or on user action.

https://codesandbox.io/s/redux-query-basic-example-forked-02gk1 changed your example to use isFinished.

https://amplitude.github.io/redux-query/docs/query-state docs on query state.

alt95 commented 4 years ago

In the Query State, we also have an isFinished variable. This is a better loading state controller to use for requests that are made on mount than requests made on user action. isPending is better for those.

isFinished is good since it starts as false and only changes to true once the request is complete. isPending starts as false, then changes to true once the request has been made, and then changes back to false once it is done.

isFinished is great for queries run right on mount that are only run on mount. isPending is good for queries that are run multiple times or on user action.

https://codesandbox.io/s/redux-query-basic-example-forked-02gk1 changed your example to use isFinished.

https://amplitude.github.io/redux-query/docs/query-state docs on query state.

Ok - that helps, thanks!