ReactComponent: memo

[alfonsogarciacaro]

We should have an option to memoize functions using ReactComponent attribute. The trick is we cannot make references to functions from the attributes so we cannot specify a custom equality function for props, so we can:

• Rely on React's default: swallow structural equality I believe.
• Provide our own default: we usually had swallow structural equality but functions to ignore the dispatch function passed in Elmish components as prop. This would also bring another challenge because I didn't think of a good way to pack code in the plugins 😅
• Use a way to identify the equality function in the component declaration somehow.

[Shmew]

Dang, I spent a while trying to work something out until I realized you can't use hardly anything outside of literals in attributes.

• Rely on React's default: swallow structural equality I believe.
• Provide our own default: we usually had swallow structural equality but functions to ignore the dispatch function passed in Elmish components as prop. This would also bring another challenge because I didn't think of a good way to pack code in the plugins 😅

There shouldn't be an issue here with using the React default equality. If they use React.useElmish they don't need any special equality anyways as I stabilize the dispatch function inside the hook itself. If someone passes down a function that isn't wrapped in a hook that's on them.

Use a way to identify the equality function in the component declaration somehow.

I bet we could do this, but it sounds like asking for trouble. Would probably be easier to just point them to using React.memo if they need anything outside the default.

Bringing these together, my recommendation is to just have a flag to enable memo:

[<ReactComponent(Memo = true)>]
let myComp () = ...

[alfonsogarciacaro]

Thanks for the input @Shmew!

