- Notifications
You must be signed in to change notification settings - Fork44
Description
The current definition ofReact.memo is:
@module("react")externalmemo:component<'props>=>component<'props>="memo"
which is incorrect.React.memo takes an equality function as an optional second param
https://react.dev/reference/react/memo
memo(SomeComponent, arePropsEqual?)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 makesmemo almost useless in ReScript projects, since the default for memo compares shallow equality.
E.g.Playground
Users can easily make deep-equality function
letequal= \"="// this is confusing btw...
generates
import*asCaml_objfrom"./stdlib/caml_obj.js";varequal=Caml_obj.equal;
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.
builtinshallowEqual function in React
// https://github.com/facebook/react/blob/857ee8c/packages/shared/shallowEqual.js#L18// `is` and `hasOwnProperty` are polyfill of `Object` static methodsfunctionshallowEqual(objA:mixed,objB:mixed):boolean{if(is(objA,objB)){returntrue;}if(typeofobjA!=='object'||objA===null||typeofobjB!=='object'||objB===null){returnfalse;}constkeysA=Object.keys(objA);constkeysB=Object.keys(objB);if(keysA.length!==keysB.length){returnfalse;}// Test for A's keys different from B.for(leti=0;i<keysA.length;i++){constcurrentKey=keysA[i];if(!hasOwnProperty.call(objB,currentKey)||// $FlowFixMe[incompatible-use] lost refinement of `objB`!is(objA[currentKey],objB[currentKey])){returnfalse;}}returntrue;}
modified for ReScript outputs
functionshallowEqualPolyvar(objA:polyvar,objB:polyvar){if(objA.NAME!==objB.NAME){returnfalse;}returnshallowEqual(objA,objB);}functionshallowEqualVariant(objA:variant,objB:variant){// Ok... this should be done by the compilerif(objA.TAG!==objB.TAG){returnfalse;}returnshallowEqual(objA._0,objB._0)}functionshallowEqual(objA:mixed,objB:mixed):boolean{if(is(objA,objB)){returntrue;}if(typeofobjA!=='object'||objA===null||typeofobjB!=='object'||objB===null){returnfalse;}// 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 compilerconstisObjAPolyvar=isPolyvar(objA)constisObjBPolyvar=isPolyvar(objB)if(isObjAPolyvar!==isObjBPolyvar){returnfalse;}elseif(isObjAPolyvar){returnshallowEqualPolyvar(objA,objB);}// isVariant should be provided by the compilerconstisObjAVariant=isVariant(objA)constisObjBVariant=isVariant(objB)if(isObjAVariant!==isObjBVariant){returnfalse;}elseif(isObjAVariant){returnshallowEqualVariant(objA,objB)}constkeysA=Object.keys(objA);constkeysB=Object.keys(objB);if(keysA.length!==keysB.length){returnfalse;}// Test for A's keys different from B.for(leti=0;i<keysA.length;i++){constcurrentKey=keysA[i];if(!hasOwnProperty.call(objB,currentKey)||!is(objA[currentKey],objB[currentKey])){returnfalse;}}returntrue;}
it seems like compiler support is needed first 😅