UseCompute

UseCompute is a hook that allows you to define a computation method ( computeValue ) to derive a value based on the current state of one or more dependencies. When any of these dependencies notify to change, the hook recalculates the value and provides the updated result.

Syntax

UseCompute<T>(
  T computeValue(),
  List<RtState> dependencies,
  { String? debugLabel },
);

UseCompute accepts these parameters:

• computeValue : A function that returns a value based on the current state of the dependencies.
• dependencies: A list of state( RtState , learn about it here) that the computation depends on. When any of these dependencies trigger Lifecycle.didUpdate event, the value is recalculated.
• debugLabel: (optional) A label to identify the hook in the DevTools extension.

Properties & Methods

UseCompute provides the following properties and methods:

• value: A getter that allows you to read the computed value.

Properties and methods inherited from RtState

• debugLabel: A string that represents the label of the state object for debugging purposes.
• debugInfo: A map that contains debug information about the state object.

• update : Executes a callback function and notify its observers that the state has changed. When it is invoked, it emits two lifecycle events to signal the state transition:
  • Lifecycle.willUpdate is emitted first, indicating the impending update.
  • Lifecycle.didUpdate is emitted once the update process is complete.
• notify : Forces the state to notify its observers. Unlike update , it emits only the Lifecycle.didUpdate event, as it doesn’t involve any preparatory steps before the notification.
• bind : Establishes a connection between the state and a specific instance. This connection allows the instance to reactively update based on changes to the state. By binding the state, the instance becomes aware of changes to the state and can appropriately reflect those changes in its behavior.
• unbind : Releases the connection between the state and the instance. When unbinding, the instance will no longer receive updates from the state. This can be useful when an instance is no longer actively using the state or when it needs to detach from the state temporarily or permanently.
• dispose : Is responsible for cleaning up the state and any associated observers or resources. Disposing of the state ensures that it is properly released and no longer consumes memory or processing resources unnecessarily.

Note

While the bind , unbind and dispose methods are normally used to manage the lifecycle of a state, Reactter handles this automatically, when the state is declared inside an instance that exists within Reactter’s context via the dependecy injection, so you don’t need to worry about it(Learn more about Binding State to Dependency).

Usage

Declaration

UseCompute can be initialized using the constructor class:

final uStateA = UseState<int>(0);
final uStateB = UseState<int>(0);

final uTotal = UseCompute<int>(
  () => uStateA.value + uStateB.value,
  [uStateA, uStateB],
);

Note

In some cases, you may need to declare a state variable that will be initialized later. For this, you can use the late keyword. When using UseCompute as late within a dependency(class registered via the dependency injection), use Rt.lazyState (Learn more about Lazy state binding). e.g:

item_controller.dart

class ItemController {
  final Product product;

  final uPrice = UseState<int>(0);
  final uQuantity = UseState<int>(0);

  late final uTotal = Rt.lazyState(
    () => UseCompute<int>(
      () => uPrice.value * uQuantity.value,
      [uPrice, uQuantity],
    ),
    this,
  );

  int get price => uPrice.value;
  int get quantity => uQuantity.value;
  int get total => uTotal.value;

  ItemController(this.product) {
    uPrice.value = product.price;
    uQuantity.value = product.quantity;
  }

  void setPrice(int price) {
    uPrice.value = price;
  }

  void setQuantity(int quantity) {
    uQuantity.value = quantity;
  }
}

Reading the computed value

UseCompute has a value property that allows you to read the computed value:

print("Total: ${uTotal.value}");

Computing the value

When any of the dependencies change, the value property recalculates the result based on the computeValue function, e.g.:

main.dart

final uStateA = UseState(1);
final uStateB = UseState(2);

final uResult = UseCompute(
  // The `clamp` is a method that returns this num clamped
  // to be in the range lowerLimit-upperLimit(e.g., 5-10).
  () => addAB().clamp(5, 10),
  [uStateA, uStateB],
);

int addAB() => uStateA.value + uStateB.value;
void printResult() => print("${addAB()} -> ${uResult.value}");

void main() {
  Rt.on(
    uResult,
    Lifecycle.didUpdate,
    (_, __) => print("uResult changed with: ${uResult.value}"),
  );

  printResult(); // 3 -> 5
  uStateA.value += 1; // Will not notify change
  printResult(); // 4 -> 5
  uStateB.value += 2; // Will notify change
  printResult(); // 6 -> 6
  uStateA.value += 6; // Will notify change
  printResult(); // 12 -> 10
  uStateB.value -= 1; // Will not notify change
  printResult(); // 13 -> 10
  uStateA.value -= 5; // Will notify change
  printResult(); // 8 -> 8
}

In above example, the value of uResult will be recalculated when the value of uStateA or uStateB changes. But when the calculated value is same as the previous value, it will not notify the change.

Note

UseCompute notifies that its value has changed when the previous value is different from the current value. If its value is an Object , it does not detect internal changes, only when value is setted to another Object . Learn more about updating objects in state.

Using with Memo

UseCompute does not cache the computed value, meaning that it will computing the value every time the dependencies is changed, potentially impacting performance, especially if the computeValue is expensive. In this case, you should consider using  Memo  to cache the computed value, e.g.:

final addAB = Memo(
  (Args2 args) => args.arg1 + args.arg2,
);

final uResult = UseCompute(
  () => addAB(
    Args2(uStateA.value, uStateB.value),
  ),
  [uStateA, uStateB],
);

Updating the value

Use update method to notify changes after run a set of instructions:

uTotal.update((value) {
  uTotal.value = 10;
});

Use refresh method to force to notify changes.

uTotal.refresh();

Listening to changes

When value has changed, the UseCompute will emit the following events(learn about it here):

• Lifecycle.willUpdate event is triggered before the change in value or update method have been invoked.
• Lifecycle.didUpdate event is triggered after the change in value or after update or notify methods have been invoked.

Example of listening to changes:

Rt.on(
  uTotal,
  Lifecycle.didUpdate,
  (_, state) => print("State value has changed to: ${state.value}"),
);