https://github.com/DAB0mB/babel-plugin-react-persist
Automatically useCallback() & useMemo(); memoize inline functions
https://github.com/DAB0mB/babel-plugin-react-persist
ast babel babel-plugin jsx react react-hooks
Last synced: 6 months ago
JSON representation
Automatically useCallback() & useMemo(); memoize inline functions
- Host: GitHub
- URL: https://github.com/DAB0mB/babel-plugin-react-persist
- Owner: DAB0mB
- License: mit
- Created: 2019-01-12T02:08:06.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-01-19T07:00:52.000Z (almost 7 years ago)
- Last Synced: 2025-04-15T06:47:23.466Z (7 months ago)
- Topics: ast, babel, babel-plugin, jsx, react, react-hooks
- Language: JavaScript
- Homepage:
- Size: 132 KB
- Stars: 112
- Watchers: 5
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-star - babel-plugin-react-persist
README
[](https://circleci.com/gh/DAB0mB/babel-plugin-react-persist/tree/master)
# 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
```jsx
export default ({ data, sortComparator, filterPredicate, history }) => {
const transformedData = data.filter(filterPredicate).sort(sortComparator)
return (
history.pop()} />
{transformedData.map(({ id, value }) => (
- history.push(`data/${id}`)}>{value}
))}
)
}
```
#### out
```jsx
let _anonymousFnComponent, _anonymousFnComponent2
export default ({ data, sortComparator, filterPredicate, history }) => {
const transformedData = React.useMemo(() =>
data.filter(filterPredicate).sort(sortComparator)
, [data, data.filter, filterPredicate, sortComparator])
return React.createElement(_anonymousFnComponent2 = _anonymousFnComponent2 || (() => {
const _onClick2 = React.useCallback(() => history.pop(), [history, history.pop])
return (
{transformedData.map(({ id, value }) =>
React.createElement(_anonymousFnComponent = _anonymousFnComponent || (() => {
const _onClick = React.useCallback(() =>
history.push(`data/${id}`)
, [history, history.push, id])
return (
-
{value}
)
}), { key: id })
)}
)
}), null)
}
```
### 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.
```json
{
"presets": ["@babel/preset-react"],
"plugins": ["babel-plugin-react-persist"]
}
```
### License
MIT. If you're including this in a repo above 1k stars I would really appreciate it if you could contact me first.