Optimization useState and useReducer returned tuple

[SukkaW]

v8 (and many other javascript runtimes) never optimizes the array destructure access as fast as array index access. So code block A is always faster than code block B:

// A
const tuple = useState('');
const value = tuple[0];
const setValue = tuple[1];

// B
const [value, setValue] = useState('');

Check this benchmark.

The main idea is, we should still do array destructuring (B), while React Compiler could optimize into array index access (A) to gain performance.

[SukkaW]

Prior art: ReScript compiler, mentioned in this tweet by @r17x https://fxtwitter.com/__r17x/status/1881973624913170697

ReScript REPL link