babel-plugin-react-persist
A Babel plug-in that optimizes your React.Component's implementation by automatically detecting declarations that should persist between rendering phases and replacing them with useCallback()
and useMemo()
whenever necessary. This plug-in can also be used to solve excessive processing power caused by using anonymous callbacks provided to JSX element by making them non-anonymous. Note that this plug-in is experimental and shouldn't be used in production yet. Compatible with React 16.8-alpha and above (hooks support).
Example
in
data sortComparator filterPredicate history const transformedData = data return <div> <button ="back-btn" = /> <ul ="data-list"> transformedData </ul> </div>
out
let _anonymousFnComponent _anonymousFnComponent2 data sortComparator filterPredicate history const transformedData = React return React
Usage
babel-plugin-react-persist
is installable via NPM (or Yarn):
$ npm install babel-plugin-react-persist
Add to .babelrc
under plugins
and be sure to load it before any JSX transformation related plug-ins.
License
MIT. If you're including this in a repo above 1k stars I would really appreciate it if you could contact me first.