Looking for a React.memo() Example

memoCustomCompareProps is a bit clunky due to how @react.component works, but it’s doable:

module Counter = {
  type propDef = {prefix: string}
  let customMemo = React.memoCustomCompareProps(_, (p1, p2) => p1.prefix == p2.prefix)
  @react.component(:propDef)
  let make = customMemo((~prefix) => {
    let (count, setCount) = React.useState(() => 0)
    Console.log("Counter rendered")
    <div>
        <p>{String.concat(prefix, Int.toString(count))->React.string}</p>
        <button onClick={_ => setCount(c => c + 1)}>{"Increase"->React.string}</button>
    </div>
  })
}

module Input = {
  @react.component
  let make = () => {
    let (text, setText) = React.useState(() => "")
    Console.log("Input rendered")
    <div>
        <input onChange={c => setText(_ => JsxEventU.Form.target(c)["value"])} value={text}/>
        <Counter prefix={text->String.slice(~start=0, ~end=1)} />
    </div>
  }
}