functionApp(){letage=1;functionadd(){age=age+1;}return(<div>{age}<buttononClick={add}>+</button></div>);}with this plugin
function App(){
- let age = 1;+ const [age, setAge] = useState(1);- function add() {+ const add = useCallback((){- age = age + 1;+ setAge(age + 1);- }+ },[age]);
return (
<div>
{age}
<button onClick={add}>+</button>
</div>
);
}make react simple
react-simple is a babel plugin for making react develop easier.
by automaticly convert you unwraped state, callback to useState, useCallback
to make useState transform work, make sure you reassigned the state.
like this
letstate=0;// this line will convert to useStateletname='test';// this won't changefunctionhandleChanage(val){state=val;// this line will convert to setState}