UseState

UseState is a hook that allows to declare state variables and manipulate its value, which in turn notifies about its changes to listeners.

Syntax

UseState<T>(T initialValue);

UseState accepts this argument:

• initialValue: Initial value of T type that it will hold.

Properties & Methods

UseState provides the following properties and methods:

• value: A getter/setter that allows to read and write its state.

• Methods inherited from ReactterState (Learn more here):

  • update : A method to notify changes after run a set of instructions.
  • refresh : A method to force to notify changes.
  • * bind : A method to bind an instance to it.
  • * unbind : A method to unbind an instance to it.
  • * dispose : A method to remove all listeners and free resources.

  Note

  * These methods are unnecessary when is declared within a dependency(class registered via the dependecy injection).

Usage

Declaration

UseState can be initialized using the constructor class:

final intState = UseState<int>(0);
final strState = UseState("initial value");
final userState = UseState(User());

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 UseState as late within a dependency(class registered via the dependency injection), use Reactter.lazyState (Learn more about Lazy state binding). e.g:

counter_controller.dart

class CounterController {
  final int initialCount;

  late final count = Reactter.lazyState(
    () => UseState(this.initialCount),
    this,
  );

  Counter([this.initialCount = 0]);
}

Reading and writing the value

UseState has a value property that allows to read and write its state:

intState.value = 10;
print("Current state: ${intState.value}");

Note

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

Updating the state

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

uState.update((value) {
  uState.value = "New value";
});

Use refresh method to force to notify changes.

userState.refresh();

Listening to changes

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

• Lifecycle.willUpdate event is triggered before the value change or update , refresh methods have been invoked.
• Lifecycle.didUpdate event is triggered after the value change or update , refresh methods have been invoked.

Example of listening to changes:

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