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: 2 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 6 years ago)
• Default Branch: master
• Last Pushed: 2019-01-19T07:00:52.000Z (almost 6 years ago)
• Last Synced: 2024-03-15T01:57:02.382Z (10 months ago)
• Topics: ast, babel, babel-plugin, jsx, react, react-hooks
• Language: JavaScript
• Homepage:
• Size: 132 KB
• Stars: 111
• Watchers: 6
• 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

        
[![CircleCI](https://circleci.com/gh/DAB0mB/babel-plugin-react-persist/tree/master.svg?style=svg)](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.