Simplify React code using Babel transpiling: useState

#react #babel #javascript #help

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:

simpler, more concise declaration of reactive property
no need for setter, assigning new value to the property will trigger reactivity
no need to import useState (not a big deal, it's done automatically in any case, but still).
better readability (imo)

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:

Does it make sense? Or, would you use something like this, or would you stick with classic hooks?
If yes, what syntax would you like it to be?
Is there already something similar?