ReScript-aware `memo`
Nobody has claimed this yet.
Assessment
- Difficulty
- 5/5
- Estimated time
- Over a week
- Newbie friendliness
- 25/100
- Issue type
- Feature
- Clarity
- Needs clarification
- Activity status
- Stale
- Tech stack
- react
- Domain
- frontend
Research direction
Start by locating the ReScript binding that defines React.memo and review the React.memo reference linked in the issue. Determine what compiler support is required for the proposed ReScript-aware shallow equality behavior; done requires an agreed design and corresponding binding and compiler changes, but the issue does not name files or tests.
Written by the indexing model from the issue text.
Description
The current definition of React.memo is:
@module("react")
external memo: 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 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
let equal = \"="
// this is confusing btw...
generates
import * as Caml_obj from "./stdlib/caml_obj.js";
var equal = 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.
builtin shallowEqual function in React
// 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;
}
modified for ReScript outputs
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 😅
- Dominant language
- ReScript
- Stars
- 517
- Forks
- 45
- PR merge metrics
- No merged PRs in 30d
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from rescript-lang/rescript-react
-
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
rescript-lang/rescript-react#145 ·
-
Difficulty 3/5 1-2 days Newbie friendliness 48/100
rescript-lang/rescript-react#152 · 3 reactions ·
-
Difficulty 5/5 Over a week Newbie friendliness 45/100
rescript-lang/rescript-react#147 · 2 comments ·
-
Difficulty 4/5 3-5 days Newbie friendliness 25/100
rescript-lang/rescript-react#105 ·
-
Scroll Restoration Open
Difficulty 5/5 Over a week Newbie friendliness 25/100
rescript-lang/rescript-react#104 · 1 reaction ·
All issues in rescript-lang/rescript-react
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
lobehub/lobe-icons#422 · 1 comment ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
Difficulty 1/5 Under an hour Newbie friendliness 82/100
-
www.guideflow.com OpenN: AdGuard Browser Extension P4: Low T: Social Widget
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
AdguardTeam/AdguardFilters#242250 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 85/100