UseEffect

UseEffect is a hook that allows to manage side-effect, and its functionality is closely related to Lifecycle of the instance and its dependencies.

Note

The instance(or dependency) is the instance of the class where the hook is used. In this case, we will refer to the instance as the dependency which is managed by dependency injection.

Syntax

UseEffect(
  void | Function callback(),
  List<ReactterState> dependencies,
);

// UseEffect run on init
UseEffect.runOnInit(
  void | Function callback(),
  List<ReactterState> dependencies,
);

UseEffect accepts these arguments:

• callback : A function that performs side effects. This function is executed when the dependencies argument changes or the instance trigger Lifecycle.didMount event. If the callback returns a Function (considers as an effect cleanup), it will be called before the next effect is run or the instance trigger Lifecycle.willUnmount event.

  Tip

  The effect cleanup is useful for cleaning up any resources or subscriptions that the effect may have created.

  Note

  The callback and effect cleanup function may be called by Lifecycle events, such as Lifecycle.didMount and Lifecycle.willUnmount. However, they work only if the instance is provided to the widget tree using the API of flutter_reactter package.

• dependencies: A list of state( ReactterState , learn about it here) that the effect depends on.

Properties & Methods

UseEffect provides the following properties and methods:

• 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

UseEffect can be initialized using the constructor class, e.g.:

class MyCounter {
  final uCount = UseState(0);

  const MyCounter() {
    final timer = Timer.periodic(Duration(seconds: 1), (_) => uCount.value++);

    UseEffect(() {
      // Execute by `uCount` state changed or 'Lifecycle.didMount' event
      print("Count: ${uCount.value}");

      return () {
        // Effect cleanup - Execute before `uCount` state changed or 'Lifecycle.willUnmount' event
        if (uCount.value == 10 && timer.isActive) {
          timer.cancel();
          print("Counter stopped");
        }
      };
    }, [uCount]);
  }
}

In the example above, the UseEffect hook is used to print the value of the uCount state every second and stop the timer when the value reaches 10 .

Running it inmediately

Sometime you may want to execute inmediately the UseEffect is initialized, you can use UseEffect.runOnInit to do that, e.g.:

final uCount = UseState(0);

void main() {
  UseEffect.runOnInit(() {
    // Execute by `uCount` state changed or 'Lifecycle.didMount' event
    print("Count: ${uCount.value}");
    Future.delayed(const Duration(seconds: 1), () => uCount.value++);

    return () {
      // Effect cleanup - Execute before `uCount` state changed or 'Lifecycle.willUnmount' event
      print("Cleanup executed");
    };
  }, [uCount]);
}

In the example above, the UseEffect.runOnInit hook is used to print the value of the uCount state inmediately and increment the value every second.

Tip

The UseEffect.runOnInit is useful when you want to execute the callback function inmediately without waiting for Lifecycle.didMount event of instance.