);
}
describe('credits client mutations', () => {
it('should grant credits successfully', async () => {
const store = setupStore();
render(
);
fireEvent.click(screen.getByText('Conceder'));
await waitFor(() => {
expect(screen.getByText('Sucesso!')).toBeInTheDocument();
});
});
});
```
### Testando Atualizações Otimistas
```tsx
// credits.client.test.ts
import { server } from '@/test/server';
import { http, HttpResponse } from 'msw';
import { setupStore } from '@/app/store';
import { creditsClient } from './credits.client';
describe('optimistic updates', () => {
it('should update cache optimistically and rollback on error', async () => {
const store = setupStore();
const address = '0x123';
// Fazer prefetch do saldo inicial
await store.dispatch(
creditsClient.endpoints.getBalance.initiate({ address })
);
const initialBalance = creditsClient.endpoints.getBalance.select({ address })(
store.getState()
).data?.amount;
expect(initialBalance).toBe(100); // do handler do MSW
// Simular falha
server.use(
http.post('/api/v1/credits/grant', () => {
return HttpResponse.json({ error: 'Falha' }, { status: 500 });
})
);
// Disparar mutation
const mutation = store.dispatch(
creditsClient.endpoints.grantCredits.initiate({
address,
amount: 50,
})
);
// Verificar atualização otimista
const optimisticBalance = creditsClient.endpoints.getBalance.select({
address,
})(store.getState()).data?.amount;
expect(optimisticBalance).toBe(150); // 100 + 50
// Aguardar a falha da mutation
await expect(mutation).rejects.toThrow();
// Verificar rollback
const rolledBackBalance = creditsClient.endpoints.getBalance.select({
address,
})(store.getState()).data?.amount;
expect(rolledBackBalance).toBe(100); // De volta ao original
});
});
```
## Otimização de Performance
### Use `selectFromResult` para Evitar Re-renders
```tsx
// ✅ Bom: Inscreve-se apenas em campos específicos
const { owner } = useGetParcelQuery(
{ id },
{
selectFromResult: ({ data }) => ({
owner: data?.owner,
}),
}
);
// O componente só re-renderiza quando owner muda
```
### Evite Selecionar o State Inteiro
```tsx
// ✅ Bom: Selecione valores específicos
const viewMode = useAppSelector(selectViewMode);
const filters = useAppSelector(selectFilters);
// ❌ Ruim: Seleciona o slice inteiro
const ui = useAppSelector((state) => state.ui);
```
### Memoize Selectors Caros
```tsx
import { createSelector } from '@reduxjs/toolkit';
// ✅ Bom: Selector memorizado
export const selectFilteredParcels = createSelector(
[selectAllParcels, selectFilters],
(parcels, filters) => {
// Lógica de filtragem cara
return parcels.filter(/* ... */);
}
);
// ❌ Ruim: Computado no componente
function Component() {
const parcels = useAppSelector(selectAllParcels);
const filters = useAppSelector(selectFilters);
// Recalcula em cada renderização!
const filtered = parcels.filter(/* ... */);
}
```
### Use Entity Adapters para Dados Normalizados
```tsx
// ✅ Bom: Normalizado com entity adapter
const adapter = createEntityAdapter();
// Buscas eficientes por ID
const parcel = adapter.getSelectors().selectById(state, id);
// ❌ Ruim: Busca em array
const parcel = state.parcels.find((p) => p.id === id);
```
### Ajuste as Configurações de Cache do RTK Query
```tsx
export const client = createApi({
// ...
keepUnusedDataFor: 60, // Manter dados por 60 segundos
refetchOnMountOrArgChange: 30, // Fazer refetch se os dados tiverem mais de 30s
refetchOnFocus: true, // Fazer refetch quando a janela recuperar o foco
refetchOnReconnect: true, // Fazer refetch ao reconectar
});
```
### Prefetch para Melhor UX
```tsx
function ParcelListItem({ parcel }: { parcel: Parcel }) {
const dispatch = useAppDispatch();
const handleMouseEnter = () => {
// Fazer prefetch ao passar o mouse
dispatch(
client.util.prefetch('getParcel', { id: parcel.id }, { force: false })
);
};
return (
{parcel.name}
);
}
```
### Estratégia de Polling
```tsx
// Fazer polling apenas quando necessário
const { data } = useGetBalanceQuery(
{ address },
{
pollingInterval: isActive ? 10000 : 0, // Fazer polling apenas quando ativo
skipPollingIfUnfocused: true, // Pausar quando a aba não estiver em foco
}
);
```
## Redux DevTools
### Ativar em Desenvolvimento
```tsx
export const store = configureStore({
// ...
devTools: process.env.NODE_ENV !== 'production',
});
```
### Sanitizador de Actions
Sanitize dados sensíveis no DevTools:
```tsx
const actionSanitizer = (action: any) => {
if (action.type === 'user/loggedIn') {
return {
...action,
payload: {
...action.payload,
authToken: '***REDACTED***',
},
};
}
return action;
};
export const store = configureStore({
// ...
devTools: {
actionSanitizer,
},
});
```
## Lista de Verificação de Boas Práticas
### Desempenho
* [ ] Use `selectFromResult` para resultados grandes de query
* [ ] Memoize selectors caros com `createSelector`
* [ ] Use entity adapters para coleções normalizadas
* [ ] Evite selecionar slices inteiros nos components
* [ ] Ajuste `keepUnusedDataFor` com base no seu caso de uso
* [ ] Faça prefetch dos dados antes da navegação
* [ ] Use polling estrategicamente (somente quando necessário)
### Teste
* [ ] Teste unitariamente todos os reducers e actions
* [ ] Teste selectors memorizados quanto à correção e performance
* [ ] Use MSW para testes de endpoint do RTK Query
* [ ] Teste atualizações otimistas e lógica de rollback
* [ ] Teste o tratamento de erros nos components
* [ ] Escreva testes de integração para fluxos críticos
### Qualidade de Código
* [ ] Use typed hooks (`useAppSelector`, `useAppDispatch`)
* [ ] Lide com todos os estados da query (carregando, erro, sucesso)
* [ ] Use `.unwrap()` para tratamento de erro da mutation
* [ ] Invalide ou atualize o cache após mutations
* [ ] Mantenha dados não serializáveis fora do Redux
* [ ] Documente selectors e lógica complexos
## Anti-Padrões a Evitar
{% hint style="danger" %}
**Não faça isto:**
1. Armazene objetos não serializáveis (providers, signers) no Redux
2. Duplique dados tanto em slices quanto em RTK Query
3. Dispare actions durante a renderização
4. Crie selectors que retornam novos objetos sem memoização
5. Ignore estados de carregamento e erro
6. Busque os mesmos dados em múltiplos components sem RTK Query
7. Faça polling em excesso ou polling sem `skipPollingIfUnfocused`
{% endhint %}
## Monitorando a Performance
### Acompanhe Chamadas de Selector
```tsx
import { createSelector } from '@reduxjs/toolkit';
const selectExpensiveData = createSelector(
[selectData],
(data) => {
console.log('Selector chamado'); // Deve registrar apenas quando os dados mudarem
return expensiveOperation(data);
}
);
```
### Monitore Re-renders
```tsx
import { useEffect, useRef } from 'react';
function useRenderCount() {
const renderCount = useRef(0);
useEffect(() => {
renderCount.current += 1;
console.log('Contagem de renderizações:', renderCount.current);
});
}
function Component() {
useRenderCount(); // Acompanhe re-renders
// ...
}
```
## Próximos passos
* Rever [Padrões de Components](/contributor/contributor-pt/guias-para-colaboradores/padroes-de-ui/component-patterns.md) para exemplos de uso
* Veja [RTK Query](/contributor/contributor-pt/guias-para-colaboradores/padroes-de-ui/rtk-query.md) para estratégias de cache
* Entenda [Gerenciamento de State](/contributor/contributor-pt/guias-para-colaboradores/padroes-de-ui/state-management.md) para otimização de slices
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://docs.decentraland.org/contributor/contributor-pt/guias-para-colaboradores/padroes-de-ui/testing-and-performance.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.