memo2

JSAny memo2(

  1. JSAny component, {

  2. bool arePropsEqual(
    1. Map<String, Object?> prevProps,
    2. Map<String, Object?> nextProps
    )?,
})

Creates a memoized version of a component that only re-renders when its props have changed.

By default, it will only shallowly compare complex objects in the props object. If you want control over the comparison, you can provide an arePropsEqual function.

Example:

final MyComponent = registerFunctionComponent((props) {
  return div(children: [pEl('Value: \${props['value']}')]);
});

final MemoizedComponent = memo2(MyComponent);

With custom comparison:

final MemoizedComponent = memo2(
  MyComponent,
  arePropsEqual: (prevProps, nextProps) {
    return prevProps['id'] == nextProps['id'];
  },
);

Implementation

JSAny memo2(
  JSAny component, {
  bool Function(Map<String, Object?> prevProps, Map<String, Object?> nextProps)?
  arePropsEqual,
}) {
  JSBoolean? jsAreEqual(JSObject prevProps, JSObject nextProps) {
    final prevDartified = prevProps.dartify();
    final nextDartified = nextProps.dartify();
    final prev = (prevDartified is Map<Object?, Object?>)
        ? prevDartified.cast<String, Object?>()
        : <String, Object?>{};
    final next = (nextDartified is Map<Object?, Object?>)
        ? nextDartified.cast<String, Object?>()
        : <String, Object?>{};
    return arePropsEqual!(prev, next).toJS;
  }

return (arePropsEqual != null)
? _reactMemo(component, jsAreEqual.toJS)
: _reactMemo(component);
}