memo2 function
A higher order component for function components
that behaves similar to the way React.PureComponent
does for class-based components.
If your function component renders the same result given the same props, you can wrap it in a call to
memo for a performance boost in some cases by memoizing the result. This means that React will skip
rendering the component, and reuse the last rendered result.
import 'package:react/react.dart' as react;
final MyComponent = react.memo2(react.registerFunctionComponent((props) {
/* render using props */
}));
memo2 only affects props changes. If your function component wrapped in memo2 has a
useState or useContext Hook in its implementation, it will still rerender when state or context change.
By default it will only shallowly compare complex objects in the props map.
If you want control over the comparison, you can also provide a custom comparison
function to the areEqual argument as shown in the example below.
import 'package:react/react.dart' as react;
final MyComponent = react.memo2(react.registerFunctionComponent((props) {
// render using props
}), areEqual: (prevProps, nextProps) {
// Do some custom comparison logic to return a bool based on prevProps / nextProps
});
This method only exists as a performance optimization.
Do not rely on it to “prevent” a render, as this can lead to bugs.
Implementation
ReactComponentFactoryProxy memo2(ReactComponentFactoryProxy factory,
{bool Function(Map prevProps, Map nextProps)? areEqual}) {
final _areEqual = areEqual == null
? null
: allowInterop((JsMap prevProps, JsMap nextProps) {
final dartPrevProps = JsBackedMap.backedBy(prevProps);
final dartNextProps = JsBackedMap.backedBy(nextProps);
return areEqual(dartPrevProps, dartNextProps);
});
final hoc = React.memo(factory.type, _areEqual);
setProperty(hoc, 'dartComponentVersion', ReactDartComponentVersion.component2);
return ReactDartWrappedComponentFactoryProxy(hoc);
}