ReScript-aware `memo`
Ninguém assumiu esta issue ainda.
Avaliação
- Dificuldade
- 5/5
- Tempo estimado
- Mais de uma semana
- Facilidade para iniciantes
- 25/100
- Tipo de issue
- Funcionalidade
- Clareza
- Precisa de esclarecimento
- Status de atividade
- Estagnada
- Stack de tecnologia
- react
- Domínio
- frontend
Direção de pesquisa
Comece localizando o binding de ReScript que define React.memo e analise a referência de React.memo vinculada na issue. Determine qual suporte do compilador é necessário para o comportamento proposto de igualdade superficial ciente de ReScript; considera-se concluído quando houver um design acordado e as alterações correspondentes no binding e no compilador, mas a issue não especifica arquivos nem testes.
Escrita pelo modelo de indexação a partir do texto da issue.
Descrição
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 😅
- Linguagem predominante
- ReScript
- Estrelas
- 517
- Forks
- 45
- Métricas de merge de PRs
- Nenhum PR com merge em 30d
Guia de contribuição
Nenhum guia de contribuição indexado para este repositório
Primeiros passos
- Leia a issue inteira e depois o guia de contribuição do projeto.
- Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
- Faça um fork do repositório e trabalhe em uma branch.
- Abra um pull request que referencie o número da issue.
Mais de rescript-lang/rescript-react
-
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 65/100
rescript-lang/rescript-react#145 ·
-
Dificuldade 3/5 1-2 dias Facilidade para iniciantes 48/100
rescript-lang/rescript-react#152 · 3 reações ·
-
Dificuldade 5/5 Mais de uma semana Facilidade para iniciantes 45/100
rescript-lang/rescript-react#147 · 2 comentários ·
-
Implicit type conversion? Aberta
Dificuldade 4/5 3-5 dias Facilidade para iniciantes 25/100
rescript-lang/rescript-react#105 ·
-
Scroll Restoration Aberta
Dificuldade 5/5 Mais de uma semana Facilidade para iniciantes 25/100
rescript-lang/rescript-react#104 · 1 reação ·
Todas as issues de rescript-lang/rescript-react
Issues semelhantes
-
react-doctor severity:warning tech-debt
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 82/100
digidem/comapeo-cloud-app#401 ·
-
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 82/100
-
bug
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 86/100
zostera/django-bootstrap4#894 ·
-
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 85/100
pnp/sp-dev-fx-controls-react#2156 ·
-
Dificuldade 1/5 Menos de uma hora Facilidade para iniciantes 86/100
eknowledger/toolbench#101 · 1 comentário ·