• Passing dispatch function: Although the recommended way in Feliz apps now is to use React.useElmish in Elmish React apps (at least the apps I'm working on) unfortunately the pattern is still to pass the dispatch function all the way down the component hierarchy, this is way we came up with the equalsButFunctions helper.
• Use React.memo: This could be a solution but then we would go back to the problems we had with React.functionComponent. First, the declaration becomes a value, not a function and F# doesn't like generic values, so you cannot declare a component with a generic prop. Secondly, users need to invoke the function with React.createElement or similar, we would need a wrapper to avoid that, so basically we go back to the mess that was FunctionComponent.Of (at least in Fable.React, I'm not sure how it worked in Feliz).

[Shmew]

Passing dispatch function

As long as you use react components throughout the entire application just calling let dispatch = React.useCallback dispatch at the highest level component should do the trick. Once you set that once you don't have to worry about it again. Ideally for that pattern users would still just use the elmish hook instead at the top level component. Something will have to give in that regard eventually when (if... starting to doubt this thing exists) concurrent mode releases as the current Elmish programs will not be compatible.

Use React.memo

Yeah, I'm not sure how else to really avoid these issues. One thing to note is the user just needs to have

let myComp = React.memo(fun props -> Html.div [...], fun oldProps newProps -> true)

and it's good to go. Unfortunately yeah, we still then don't have a great generic story. Luckily users should very rarely need those optional features, I don't know that I've ever needed it.

Another idea which I don't really even want to mention because it sounds like a headache/probably stupid would be to do some combination of checking if a parameter name matches the name (is this data even available?).

Or something like if it has a more unique type like an expr that we'd match against the signature of the function without it:

let areEqual = <@ fun (oldProps: SomeProps) (newProps: SomeProps) -> oldProps <> newProps @>

[<ReactComponent(Memo = true)>]
let myComp = (props: SomeProps) (areEqual: Expr<SomeProps -> SomeProps -> bool>) =
	Html.div [ ... ]

Where if the component had Memo = true and a parameter with the type of Expr<SomeProps -> SomeProps -> bool> we do the magic?

[alfonsogarciacaro]

After reading for the nth time about React.useCallback and finding a use example online, I finally understand what you mean by "wrapping dispatch in a hook" 😅 Ok, I guess that should work and it seems it's the React-way of doing things so we can ask users to do that. It's just a pity we use Memo in the component itself and the useCallback must be used in the parent component, so it's much easier the caller forgets to do it... unless we want to do more magic with the plugin on the call-site, either implicitly or with a useCallbackForDispatch argument or similar 😸

[zanaptak]

Note one semi-common case where custom equality is still useful is to ensure structural equality for e.g. Options/DUs, which are JS objects and therefore subject to reference equality in the default compare.

Maybe it's ok for a string parameter on the attribute to specify an equality function name, since at least there are some mitigations against bad values. I assume the compiler plugin can check that it matches a defined function (since at a quick glance I see some code already checking for defined record types) and therefore flag it before it blows up at runtime. And users can use nameof to make it safe for refactoring.

e.g.:

let myCustomAreEqual oldProps newProps = ...

[<ReactComponent(Memo = true, AreEqual = nameof myCustomAreEqual)>]
let MyMemoComponent x y z = ...

I assume also in the above example the plugin could check that the equality props type matches the x y z parameters on the component.

EDIT: Although stylistically this seems awkward to have type mismatch between the component and equality function parameters (expanded x y z vs. single prop record type). It would probably be better user practice to make the component directly take the prop object type when equality is specified. The compiler plugin could even warn about the type mismatch if we think it's worthwhile to enforce.

[Shmew]

I quite like that idea @zanaptak. Taking a quick look at how the ReactComponentAttribute is written I think it's possible to make it so that if you have a component like this:

[<ReactComponent(Memo = true, AreEqual = nameof myCustomAreEqual)>]
let (x: int) (y: int) = ...

We could have a equality function like this:

let myCustomAreEqual (oldX: int, oldY: int) (newX: int, newY: int) = ...

This should work since 2+ arity functions are transformed into an object, and the plugin is able to destructure that to pass on to the function (unless I'm misunderstanding this).

[mjblacker]

Did this get anywhere?

Happy for it to be limited to basic implementations forcing the current way for when equality checks are required.

Anything I can do to help?

[melanore]

Hi folks!

We've needed this functionality quite bad for some performance critical parts of the app. The workaround we've used initially was resorting to the old FunctionComponent.Of api. However the main drawback of this approach is broken hmr:

FunctionComponent.Of both defines a function component as well as declares the React element via react.createElement.

That was one of the primary reasons why [<ReactComponent>] is now the preferred approach of defining react components - attribute plugin acts as a glue between component definition (declares function component) and the call site (creates one within the parent via react.createElement api).

In case of memoized components, the component definition must be a named function (not lambda), that is wrapped in memo - const component = memo(function MyComponent { ... }). memo also allows to pass a custom equality function.

I've extended the ReactComponent memo functionality with ability to:

• Use default shallow object comparison (call to memo without equality function)
• Use equalsButFunctions function that was initially introduced in Fable.Elmish - it uses the equality from fable js library, but ignores the function fields.
• Use custom js function passed to the attribute, - it is highlighted as `[<StringSyntax("javascript")>] and allows either inlined function declaration or usage of function imported/declared within file.

Additionally, I've added the aliases to the ReactComponentAttribute* family, so that consumers could use this syntax:

[<ReactComponent>]
[<ReactComponent.Memo>]
[<ReactComponent.Memo.EqualsButFunctions>]
[<ReactComponent.Memo "(x, y) => {
    const value = custom(x, y);
    return value || x === y;
}">]

Link to PR - #665

Below you can see the examples usages:

Simple component

[<ReactComponent>]
let Anonymous(props: {|
    value: string
|}) =
    Html.span [ prop.text props.value ]

export function Anonymous(props) {
    return createElement("span", {
        children: props.value,
    });
}

Memo component

[<ReactComponent.Memo>]
let Memo(props: Example) =
    React.fragment [
        Html.span [ prop.text props.value ]
        Html.button [ prop.text "+"; prop.onClick (fun _ -> props.setValue (props.value + 1)) ]
    ]

export function Anonymous(props) {
    return createElement("span", {
        children: props.value,
    });
}

Memo.EqualsButFunctions component

[<ReactComponent.Memo.EqualsButFunctions>]
let MemoEqualsButFunctions(props: Example) =
    React.fragment [
        Html.span [ prop.text props.value ]
        Html.button [ prop.text "+"; prop.onClick (fun _ -> props.setValue (props.value + 1)) ]
    ]

Notes

• MemoEqualsButFunctions requires equals from npm installed @fable-org/fable-library-js within the project.

• The function MemoEqualsButFunctions(props) { ((props) => {...})(props); } - named function is required for memo to know the name of the component (otherwise it will be Anonymous). As Expr.Delegate is translated by Fable to the lambda - we emit the named function with self executing lambda.

export const MemoEqualsButFunctions = memo(
  function MemoEqualsButFunctions(props) {
    return ((props) => {
      const xs_2 = [
        createElement("span", {
          children: props.value,
        }),
        createElement("button", {
          children: "+",
          onClick: (_arg) => {
            props.setValue(props.value + 1);
          },
        }),
      ];
      return react.createElement(react.Fragment, {}, ...xs_2);
    })(props);
  },
  function equalsButFunctions(x, y) {
    if (x === y) {
      return true;
    } else if (typeof x === "object" && !x[Symbol.iterator] && !(y == null)) {
      const keys = Object.keys(x);
      const length = keys.length | 0;
      let i = 0;
      let result = true;
      while (i < length && result) {
        const key = keys[i];
        i = (i + 1) | 0;
        const xValue = x[key];
        result = typeof xValue === "function" ? true : equals(xValue, y[key]);
      }
      return result;
    } else {
      return equals(x, y);
    }
  }
);

Memo custom equality component

let [<Literal>] CUSTOM_EXAMPLE_EQUALITY = "myCustomEquals"
let [<CompiledName(CUSTOM_EXAMPLE_EQUALITY)>] private exampleEq (x: Example, y: Example) =
    x.value = y.value
[<ReactComponent.Memo(CUSTOM_EXAMPLE_EQUALITY)>]
let MemoEquals(props: Example) =
    React.fragment [
        Html.span [ prop.text props.value ]
        Html.button [ prop.text "+"; prop.onClick (fun _ -> props.setValue (props.value + 1)) ]
    ]

function myCustomEquals(x, y) {
  return x.value === y.value;
}

export const MemoEquals = memo(function MemoEquals(props) {
  return ((props) => {
    const xs_2 = [
      createElement("span", {
        children: props.value,
      }),
      createElement("button", {
        children: "+",
        onClick: (_arg) => {
          props.setValue(props.value + 1);
        },
      }),
    ];
    return react.createElement(react.Fragment, {}, ...xs_2);
  })(props);
}, myCustomEquals);

Memo imported custom equality component

import { custom } from "@my/lib";

export const MemoEqualsImported = memo(
  function MemoEqualsImported(props) {
    return ((props) => {
      const xs_1 = [
        props.value,
        createElement("button", {
          children: "+",
          onClick: (_arg) => {
            props.setValue(props.value + 1);
          },
        }),
      ];
      return react.createElement(react.Fragment, {}, ...xs_1);
    })(props);
  },
  (x, y) => {
    const value = custom(x, y);
    return value || x === y;
  }
);