Open cometkim opened 4 months ago
I wouldn't say that the current binding is incorrect. React.memo
is bound as two functions, one without and one with the optional equality function:
@module("react")
external memo: component<'props> => component<'props> = "memo"
@module("react")
external memoCustomCompareProps: (
component<'props>,
@uncurry ('props, 'props) => bool,
) => component<'props> = "memo"
This seems fine to me, although in ReScript 11 Uncurried Mode we could have a single function
@module("react")
external memo: (
component<'props>,
~arePropsEqual: ('props, 'props) => bool=?,
) => component<'props> = "memo"
So the user can pass in an optional equality function that fits his use case, e.g., if one of the props is a variant (that is not option<'a>
or @unboxed
).
I don't really understand the "recursive shallow-equal" thing - isn't that a deep equal then, and doesn't it also come with quite a bit of performance overhead?
I don't really understand the "recursive shallow-equal" thing - isn't that a deep equal then, and doesn't it also come with quite a bit of performance overhead?
With a bit of reasoning, I think we can avoid a full comparison of values by only doing recursion on known wrapper structures like "TAG"
(or custom), "_0"
. "NAME"
, "VAL"
, etc. Recursion is needed on only (non-external) nested variants (I guess they are likely to have persistent inner objects) and a typical record value would be 2-depth equality.
Or we could add something like @deriving(shallowEqual)
, but this is complex because it would require analyzing module dependencies.
Just opened https://github.com/rescript-lang/rescript-compiler/issues/6738 as a minimal building block of this
The current definition of
React.memo
is:which is incorrect.
React.memo
takes an equality function as an optional second paramhttps://react.dev/reference/react/memo
Fortunately, this can be easily fixed without breaking
Customizing the second argument is rare in regular JS/TS projects, but not in ReScript.
ReScript's powerful type system represents boxed objects at runtime. Ironically, this makes
memo
almost useless in ReScript projects, since the default for memo compares shallow equality.E.g. Playground
Users can easily make deep-equality function
generates
However the deep-equal implementation is usually not what React users want. This will be a huge overhead when dealing with data that is not a persistent structure.
Assuming the user still wants the shallow-equal, we can try a much more optimized solution. The idea is simple, making recursive shallow-equal, using well-known structures.
builtin
```js // https://github.com/facebook/react/blob/857ee8c/packages/shared/shallowEqual.js#L18 // `is` and `hasOwnProperty` are polyfill of `Object` static methods function shallowEqual(objA: mixed, objB: mixed): boolean { if (is(objA, objB)) { return true; } if ( typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null ) { return false; } const keysA = Object.keys(objA); const keysB = Object.keys(objB); if (keysA.length !== keysB.length) { return false; } // Test for A's keys different from B. for (let i = 0; i < keysA.length; i++) { const currentKey = keysA[i]; if ( !hasOwnProperty.call(objB, currentKey) || // $FlowFixMe[incompatible-use] lost refinement of `objB` !is(objA[currentKey], objB[currentKey]) ) { return false; } } return true; } ```shallowEqual
function in Reactmodified for ReScript outputs
```js function shallowEqualPolyvar(objA: polyvar, objB: polyvar) { if (objA.NAME !== objB.NAME) { return false; } return shallowEqual(objA, objB); } function shallowEqualVariant(objA: variant, objB: variant) { // Ok... this should be done by the compiler if (objA.TAG !== objB.TAG) { return false; } return shallowEqual(objA._0, objB._0) } function shallowEqual(objA: mixed, objB: mixed): boolean { if (is(objA, objB)) { return true; } if ( typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null ) { return false; } // We cannot skip check because there is no guarantee objs are record. // Or maybe we can make separate function for it. // isPolyvar should be provided by the compiler const isObjAPolyvar = isPolyvar(objA) const isObjBPolyvar = isPolyvar(objB) if (isObjAPolyvar !== isObjBPolyvar) { return false; } else if (isObjAPolyvar) { return shallowEqualPolyvar(objA, objB); } // isVariant should be provided by the compiler const isObjAVariant = isVariant(objA) const isObjBVariant = isVariant(objB) if (isObjAVariant !== isObjBVariant) { return false; } else if (isObjAVariant) { return shallowEqualVariant(objA, objB) } const keysA = Object.keys(objA); const keysB = Object.keys(objB); if (keysA.length !== keysB.length) { return false; } // Test for A's keys different from B. for (let i = 0; i < keysA.length; i++) { const currentKey = keysA[i]; if ( !hasOwnProperty.call(objB, currentKey) || !is(objA[currentKey], objB[currentKey]) ) { return false; } } return true; } ```it seems like compiler support is needed first :sweat_smile: