42
Simplify React code using Babel transpiling: useState
Hi devs,
I've been working with react hooks for several years now, more or less since the beginning. It is a huge improvement compared to class components you had to use before, but it still has a lot of code to write, especially compared to Svelte.
This made me think: is it possible to reduce React syntax in order to make it more concise? The short answer is yes. The solution that I decided to adopt is to write a Babel plugin (since you need Babel in any case with React) to leverage some work during the build.
The first thing I worked on is useState. My goal was to remove destructuring of the useState hook and to have a simple variable declaration to be reactive by itself. As the result I got this:
// useState import is not necessary
function Example() {
let $value = 5;
return (
<button onClick={() => $value++}>{$value}</button>
);
}The snippet above is equivalent to this:
import { useState } from "react";
function Example() {
const [value, setValue] = useState(5);
return (
<button onClick={() => setValue(value+1)}>{value}</button>
);
}As you can see, the gains here are:
After I was done with useState (with initial prototype), I started thinking about useEffect and useMemo. The problem is that they are much trickier to simplify, and it's hard to come with a cleaner syntax for them. This is what I had in mind:
function Example() {
let $value = 5;
const $memo = $value * 2;
// eq: const memo = useMemo(() => $value * 2, [$value]);
$ => {
// effect body
return () => {
// effect cleanup
}
}
/** the above is the same as:
* useEffect(() => {
* // effect body
* return () => {
* // effect cleanup
* }
* }, []);
*/
$ => {
console.log($memo);
}
/** the above is the same as:
* useEffect(() => {
* console.log($memo);
* }, [$memo]);
*/
return (
<button onClick={() => $value++}>{$value}</button>
);
}Notice there is no need for dependencies for both useMemo and useEffect alternatives. They will be injected during build.
Said that, my questions are:
42