useEffect function
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);