useMemo<T> function
Returns a memoized version of the return value of createFunction
.
If one of the dependencies
has changed, createFunction
is run during rendering of the dart function component.
This optimization helps to avoid expensive calculations on every render.
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<UseMemoExampleProps> UseMemoExample = uiFunction(
(props) {
final count = useState(0);
final fib = useMemo(
() => fibonacci(count.value),
/// This dependency prevents [fib] from being re-calculated every time the component re-renders.
[count.value],
);
return Fragment()(
Dom.div()('Fibonacci of ${count.value} is $fib'),
(Dom.button()
..onClick = (_) => count.setWithUpdater((prev) => prev + 1)
)('+'),
);
},
_$UseMemoExampleConfig, // ignore: undefined_identifier
);
Learn more: reactjs.org/docs/hooks-reference.html#usememo.
Implementation
T useMemo<T>(T Function() createFunction, [List<dynamic>? dependencies]) =>
react_hooks.useMemo(createFunction, dependencies);