ReScript-aware `memo`

Chưa có ai nhận issue này.

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 😅

Bắt đầu bằng cách xác định binding ReScript định nghĩa React.memo và xem lại tài liệu tham chiếu về React.memo được liên kết trong issue. Xác định cần hỗ trợ nào từ compiler cho hành vi shallow equality nhận biết ReScript được đề xuất; công việc được xem là hoàn tất khi có design đã được thống nhất cùng các thay đổi tương ứng trong binding và compiler, nhưng issue không nêu tên file hoặc test.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

Hướng dẫn đóng góp

Bắt đầu từ đâu

Hướng nghiên cứu

Đánh giá