Caveats (for now)

Notes

functionComponent(){let$text=''return(<><inputvalue={$text}onChange={(e)=>{$text=e.target.value// some code// won't work...$text=$text.toUpperCase()}}/></>)}// CAN be written asfunctionComponent(){let$text=''return(<><inputvalue={$text}onChange={(e)=>{constval=e.target.value// some code// will work...$text=val.toUpperCase()}}/></>)}

// the value of `length` will still be the older value of $text and not the latest onechangeHandler(){$text=value$length=$text.length}// you'll still have to consider that dependent values need to be handled with useEffectuseEffect(()=>{$length=$text.length},[$text])changeHandler(){$text=value}

Install

npm i babel-plugin-mutable-react-state# oryarn add babel-plugin-mutable-react-state

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

Usage

import*asReactfrom'react'functionComponent(){let$a=1constonPress=()=>{$a+=1}return(<div><p>{$a}</p><buttononClick={onPress}>Press</button></div>)}↓↓↓↓↓↓import*asReactfrom'react'functionComponent(){const[a,setA]=React.useState(1)constonPress=()=>{setA(a+1)}return(<div><p>{a}</p><buttononClick={onPress}>Press</button></div>)}

License