Olá.
No vídeo dessa aula, foi mostrado como criar um seletor assíncrono para obter os dados de evento de uma API e usar esse seletor como valor default de um átomo. Também foi usado o componente Suspense para aguardar a finalização da chamada assíncrona.
Por favor, gostaria de saber se essa abordagem não seria semelhante ao que fazemos ao utilizar o useEffect para obter dados quando um componente carrega. No caso do Recoil, isso é feito da maneira como mostrada no vídeo, ou é só uma das soluções?
Eu tentei fazer isso aplicando um useEffect no componente ListaDeEventos, mantendo o átomo listaDeEventosState vazio por default e sem usar o componente Suspense e, aparentemente, funcionou:
// atom.ts
export const listaDeEventosState = atom<IEvento[]>({
key: 'listaDeEventosState',
default: []
});
// componente ListaDeEventos
const setEventos = useSetRecoilState(listaDeEventosState);
useEffect(() => {
// obtém os dados da API
fetch('http://localhost:8080/eventos')
.then(response => response.json())
.then((data: IEvento[]) => setEventos(data.map(evento => ({
...evento,
inicio: new Date(evento.inicio),
fim: new Date(evento.fim),
}))))
}, [])
