When using async selector component renders 3 times

[lironezra]

Hi guys,

I have noticed to something strange, when async selector fires an API call the components that uses the selector render 3 times,
and if the selector doesn't perform an API call but rather returns some calculated value the component renders twice.
My question is why when there us an API call on the selector there is extra render, is that normal behavior?

I've reproduce the issue so you can test that, in my example compB is the component that read the data from the selector and Filters component change the filterAtom that cause to the selector to run.
Notice my comments in Filter.js file it will illustrate what I described.

https://codesandbox.io/s/currying-flower-xqvjv3?file=/src/Filter.js

Thanks for the help :)

[drarmstr]

An extra render call when an async call is added is expected. Adding the await causes the selector to return a Promise which uses React Suspense to abort the initial render by throwing a promise so the <React.Suspense> component can catch it and render the fallback. Then when the async API resolves and the selector provides an actual value the component is re-rendered, this time to completion.

Note that your console.log() isn't actually measuring how many times the component is rendered, only how many times React attempts to start rendering it. If you move the logging to just before the return you'll notice the component only renders a single time with each post.

[lironezra]

Thanks a lot Douglas, your comment really helped as always :)