Ok I have come up with a potential solution using a functor, but I’d love a second opinion on my approach.
You use it like this. It will ensure that render
will only be called again if retainedProps
is not structurally equal to the previous retainedProps
. You can see that the boilerplate is reduced compared to the docs example, with the main difference being that you don’t need to define your own shouldUpdate
, just like in ReactJS, if you use PureComponent
, you don’t need to define your own shouldComponentUpdate
.
module Config = {
type retainedProps = {
view: string,
subview: option(string),
};
let name = "Breadcrumb";
};
module Pure = PureComponent.Stateless(Config);
let make = (~view, ~subview=?, _children) => {
...Pure.component,
retainedProps: Config.{view, subview},
render: _ => <View> ... </View>,
};
And the implementation looks like this:
// PureComponent.re
module type StatelessConfig = {
type retainedProps;
let name: string;
};
module Stateless = (Config: StatelessConfig) => {
let component = {
...ReasonReact.statelessComponentWithRetainedProps(Config.name),
shouldUpdate:
(
{oldSelf, newSelf}:
ReasonReact.oldNewSelf(
ReasonReact.stateless,
Config.retainedProps,
ReasonReact.actionless,
),
) =>
oldSelf.retainedProps != newSelf.retainedProps,
};
};
If the general consensus on this is good, I’ll probably publish it on npm!