useEffect function

void useEffect(
  1. dynamic sideEffect(), [
  2. List<Object?>? dependencies
])

Runs sideEffect after every completed render of a uiFunction component.

If dependencies are given, sideEffect will only run if one of the dependencies have changed. sideEffect may return a cleanup function that is run before the component unmounts or re-renders.

Note: there are two rules for using Hooks:

  • Only call Hooks at the top level.
  • Only call Hooks from inside the first argument of uiFunction.

Example:

UiFactory<UseEffectExampleProps> UseEffectExample = uiFunction(
  (props) {
    final count = useState(1);
    final evenOdd = useState('even');

    useEffect(() {
      if (count.value % 2 == 0) {
        evenOdd.set('even');
      } else {
        evenOdd.set('odd');
      }
      return () {
        print('count is changing... do some cleanup if you need to');
      };

      // This dependency prevents the effect from running every time [evenOdd.value] changes.
    }, [count.value]);

    return Fragment()(
      Dom.p()('${count.value} is ${evenOdd.value}'),
      (Dom.button()
        ..onClick = (_) => count.set(count.value + 1)
      )('+'),
    );
  },
  _$UseEffectExampleConfig, // ignore: undefined_identifier
);

See: reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects.

Implementation

void useEffect(dynamic Function() sideEffect, [List<Object?>? dependencies]) => react_hooks.useEffect(sideEffect, dependencies);