Avoiding stale states/references/contexts in reactive frameworks

[hydroperx]

In React.js, it's pretty common to have to do this:

const [x, set_x] = React.useState<number>(0);
const x_reference = React.useReference<number>(x);
x_reference.current = x;

React.useEffect(() => {
    window.setTimeout(() => {
        console.log("actual X:", x_reference.current);
            // and not `x`, because it's a stale/outdated capture.
    }, 1_000);
}, []);

However, in a better world, you could just do:

import { State } from "com.framework";

@State
let x = 0;

React.useEffect(() => {
    window.setTimeout(() => {
        console.log("actual X:", x);
    }, 1_000);
}, []);

In this case:

• x represents a reference to a Framework.StateObject<T>
• x is used like a number everywhere
• Where applicable, x is returned as a Framework.StateObject<T> (e.g. where the context type is Framework.StateObject<T>)

The same case repeats for contexts and references/refs.

I'd like a solution for this, but it does have to be done at the TypeScript-level.

[jakebailey]

I don't know what this has to do with typescript-go. Did you mean to file this in http://github.com/microsoft/TypeScript?

[hydroperx]

Yes, but it's weird that they probably won't accept suggestions of this kind because it changes JS output; but IMO there's already JSX...

[jakebailey]

They? We are the same project.