estou com um caso que deve ser bem comum para vocês.
Faço uma consulta de uma lista de venda em uma API Rest e nesse momento seto o estado isLoading para true, de forma que um componente de Spinner que tenho fique visível e no final da consulta seto para false para que o mesmo desapareça
const [isLoading, setIsLoading] = useState(false)
useEffect(() => {
setIsLoading(true)
fetchSales()
setIsLoading(false)
}, [dayInitial, dayFinal])
Bem, aqui começa o problema... Pois apesar de eu ter setado o valor de isLoading para true, o mesmo continua false e a consulta é realizada sem exibir o Spinner. Em minhas pesquisas na internet descobri que esse comportamento é normal, uns dizem que o useState não faz essa atribuição de maneira síncrona e por isso esse problema ocorre, outros alegam que o problema ocorre porque o valor não muda dentro da closure(https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately). Aqui vem a minha primeira indagação, pois estou iniciando meu estudos em React Native. Como então vocês fazem nesse caso para habilitar/desabilitar o Spinner?
Continuando... Antes desse projeto, eu fiz um similar, onde buscava uma lista de clientes, mas nesse projeto usei o Context API para gerenciamento dos estados, com os hooks useContext e useReducer, e a chamada do método de busca era assim:
useEffect(() => {
dispatch({
type: 'setIsLoading',
payload: true
})
loadClients()
dispatch({
type: 'setIsLoading',
payload: false
})
}, [props.route.params?.addValue])
Fiz basicamente a mesma coisa, sendo que dessa vez setei o isLoading usando o dispatch do useReducer. Nesse caso não tive problemas com assíncronismo na atribuição dos valores do estado, consegui atribuir o isLoading para true, fazer a busca e por fim atribuir para false. Porque nesse caso funcionou?