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.

Reactter.lazyState

Reactter.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.

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

Syntax

T Reactter.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 = Reactter.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 = Reactter.create(() => CounterController(10));
  controller.uCount.value += 2; // Count: 12
  Reactter.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 Reactter.lazyState . It’s accessed after creating the CountController instance, and when the instance is deleted, the state is automatically disposed, ensuring efficient resource management.

Reactter.batch

The Reactter.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 Reactter.batch(T Function() callback);

Example

In this example, the UserController class demonstrates how to use the Reactter.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) {
    Reactter.batch(() {
      uName.value = name;
      uAge.value = age;
    });
  }
}

By using Reactter.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

Reactter.batch supports nested batching, meaning you can call Reactter.batch within another Reactter.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) {
  Reactter.batch(() {
    uName.value = name;
    uAge.value = age;

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

Reactter.untracked

The Reactter.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 Reactter.untracked(T Function() callback);

Example

In this example, the UserController class demonstrates how to use the Reactter.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) {
    Reactter.untracked(() {
      uName.value = name;
      uAge.value = age;
    });
  }
}

By using Reactter.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.