Skip to content
This repository has been archived by the owner on Feb 21, 2018. It is now read-only.

perf: @pureFunctions decorator #63

Closed
giogonzo opened this issue Sep 15, 2015 · 4 comments
Closed

perf: @pureFunctions decorator #63

giogonzo opened this issue Sep 15, 2015 · 4 comments

Comments

@giogonzo
Copy link
Member

requirements:
use @pure (and potentially any other pure-render tool) correctly when props involve .binded and/or partiallly applied functions
i.e: avoid unnecessary re-renderings
see e.g. this for reference: https://discuss.reactjs.org/t/using-function-bind-and-purerendermixin/655

spec proposal:
@pureFunctions decorator, to be used on top of @pure
should let you pass to @pureFunctions-decorated components functions as:

onClick={[myFn, myArg1, myArg2]}

instead of

onClick={myFn.bind(this, myArg1, myArg2)}

and handle properly the reference for the underlying @pure component: reuse cached fn references when fn and args are unchanged

This gives big perf improvements e.g. on LOL/SamplesList for cellRenderer and SampleCard.onClick props

@FrancescoCioria @francescogior thoughts about the syntax?

@FrancescoCioria
Copy link
Contributor

Your solution looks definitely easy to use but not very easy to read and may be hard to debug (is it? I wouldn't know how to improve it actually...). Other possible solutions could be:

  • importing and using a utility function as we do for valueLink (it may be more readable, but it would work the same way I think)
onClick={revengeBind(myFn, myArg1, myArg2)}
  • passing prop with a special suffix and then removing it to let components use props as usual (black magic?)
bindOnClick={[myFn, arg1, arg2]}

@giogonzo
Copy link
Member Author

onClick={revengeBind(myFn, myArg1, myArg2)}

👍 for something like this. Costs: adds an import on "user" component. Pros: makes it explicit we intend to pass a PureFunction prop

passing prop with a special suffix and then removing it to let components use props as usual

Seems too much, especially considering the above "tagging" mechanism we should be safe enough

@giogonzo
Copy link
Member Author

Added pureFunctionProp, see here for examples: https://github.com/buildo/labonline/commit/9a2257002b4ce4ca0966ba2245d959961d47113a

@giogonzo
Copy link
Member Author

naming is misleading probably, but at least it is clear that it builds on top of a pure render implementation. Merge as it is for now

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants