-2
I have a case that should be very common for you.
I make a query of a sales list in a Rest API and at that time I set the status isLoading to true, so that a Spinner component I have is visible and at the end of the query Seto to false so that it disappears
const [isLoading, setIsLoading] = useState(false)
useEffect(() => {
setIsLoading(true)
fetchSales()
setIsLoading(false)
}, [dayInitial, dayFinal])
Well, here begins the problem... Because although I set the value of isLoading to true, it remains false and the query is performed without displaying Spinner. In my research on the internet I found that this behavior is normal, some say that useState does not do this assignment synchronously and so this problem occurs, others claim that the problem occurs because the value does not change within the closure(https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately). Here comes my first inquiry, because I’m starting my studies in React Native. As then you do in this case to enable/disable Spinner?
Continuing... Before this project, I did a similar one, where I looked for a list of clients, but in this project I used the Context API for state management, with the useContext and useReducer Hooks, and the call of the search method was like this:
useEffect(() => {
dispatch({
type: 'setIsLoading',
payload: true
})
loadClients()
dispatch({
type: 'setIsLoading',
payload: false
})
}, [props.route.params?.addValue])
I did basically the same thing, and this time I set up isLoading using useReducer’s Dispatch. In this case I had no problems with asynchronous in the assignment of the state values, I was able to assign the isLoading to true, do the search and finally assign to false. 'Cause in that case it worked?
I did not understand why I was negatively marked on this issue. I explained my research, I argued clearly the question and given my research I confirm that it is very useful
– Bruno Nobre