useMemo<T> function

T useMemo<T>(
  1. T createFunction(), [
  2. List? dependencies
])

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