purescript-react / purescript-react-basic-hooks

An implementation of React hooks on top of purescript-react-basic
https://pursuit.purescript.org/packages/purescript-react-basic-hooks/
Apache License 2.0
198 stars 31 forks source link

React.memo can take a comparison function as argument #60

Closed andys8 closed 2 years ago

andys8 commented 2 years ago

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?

megamaddu commented 2 years ago

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?

megamaddu commented 2 years ago

published in v8

andys8 commented 2 years ago

Awesome 😎