Skip to content

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

Closed
@andys8

Description

@andys8

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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions