Add page about React.memo

[nojaf]

A lot of text comes from https://react.dev/reference/react/memo#memo.
The important thing for me is the arePropsEqual example.
Let me know if you like to see anything different.

[vercel]

@nojaf is attempting to deploy a commit to the ReScript Association Team on Vercel.

A member of the Team first needs to authorize it.

[nojaf]

@fhammerschmidt any suggestions?

[nojaf]

(Also, apologies for my impatience 😅)

[fhammerschmidt]

I think the arePropsEqual example can be simplified by shadowing the make function:

@react.component
let make = (~disabled, ~onClick) => {
  <button
    disabled={disabled}
    onClick={ev => ev->JsxEvent.Mouse.preventDefault->onClick}>
    {React.string("My button")}
  </button>
}

let make = React.memoCustomCompareProps(make, (p1, p2) =>
  p1.disabled == p2.disabled
)

Playground Link
no explicit typing of props needed either, but I never used that personally.

[nojaf]

Oh that does seem simpler. My original example was based on https://forum.rescript-lang.org/t/looking-for-a-react-memo-example/1144/12?u=nojaf

I'll revisit the docs.

[fhammerschmidt]

Not sure about "must" here, because, as you demonstrated, there are other ways as well.
Maybe "you can redefine the make binding"?

[nojaf]

There is a bit of "must" in the sense that you cannot just write:

https://rescript-lang.org/try?version=v11.1.1&code=AIJwpghgxgLgdFA9gWwA6IHZgzAUAGzBgAJkIBrMYgXmICVJY5kxlEBhAVwGcYV2UqCOAAKIRKm4AKXMWJSAfgBMAltwgAjQkoA0xBZnb4VUcgEoaAPmIBvWXOIAeDZxh8M9h8VXqtYJdQ2PpraAL6eDobGpoFgAG5WxPEAtJYAUtwAHgCicdjwALKIPGBwqOB5OAAiYABmEJz4MKlRJuShlhFyNgzQ8LwgKhgA5lIARAUAnsQubphjZuFejgD0s+6dcqE69lJSqACMeqgATBbU1odwwX5KNLSn12oh-ma4b0A

So, you must do something other than that to get it to work. Which is the exact thing I want to add to the documentation, as that was confusing to me.

[fhammerschmidt]

The other thing you can do is to not use the JSX preprocessor extension at all btw (i.e. no @react.component annotation). But that once again requires explicitly typing props.

type props = {
  disabled: bool,
  onClick: JsxEvent.Mouse.t => unit,
}

let make = React.memoCustomCompareProps(
  ({disabled, onClick}) => {
    <button
      disabled={disabled}
      onClick={ev => ev->JsxEvent.Mouse.preventDefault->onClick}>
      {React.string("My button")}
    </button>
  },
  (p1, p2) => p1.disabled == p2.disabled,
)

so maybe we can keep the "must", but give an alternative solution

[nojaf]

I rephrased it to emphasize you can't combine @react.component and React.memoCustomCompareProps. Added the two workarounds as example.

[nojaf]

For my own understanding, does @react.component do anything in terms of using the component in JSX syntax? Or is that not a requirement?

[fhammerschmidt]

Since JSX4, what the annotation does is basically generating a props type (probably with more generic types though). So no, using them is identical.
Have a look at the blogpost that announced JSX V4 in ReScript 10.1.

[nojaf]

I see, thank you!

[fhammerschmidt]

Nice work!