ReScript-aware `memo`
Nessuno ha ancora preso questa issue.
Valutazione
- Difficoltà
- 5/5
- Tempo stimato
- Più di una settimana
- Idoneità per principianti
- 25/100
- Tipo di issue
- Funzionalità
- Chiarezza
- Da chiarire
- Stato di attività
- Ferma
- Stack tecnologico
- react
- Ambito
- frontend
Direzione di ricerca
Inizia individuando il binding ReScript che definisce React.memo e consulta il riferimento a React.memo collegato nell’issue. Determina quale supporto del compilatore è necessario per il comportamento proposto di uguaglianza superficiale consapevole di ReScript; il lavoro è considerato completato quando esistono un design concordato e le modifiche corrispondenti al binding e al compilatore, ma l’issue non indica file o test.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Descrizione
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 😅
- Lingua principale
- ReScript
- Stelle
- 517
- Fork
- 45
- Metriche di merge delle PR
- Nessuna PR unita negli ultimi 30g
Guida per i contributori
Nessuna guida per i contributori indicizzata per questo repository
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Altre issue di rescript-lang/rescript-react
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 65/100
rescript-lang/rescript-react#145 ·
-
Difficoltà 3/5 1-2 giorni Idoneità per principianti 48/100
rescript-lang/rescript-react#152 · 3 reazioni ·
-
Difficoltà 5/5 Più di una settimana Idoneità per principianti 45/100
rescript-lang/rescript-react#147 · 2 commenti ·
-
Implicit type conversion? Aperta
Difficoltà 4/5 3-5 giorni Idoneità per principianti 25/100
rescript-lang/rescript-react#105 ·
-
Scroll Restoration Aperta
Difficoltà 5/5 Più di una settimana Idoneità per principianti 25/100
rescript-lang/rescript-react#104 · 1 reazione ·
Tutte le issue di rescript-lang/rescript-react
Issue simili
-
Difficoltà 1/5 Meno di un'ora Idoneità per principianti 72/100
-
bug
Difficoltà 2/5 1-3 ore Idoneità per principianti 76/100
capricorn86/happy-dom#2435 ·
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 84/100
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 70/100
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 72/100