Mastering Reactions and Computed Values in MobX for Flutter

7.2.3 Using Reactions and Computed Values

In the world of state management, MobX stands out for its simplicity and powerful reactivity model. Two of its core features, reactions and computed values, play a crucial role in creating responsive and efficient applications. This section delves into these concepts, providing you with the knowledge and tools to implement them effectively in your Flutter projects.

Understanding Reactions

Reactions in MobX are functions that automatically respond to changes in observables. They are essential for creating side effects in response to state changes, such as updating the UI or triggering network requests. MobX provides three primary methods for handling reactions: autorun, reaction, and when.

Autorun

The autorun function is a straightforward way to create a reaction that runs immediately and re-executes whenever any observable it references changes. This is particularly useful for logging or simple state-dependent actions.

Example:

autorun(() {
  print('Name changed to $name');
});

In this example, the autorun function prints a message every time the name observable changes.

Reaction

The reaction method allows you to specify a more targeted reaction, responding only to changes in specific observables. It consists of two parts: a function that returns the observable to watch and a side effect function that executes when the observable changes.

Example:

reaction(
  (_) => age,
  (int newAge) => print('Age changed to $newAge'),
);

Here, the reaction watches the age observable and prints a message whenever it changes.

When

The when method is a conditional reaction that waits until a specified condition is met before executing a function. This is useful for triggering actions only when certain criteria are satisfied.

Example:

when(
  () => age >= 18,
  () => print('User is now an adult'),
);

In this example, the when function waits until the age observable reaches 18 before printing a message.

Implementing Reactions

To effectively use reactions, it’s important to understand how to implement and manage them within your application. Below are some practical examples and considerations.

Code Examples

Let’s expand on the examples provided earlier to demonstrate how reactions can be integrated into a Flutter application.

Autorun Example:

final name = Observable('John Doe');

autorun(() {
  print('Name changed to $name');
});

Reaction Example:

final age = Observable(17);

reaction(
  (_) => age.value,
  (int newAge) => print('Age changed to $newAge'),
);

When Example:

when(
  () => age.value >= 18,
  () => print('User is now an adult'),
);

Disposing Reactions

Reactions can consume resources if not managed properly. It’s crucial to dispose of them when they are no longer needed to prevent memory leaks. MobX provides disposer functions for this purpose.

Example:

final disposer = autorun(() {
  print('Name changed to $name');
});

// Dispose of the reaction when it's no longer needed
disposer();

Computed Values

Computed values in MobX are derived values that automatically update when their dependencies change. They are defined using the @computed annotation and help keep your code DRY (Don’t Repeat Yourself) by encapsulating logic that depends on observable data.

Defining Computed Values

To declare a computed value, use the @computed annotation and define a getter that returns the derived value.

Example:

@computed
String get userInfo => '$name, Age: $age';

In this example, userInfo is a computed value that combines the name and age observables.

Benefits of Computed Values

Computed values offer several advantages:

• Code Reusability: By encapsulating derived logic, computed values reduce code duplication.
• Performance Optimization: MobX caches computed values, recalculating them only when their dependencies change.
• Declarative Logic: Computed values provide a clear and declarative way to express derived state.

Best Practices

When using computed values and reactions, consider the following best practices:

• Use Computed Values for Derived Data: Whenever you need to derive data from observables, use computed values to encapsulate the logic.
• Keep Computed Properties Pure: Ensure that computed properties are pure functions without side effects, as this maintains predictability and reliability.
• Dispose of Reactions Appropriately: Always dispose of reactions when they are no longer needed to avoid memory leaks.

Code Examples

Let’s expand our store with additional computed properties to illustrate their use.

final hobbies = ObservableList<String>();

@computed
bool get hasHobbies => hobbies.isNotEmpty;

In this example, hasHobbies is a computed value that checks if the hobbies list is not empty.

Visualizing with Mermaid.js Diagrams

To better understand how computed values and reactions fit into the MobX system, let’s visualize their relationships using Mermaid.js diagrams.

    graph TD;
	  A[Observable: name] --> B[Computed: userInfo];
	  A --> C[Reaction: autorun];
	  B --> D[UI Component];
	  C --> D;

In this diagram, the name observable affects both the userInfo computed value and a reaction. The computed value and reaction, in turn, influence a UI component.

Key Takeaways

• Reactions are essential for creating side effects in response to observable changes. Use autorun, reaction, and when to handle different scenarios.
• Computed Values provide a powerful way to derive and cache data, improving code maintainability and performance.
• Properly managing reactions and computed values can significantly enhance the reactivity and efficiency of your Flutter applications.

Further Exploration

For more information on MobX and its features, consider exploring the following resources:

• MobX Documentation
• Flutter MobX Package
• MobX GitHub Repository

By understanding and implementing reactions and computed values, you can take full advantage of MobX’s capabilities, creating responsive and efficient Flutter applications.

Quiz Time!