State Management Methods

Tip

This documentation assumes you’ve already read the State Management. It’s recommended read that first if you’re new in Reactter.

Reactter provides several methods to manage states in a more efficient way. These methods are used to create and manipulate states in a more organized way.

Rt.lazyState

Rt.lazyState is a method that allows to create a state lazily in a dependency(class registered via the dependency injection). It’s useful when you want to create a state that depends on other states or variables.

Rt.lazyState is generally used in states declared with the late keyword.

Syntax

T Rt.lazyState<T extends ReactterState>(T stateFn(), Object instance);

Example

For example, you can create a state lazily in a class like this:

counter_controller.dart

import "package:reactter/reactter.dart";

class CountController {
  final int initialCount;

  late final uCount = Rt.lazyState(
    () => UseState(this.initialCount),
    this,
  );

  CountController([this.initialCount = 0]) {
    UseEffect(() {
      print("Count: ${uCount.value}");
    }, [uCount]);
  }
}

and then use it like this:

main.dart

import "./counter_controller.dart";

void main() {
  final controller = Rt.create(() => CounterController(10));
  controller.uCount.value += 2; // Count: 12
  Rt.delete<CounterController>();
  controller.uCount.value += 3; // Error: "Can't update when it's been disposed"
}

In the example, the uCount state is lazily declared inside the CountController class using Rt.lazyState . It’s accessed after creating the CountController instance, and when the instance is deleted, the state is automatically disposed, ensuring efficient resource management.

Rt.registerState

Rt.registerState is a method that allows to register a RtState instance. All states created must be registered using this method for proper management and disposal.

Note

In most cases, you don’t need to manually use the Rt.registerState method to create a state when using RtHook or Signal classes, as they automatically handle the registration of the state instance.

However, if you’re creating a custom state using the RtState class directly, you must use Rt.registerState to properly register the state instance.

Syntax

T Rt.registerState<T extends RtState>(T stateFn());

Example

In this example, the custom state using RtState class is created and registered using Rt.registerState method.

class MyState extends RtState<MyState> {
  int _value = 0;
  int get value => _value;
  set value(int n) {
    if (n == _value) return;
    update(() => _value = n); // set new value and notify observers
  }

  MyState([int value = 0]) : _value = value;
}

final state = Rt.registerState<MyState>(() => MyState()); // Register state

Rt.on(
  state,
  Lifecycle.didUpdate,
  (_, __) => print('State updated: ${state.value}')
);

state.value = 42; // Calls update internally

Rt.batch

The Rt.batch method allows multiple state changes to be grouped together, triggering them all at the end when the callback completes. This ensures that associated side effects occur only once, improving performance and reducing unnecessary re-renders.

Syntax

T Rt.batch(T callback());

Example

In this example, the UserController class demonstrates how to use the Rt.batch method to manage state updates efficiently.

user_controller.dart

import "package:reactter/reactter.dart";

class UserController {
  final uName = UseState("John");
  final uAge = UseState(25);

  UserController() {
    UseEffect(() {
      print("Name: ${uName.value}, Age: ${uAge.value}");
    }, [uName, uAge]);
  }

  void updateUserInfo(String name, int age) {
    Rt.batch(() {
      uName.value = name;
      uAge.value = age;
    });
  }
}

By using Rt.batch , the updates to uName and uAge are grouped together, ensuring that the UseEffect hook’s callback is triggered only once after both state changes have been made. This improves performance by reducing unnecessary re-renders and ensuring that side effects, like printing the updated values, occur only once per batch of state changes.

Note

Rt.batch supports nested batching, meaning you can call Rt.batch within another Rt.batch . In such cases, the inner batch will be executed immediately, but the outer batch will delay the side effects until it completes. This ensures that all grouped state changes are applied efficiently and side effects are still minimized, e.g.:

void updateUserInfo(String name, int age, String email) {
  Rt.batch(() {
    uName.value = name;
    uAge.value = age;

    Rt.batch(() {
      uEmail.value = email;
    });
  });
}

Rt.untracked

The Rt.untracked method allows you to perform multiple state changes that are not tracked by the Reactter framework. This means that changes made using this method won’t trigger associated side effects or re-renders typically observed in reactive state management systems.

Syntax

T Rt.untracked(T callback());

Example

In this example, the UserController class demonstrates how to use the Rt.untracked method to update the states without triggering the associated side effects.

user_controller.dart

import "package:reactter/reactter.dart";

class UserController {
  final uName = UseState("John");
  final uAge = UseState(25);

  UserController() {
    UseEffect(() {
      print("Name: ${uName.value}, Age: ${uAge.value}");
    }, [uName, uAge]);
  }

  void updateUserInfo(String name, int age) {
    Rt.untracked(() {
      uName.value = name;
      uAge.value = age;
    });
  }
}

By using Rt.untracked , the updates to uName and uAge are made without triggering the associated side effects, ensuring that the UseEffect hook’s callback is not triggered after these state changes. This is useful when you want to update states without causing re-renders or side effects, e.g., when initializing states or performing batch updates.