purescript-react/purescript-react-basic-hooks

React.memo can take a comparison function as argument

andys8 opened this issue · 3 comments

Hi :)

React.memo exists in the library. It takes a react component and compares all arguments.

It is possible to pass a second argument to React.memo which is currently not supported. The function can be used to compare props and decide if the component should re-render. Probably very handy for performance optimization.

https://reactjs.org/docs/react-api.html#reactmemo

image

Implementation wise something like this should work:

memo2 ::
  forall props.
  (props -> props -> Boolean) ->
  Effect (ReactComponent props) ->
  Effect (ReactComponent props)
memo2 areEqual comp = do
  c <- comp
  runEffectFn2 memo2_ c (mkFn2 areEqual)

foreign import memo2_ ::
  forall props.
  EffectFn2
    (ReactComponent props)
    (Fn2 props props Boolean)
    (ReactComponent props)

I'm happy to provide a pull request, just not sure regarding some details and consistency with the codebase. These could be discussed in the PR. Does this make sense and do you want me to provide a pull request?

for sure! I missed this somehow...... I'm kind of inclined to always require the function so people can pass eq to it.. or make eq the default over react's default 🤔 did this change recently?

published in v8

Awesome 😎