<h2>O Que São State Machines e Por Que Devemos Usar?</h2>
<p>Uma máquina de estados é um modelo matemático que descreve o comportamento de um sistema através de estados bem definidos e transições entre eles. Diferentemente de código imperativo tradicional, onde você gerencia o estado através de várias variáveis booleanas e condicionais espalhadas pelo aplicativo, uma máquina de estados centraliza essa lógica em um diagrama claro e testável.</p>
<p>O grande problema ao construir aplicações complexas é o "gerenciamento caótico de estado". Imagine um formulário de login: ele pode estar em repouso, carregando, sucesso ou erro. Com useState tradicionais, você termina com múltiplas flags booleanas que podem entrar em combinações inválidas. Uma máquina de estados garante que você nunca entre em um estado impossível. XState é uma biblioteca que implementa essa filosofia de forma elegante em React, permitindo que você defina máquinas de estado complexas de forma declarativa.</p>
<p>A abordagem baseada em máquinas de estados também melhora significativamente a manutenibilidade. Quando o comportamento da aplicação está explícito no diagrama de estados, é mais fácil adicionar features, debugar bugs e comunicar a lógica com designers e product managers. Você documenta o comportamento da aplicação simultaneamente ao implementá-la.</p>
<h2>Conceitos Fundamentais do XState</h2>
<h3>Estados e Transições</h3>
<p>Em XState, um <strong>estado</strong> é uma situação bem definida em que seu componente ou aplicação pode estar. Uma <strong>transição</strong> é o movimento de um estado para outro, geralmente acionado por um evento. Vejamos um exemplo concreto com uma máquina de semáforo:</p>
<pre><code class="language-javascript">import { createMachine } from 'xstate';
const semáforoMachine = createMachine({
id: 'semáforo',
initial: 'vermelho',
states: {
vermelho: {
on: {
NEXT: 'amarelo'
}
},
amarelo: {
on: {
NEXT: 'verde'
}
},
verde: {
on: {
NEXT: 'vermelho'
}
}
}
});</code></pre>
<p>Aqui temos três estados (<code>vermelho</code>, <code>amarelo</code>, <code>verde</code>) e um evento (<code>NEXT</code>) que permite transições. Cada estado define para quais estados pode transicionar quando um evento específico ocorre. Isso é fundamental: você não pode ir de <code>vermelho</code> para <code>verde</code> diretamente porque essa transição não está definida.</p>
<h3>Contexto: Armazenando Dados Associados</h3>
<p>Estados descrevem <em>onde</em> você está, mas frequentemente você precisa armazenar dados associados àquele estado. XState chama isso de <strong>contexto</strong>. Se um estado representa "carregando dados do servidor", o contexto pode armazenar os dados já obtidos, o erro que ocorreu, ou um ID do recurso sendo carregado.</p>
<pre><code class="language-javascript">import { createMachine } from 'xstate';
const fetchMachine = createMachine({
id: 'fetch',
initial: 'idle',
context: {
data: null,
error: null
},
states: {
idle: {
on: {
FETCH: 'loading'
}
},
loading: {
on: {
SUCCESS: {
target: 'success',
actions: 'setData'
},
ERROR: {
target: 'error',
actions: 'setError'
}
}
},
success: {
on: {
RESET: {
target: 'idle',
actions: 'resetContext'
}
}
},
error: {
on: {
RETRY: 'loading',
RESET: 'idle'
}
}
}
}, {
actions: {
setData: (context, event) => {
context.data = event.data;
},
setError: (context, event) => {
context.error = event.error;
},
resetContext: (context) => {
context.data = null;
context.error = null;
}
}
});</code></pre>
<p>O contexto é o segundo parâmetro onde você define <code>actions</code>. Estas são funções que executam quando transições ocorrem, permitindo que você modifique o contexto conforme necessário. Isso mantém a lógica de transformação de dados próxima ao fluxo de estado.</p>
<h3>Guards: Transições Condicionais</h3>
<p>Nem toda transição deve sempre ser possível. <strong>Guards</strong> (guardas) são condições que devem ser verdadeiras para que uma transição ocorra. Imagine um checkout de e-commerce: você só pode ir para "pagamento" se há itens no carrinho.</p>
<pre><code class="language-javascript">const checkoutMachine = createMachine({
id: 'checkout',
initial: 'cart',
context: {
items: []
},
states: {
cart: {
on: {
PROCEED: [
{
target: 'shipping',
cond: (context) => context.items.length > 0
},
{
target: 'cart'
}
]
}
},
shipping: {
on: {
BACK: 'cart',
CONFIRM: 'payment'
}
},
payment: {
on: {
BACK: 'shipping'
}
}
}
});</code></pre>
<p>Quando há múltiplas transições para o mesmo evento, XState avalia os <code>cond</code> (conditions) em ordem. A primeira que passar é executada. Se nenhuma passar, nenhuma transição ocorre. Isso é muito mais legível do que aninhamento de if-else espalhado pelo código.</p>
<h2>Integrando XState com React: useMachine e Interpretação</h2>
<h3>O Hook useMachine</h3>
<p>XState fornece um hook chamado <code>useMachine</code> que conecta uma máquina de estado ao ciclo de vida do React. Este hook retorna o estado atual e uma função <code>send</code> para disparar eventos.</p>
<pre><code class="language-javascript">import { useMachine } from '@xstate/react';
import { createMachine } from 'xstate';
const toggleMachine = createMachine({
id: 'toggle',
initial: 'off',
states: {
off: {
on: { TOGGLE: 'on' }
},
on: {
on: { TOGGLE: 'off' }
}
}
});
function ToggleButton() {
const [state, send] = useMachine(toggleMachine);
return (
<div>
<p>Estado: {state.value}</p>
<button onClick={() => send('TOGGLE')}>
Alternar
</button>
</div>
);
}</code></pre>
<p><code>state.value</code> contém o estado atual como string. Quando você chama <code>send('TOGGLE')</code>, XState processa o evento, executa qualquer action definida, e atualiza o estado React. O componente re-renderiza automaticamente.</p>
<h3>Um Exemplo Completo: Formulário com Validação</h3>
<p>Vamos construir um formulário de cadastro que demonstra como tudo funciona junto:</p>
<pre><code class="language-javascript">import { createMachine } from 'xstate';
import { useMachine } from '@xstate/react';
import { useState } from 'react';
const formMachine = createMachine({
id: 'form',
initial: 'editing',
context: {
name: '',
email: '',
errors: {}
},
states: {
editing: {
on: {
CHANGE: {
actions: 'updateField'
},
SUBMIT: [
{
target: 'validating',
cond: (context) => context.name.length > 0
},
{
target: 'editing',
actions: 'setNameError'
}
]
}
},
validating: {
invoke: {
src: (context) => validateEmail(context.email),
onDone: {
target: 'submitting',
actions: 'assignData'
},
onError: {
target: 'editing',
actions: 'setEmailError'
}
}
},
submitting: {
invoke: {
src: (context) => submitForm(context),
onDone: 'success',
onError: {
target: 'editing',
actions: 'setSubmitError'
}
}
},
success: {
on: {
RESET: 'editing'
}
}
}
}, {
actions: {
updateField: (context, event) => {
context[event.field] = event.value;
context.errors = {};
},
setNameError: (context) => {
context.errors.name = 'Nome é obrigatório';
},
setEmailError: (context) => {
context.errors.email = 'Email inválido';
},
setSubmitError: (context, event) => {
context.errors.submit = event.data.message;
},
assignData: (context, event) => {
context.submitData = event.data;
}
}
});
async function validateEmail(email) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (email.includes('@')) {
resolve();
} else {
reject(new Error('Email inválido'));
}
}, 500);
});
}
async function submitForm(context) {
const response = await fetch('/api/form', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
name: context.name,
email: context.email
})
});
if (!response.ok) {
throw new Error('Falha ao enviar');
}
return response.json();
}
function CadastroForm() {
const [state, send] = useMachine(formMachine);
return (
<div>
{state.matches('success') ? (
<div>
<p>Cadastro realizado com sucesso!</p>
<button onClick={() => send('RESET')}>Novo Cadastro</button>
</div>
) : (
<form onSubmit={(e) => {
e.preventDefault();
send('SUBMIT');
}}>
<input
type="text"
placeholder="Nome"
value={state.context.name}
onChange={(e) => send({
type: 'CHANGE',
field: 'name',
value: e.target.value
})}
/>
{state.context.errors.name && (
<p style={{ color: 'red' }}>{state.context.errors.name}</p>
)}
<input
type="email"
placeholder="Email"
value={state.context.email}
onChange={(e) => send({
type: 'CHANGE',
field: 'email',
value: e.target.value
})}
/>
{state.context.errors.email && (
<p style={{ color: 'red' }}>{state.context.errors.email}</p>
)}
<button
type="submit"
disabled={state.matches('validating') || state.matches('submitting')}
>
{state.matches('validating') ? 'Validando...' :
state.matches('submitting') ? 'Enviando...' :
'Cadastrar'}
</button>
{state.context.errors.submit && (
<p style={{ color: 'red' }}>{state.context.errors.submit}</p>
)}
</form>
)}
</div>
);
}
export default CadastroForm;</code></pre>
<p>Este exemplo mostra como <code>invoke</code> funciona: você pode entrar em um estado que executa código assíncrono (como validação ou chamadas à API), e transicionar para outro estado baseado no sucesso ou falha. O fluxo fica explícito e legível: edição → validação → envio → sucesso ou volta para edição com erro.</p>
<h2>Padrões Avançados e Boas Práticas</h2>
<h3>Máquinas Hierárquicas e Estados Compostos</h3>
<p>Conforme suas máquinas crescem, você pode organizá-las hierarquicamente. Estados podem conter sub-estados, e você pode transicionar entre sub-estados sem deixar o estado pai.</p>
<pre><code class="language-javascript">const checkoutMachine = createMachine({
id: 'checkout',
initial: 'cart',
states: {
cart: {
on: { PROCEED: 'payment' }
},
payment: {
initial: 'method',
states: {
method: {
on: { SELECT: 'review' }
},
review: {
on: { CONFIRM: '#checkout.confirmation' }
}
},
on: { CANCEL: 'cart' }
},
confirmation: {
type: 'final'
}
}
});</code></pre>
<p>O <code>#checkout.confirmation</code> é um reference externo para o estado final. Estados compostos ajudam a manter sub-fluxos isolados enquanto mantêm a hierarquia clara.</p>
<h3>Reutilização de Máquinas com Composição</h3>
<p>Em aplicações reais, você quer reutilizar máquinas. Você pode exportar uma máquina de um arquivo e importá-la em vários componentes, ou até mesmo compor máquinas menores em máquinas maiores.</p>
<pre><code class="language-javascript">// loginMachine.js
export const loginMachine = createMachine({
id: 'login',
initial: 'idle',
states: {
idle: {
on: { SUBMIT: 'authenticating' }
},
authenticating: {
invoke: {
src: (context) => authenticateUser(context.credentials),
onDone: 'success',
onError: 'error'
}
},
success: { type: 'final' },
error: {
on: { RETRY: 'idle' }
}
}
});
// appMachine.js
import { loginMachine } from './loginMachine';
export const appMachine = createMachine({
id: 'app',
initial: 'login',
states: {
login: {
invoke: {
src: loginMachine,
onDone: 'dashboard'
}
},
dashboard: {
on: { LOGOUT: 'login' }
}
}
});</code></pre>
<p>Assim, você pode testar <code>loginMachine</code> isoladamente, reutilizá-la em múltiplos contextos, e manter a complexidade gerenciável.</p>
<h3>Debugging e Visualização</h3>
<p>XState fornece ferramentas excelentes para debugging. Use o <a href="https://stately.ai/viz" target="_blank" rel="noopener noreferrer">XState Visualizer</a> para visualizar suas máquinas e testar transições interativamente. Para debugging em tempo de execução, você pode usar:</p>
<pre><code class="language-javascript">import { useMachine } from '@xstate/react';
import { inspect } from 'xstate';
// No seu arquivo principal
inspect({
url: 'ws://localhost:8888'
});
function MyComponent() {
const [state, send] = useMachine(myMachine);
// O estado será enviado para o inspector
console.log('Estado atual:', state.value);
console.log('Contexto:', state.context);
return / seu JSX /;
}</code></pre>
<h2>Conclusão</h2>
<p>Aprendemos que máquinas de estados eliminam o caos do gerenciamento de estado imperativo ao forçar você a pensar no comportamento da aplicação como um diagrama finito e explícito. XState implementa essa abstração de forma elegante em React, permitindo que você defina complexidade com clareza.</p>
<p>O segundo ponto crucial é que integração com React através do <code>useMachine</code> é simples e poderosa: você dispara eventos com <code>send()</code>, reage a mudanças de estado com <code>state.value</code>, e acessa dados com <code>state.context</code>. A biblioteca cuida da sincronização com o ciclo de vida do React automaticamente.</p>
<p>Por fim, as boas práticas de hierarquia, composição e reutilização de máquinas transformam XState de uma ferramenta bacana em uma abordagem arquitetural séria para aplicações React complexas. Máquinas bem estruturadas servem como documentação viva do comportamento esperado, facilitando manutenção e evoluções futuras.</p>
<h2>Referências</h2>
<ul>
<li><a href="https://xstate.js.org/docs/" target="_blank" rel="noopener noreferrer">Documentação Oficial XState</a></li>
<li><a href="https://xstate.js.org/docs/packages/xstate-react/" target="_blank" rel="noopener noreferrer">XState e React: Guia de Integração</a></li>
<li><a href="https://www.sciencedirect.com/science/article/pii/0167642387900359" target="_blank" rel="noopener noreferrer">Statecharts: A Visual Formalism for Complex Systems (David Harel)</a></li>
<li><a href="https://stately.ai/viz" target="_blank" rel="noopener noreferrer">Stately.ai Visualizer</a></li>
<li><a href="https://www.freecodecamp.org/news/state-machines-in-react/" target="_blank" rel="noopener noreferrer">Finley (Blog Detalhado sobre State Machines)</a></li>
</ul>
<p><!-- FIM --></p>