babel-plugin-reactive

This plugin allows you to declare a state just like declaring a normal variable, and then update the state like updating a normal variable.

This project is still an experiment, don't use it in a production.

In

import React from 'react';

export default () => {
  let count = 0;

  return (
    <button onClick={() => count += 1}>
      Clicked {count} {count === 1 ? 'time' : 'times'}
    </button>
  );
};

Out

import React, { useState } from 'react';

export default () => {
  let [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(_count => _count + 1)}>
      Clicked {count} {count === 1 ? 'time' : 'times'}
    </button>
  );
};

License

MIT