# babel-plugin-mutable-react-state

> > (WIP) Use mutable variable declarations as state in react

Latest version **0.0.3** (published 2022-01-02) · 0 weekly downloads

## Install

```sh
npm install babel-plugin-mutable-react-state
pnpm add babel-plugin-mutable-react-state
yarn add babel-plugin-mutable-react-state
bun add babel-plugin-mutable-react-state
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2022-01-02 |
| First published | 2021-12-16 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=12 |
| Dependencies | 1 |
| Unpacked size | 16.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | barelyreaper |

## Links

- npm: https://www.npmjs.com/package/babel-plugin-mutable-react-state
- npm.io page: https://npm.io/package/babel-plugin-mutable-react-state

## Dependencies (1)

- [@babel/types](https://npm.io/package/@babel/types.md) ^7.16.0

## Recent versions

- 0.0.3 (latest) — 2022-01-02
- 0.0.2-1 (next) — 2022-01-02
- 0.0.2 — 2022-01-02
- 0.0.2-0 — 2021-12-25
- 0.0.1 — 2021-12-16

## README

# babel-plugin-mutable-react-state

> (WIP) Use mutable variable declarations as state in react

[![Test](https://github.com/barelyhuman/babel-plugin-mutable-react-state/actions/workflows/test.yml/badge.svg)](https://github.com/barelyhuman/babel-plugin-mutable-react-state/actions/workflows/test.yml)

**UNSTABLE**
**The plugin is still under development so isn't recommended for production**

## Caveats (for now)

Check [this issue](https://github.com/barelyhuman/babel-plugin-mutable-react-state/issues/4)

## Docs

[Web Documentation](https://barelyhuman.github.io/babel-plugin-mutable-react-state/#/)

## Notes

- While the caveats exist due to the extensive types of expressions that javascript has, it's recommended that you use a cloned variable and then just assigned the modification to the reactive variable if you plan to use it right now.

```jsx
function Component() {
  let $text = ''

  return (
    <>
      <input
        value={$text}
        onChange={(e) => {
          $text = e.target.value
          // some code

          // won't work...
          $text = $text.toUpperCase()
        }}
      />
    </>
  )
}

// CAN be written as

function Component() {
  let $text = ''

  return (
    <>
      <input
        value={$text}
        onChange={(e) => {
          const val = e.target.value
          // some code

          // will work...
          $text = val.toUpperCase()
        }}
      />
    </>
  )
}
```

- This is still react state so you cannot do dependent state updates at once,

```jsx
// the value of `length` will still be the older value of $text and not the latest one
changeHandler(){
  $text = value
  $length = $text.length
}

// you'll still have to consider that dependent values need to be handled with useEffect

useEffect(()=>{
  $length = $text.length
},[$text])

changeHandler(){
  $text = value
}
```

## Install

The plugin assumes you already have `jsx` enabled on babel or are using `preset-react` in your setup.

```sh
npm i babel-plugin-mutable-react-state
# or
yarn add babel-plugin-mutable-react-state
```

```jsonc
// .babelrc
[
  {
    "plugins": ["babel-plugin-mutable-react-state"]
  }
]
```

## Usage

You write state with a prefix `$` and that's converted to `useState` accordingly.

```jsx
import * as React from 'react'

function Component() {
  let $a = 1

  const onPress = () => {
    $a += 1
  }

  return (
    <div>
      <p>{$a}</p>
      <button onClick={onPress}>Press</button>
    </div>
  )
}

 ↓ ↓ ↓ ↓ ↓ ↓

import * as React from 'react'

function Component() {
  const [a, setA] = React.useState(1)

  const onPress = () => {
    setA(a + 1)
  }

  return (
    <div>
      <p>{a}</p>
      <button onClick={onPress}>Press</button>
    </div>
  )
}
```

## License

[MIT](/LICENSE)

---
_Source: https://npm.io/package/babel-plugin-mutable-react-state · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._