Trabalhei em um projeto para uma grande empresa na qual precisamos melhorar a performance, diminuindo a quantidade de renderizações e o tempo de interação com a UX. Eis que então foi decidido usarmos o padrão de projeto Observable. É isso que vamos tratar neste artigo. O padrão de projeto Observable é um dos pilares fundamentais para a construção de aplicações reativas. Quando aplicado corretamente no desenvolvimento com React Native, ele pode trazer melhorias significativas na performance e na arquitetura da sua aplicação. Vamos explorar como implementar esse padrão e quais benefícios ele pode trazer.

React Native e Observable

O Que é o Padrão Observable?

O padrão Observable é um padrão de design que define uma relação um-para-muitos entre objetos. Em termos simples, um objeto (o observable) mantém uma lista de dependentes (os observers) que são notificados automaticamente de quaisquer mudanças de estado.

Por Que Usar o Padrão Observable no React Native?

Gerenciamento Eficiente de Estado: Facilita a sincronização do estado entre diferentes componentes.

Redução de Código Boilerplate: Simplifica o código, removendo a necessidade de gerenciar manualmente a atualização de componentes.

Melhora na Performance: Minimiza renderizações desnecessárias, atualizando apenas os componentes que precisam ser atualizados.

React Native: Implementação com MobX

Uma das bibliotecas mais populares para implementar o padrão Observable em React Native é o MobX. Vamos ver como configurá-la e usá-la.

Passo 1: Instalando o MobX

Primeiro, precisamos instalar o MobX e suas dependências.

npm install mobx mobx-react-lite

Passo 2: Configurando o MobX

Vamos criar uma store simples para gerenciar o estado.

/* store/TodoStore.js */

import { makeAutoObservable } from 'mobx';

class TodoStore {

todos = [];

constructor() {

makeAutoObservable(this);

}

addTodo = (todo) => {

this.todos.push(todo);

};

removeTodo = (index) => {

this.todos.splice(index, 1);

};

}

export const todoStore = new TodoStore();

Passo 3: Usando a Store no Componente

Agora, vamos usar a store no nosso componente React Native.

/* App.js */

import React, { useState } from 'react';

import { observer } from 'mobx-react-lite';

import { View, Text, TextInput, Button, FlatList } from 'react-native';

import { todoStore } from './store/TodoStore';

const App = observer(() => {

const [newTodo, setNewTodo] = useState('');

const handleAddTodo = () => {

if (newTodo.trim()) {

todoStore.addTodo({

id: Date.now(),

text: newTodo.trim(),

});

setNewTodo('');

}

};

return (

<View style={{ padding: 20 }}>

<TextInput

value={newTodo}

onChangeText={setNewTodo}

placeholder="Add new todo"

style={{ borderBottomWidth: 1, marginBottom: 10 }}

/>

<Button title="Add Todo" onPress={handleAddTodo} />

<FlatList

data={todoStore.todos}

keyExtractor={(item) => item.id.toString()}

renderItem={({ item, index }) => (

<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginVertical: 5 }}>

<Text>{item.text}</Text>

<Button title="Remove" onPress={() => todoStore.removeTodo(index)} />

</View>

)}

/>

</View>

);

});

export default App;

Benefícios da Implementação

1. Reatividade Automática

Com MobX, qualquer mudança no estado da store resulta em uma atualização automática dos componentes que observam essas mudanças. Isso elimina a necessidade de manipulação manual do estado e das renderizações.

2. Performance Melhorada

O MobX atualiza apenas os componentes que realmente precisam ser atualizados. Isso reduz significativamente o número de renderizações desnecessárias, melhorando a performance da aplicação.

3. Código Limpo e Manutenível

O uso do padrão Observable ajuda a manter o código limpo e modular. A separação clara entre a lógica de negócios e a camada de apresentação torna a manutenção e a escalabilidade da aplicação mais fáceis.

Conclusão

Implementar o padrão de projeto Observable no React Native utilizando MobX pode trazer inúmeros benefícios para a sua aplicação. Desde melhorias na performance até um código mais limpo e manutenível, essa abordagem pode transformar a forma como você gerencia o estado e a reatividade em suas aplicações.

Fonte de estudo: https://mobx.js.org/observable-state.html

Grande abraço pessoal, espero ter ajudado e sempre lembrando que quaisquer comentários e sugestões respeitosas serão sempre muito bem vindos. Valeu!

LEIA TAMBÉM

Tutorial CRUD em app Android e iOS com React Native (Parte 4)