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 DartFunctionComponent.
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 a DartFunctionComponent.
Example:
UseMemoTestComponent(Map 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 react.Fragment({}, [
react.div({}, ['Fibonacci of ${count.value} is $fib']),
react.button({'onClick': (_) => count.setWithUpdater((prev) => prev + 1)}, ['+']),
]);
}
Learn more: reactjs.org/docs/hooks-reference.html#usememo.
Implementation
T useMemo<T>(T Function() createFunction, [List<dynamic>? dependencies]) =>
React.useMemo(allowInterop(createFunction), dependencies) as T;