Objetivo
Construir uma tela mobile no app do parceiro Aventura aplicando o padrão MVVM em React Native com TypeScript: Model (tipos + fetch), ViewModel (custom hook com estado e ações) e View (componente que só consome o hook).
Pontos-chave
- Por que mobile-first em sistema de recomendação: contexto de uso, sessão curta, push, geolocalização, restrições de bateria e rede.
- React Native em runtime nativo via JSI; diferença para Flutter (componentes nativos vs canvas Skia).
- MVVM em 3 camadas: View ⇄ ViewModel → Model. A View não conhece o Model.
- Custom hook como ViewModel:
useEspetaculosViewModel()retornaitems,loading,error,reload. - FlatList virtualizada, pull-to-refresh, tratamento de loading e error.
- Estado:
useState> Context > Zustand > Redux Toolkit (use o mais simples que resolve). - Cache offline com AsyncStorage / TanStack Query; estratégia stale-while-revalidate.
- Performance: memoização (
React.memo,useMemo,useCallback), imagens otimizadas, Hermes. - Como conectar ao recommendation service desenhado na aula 3:
GET /recommendations/:userId?k=10.
Conexão com a aula 7
A aula 7 entra em Orientação a Objetos com TDD — escrever os testes antes do código. O ViewModel que você acabou de criar é o primeiro candidato: testá-lo isoladamente (sem montar a UI) é exatamente o que MVVM promete e o que o TDD vai exercitar na próxima sessão.