MVVM explicado: o que é, quando usar e como aplicar em React Native

MVVM (Model-View-ViewModel) é um padrão que separa a interface da lógica de negócio.

O desafio da organização

Quando código de UI e regras de negócio ficam misturados, aparecem os mesmos problemas:

• Dificuldade para testar e manter
• Acoplamento entre tela e lógica
• Retrabalho ao mudar a interface
• Duplicação de código entre telas

Os três componentes

Cada um com uma responsabilidade clara:

Camada	Responsabilidade
View	Exibe dados e captura interações do usuário
ViewModel	Prepara dados e comandos para a tela
Model	Dados e regras de negócio do domínio

O fluxo é View ↔ ViewModel ↔ Model. O Model não conhece a View.

Model

A camada de dados e regras de negócio.

• Estruturas de dados e entidades do domínio
• Validações, cálculos e regras de negócio
• Não conhece View nem ViewModel

View

A interface do usuário: o que ele vê e toca.

• Telas e componentes (React Native, Flutter, Swift/Kotlin etc.)
• Exibe dados expostos pelo ViewModel
• Sem lógica de negócio, só apresentação e eventos

ViewModel

A ponte entre View e Model: estado e lógica da tela.

• Transforma dados do Model para a View
• Expõe propriedades e comandos (binding)
• Lógica de apresentação, sem depender da UI

Como fica em React Native

Cada tela vira uma pasta pequena, com um arquivo para cada papel:

features/cart/
  index.tsx        // View: só renderiza
  viewModel.ts     // ViewModel: estado e handlers
  models.ts        // Model: tipos e regras

// models.ts
export type CartItem = { id: string; name: string; price: number; qty: number }

export const cartTotal = (items: CartItem[]) =>
  items.reduce((sum, i) => sum + i.price * i.qty, 0)

// viewModel.ts
import { useState } from 'react'
import { cartTotal, type CartItem } from './models'

export function useCartViewModel(initial: CartItem[]) {
  const [items, setItems] = useState(initial)

  const remove = (id: string) => setItems((prev) => prev.filter((i) => i.id !== id))

  return { items, total: cartTotal(items), remove }
}

// index.tsx
export default function CartScreen() {
  const { items, total, remove } = useCartViewModel(initialItems)
  return <CartList items={items} total={total} onRemove={remove} />
}

A View não sabe como o total é calculado. O ViewModel pode ser testado sem renderizar nada.

Por que usar MVVM

• Testar a lógica de tela sem depender da interface
• Redesenhar a UI sem quebrar regras de negócio
• Design e backend evoluem em paralelo
• Código mais reutilizável e manutenção mais simples

Onde usar

O padrão serve para mobile, web com estado complexo e desktop:

• Mobile: Swift, Kotlin, React Native, Flutter
• Web: Vue, React, Angular
• Desktop: WPF, .NET MAUI, SwiftUI

Meu projeto precisa?

Considere MVVM quando:

• Várias telas compartilham lógica e estado
• Você quer testar lógica sem depender da UI
• Design e backend evoluem em ritmos diferentes
• O app tende a crescer, e a equipe também

Telas simples e estáticas podem dispensar o padrão.

Resumo

Model = dados e regras. View = o que o usuário vê. ViewModel = ponte e estado da tela. Separação clara, testes e manutenção mais fáceis.