If I would rewrite React from scratch it would look like this

#react #webdev #javascript

Keep JSX and functions

function MyComponent() {
   return <span>Hello, React<span>;
}

Keep useState, but add full HTML syntax support, use click not onClick, class not className

function MyComponent() {
   const [count, updateCount] = useState(0);
   return <button click={_ => updateCount(count + 1)}>
      Count: {count}</button>
}

useState with objects

function MyComponent() {
   var me = useState({ firstName: "Ibrahim", lastName: "ben Salah"});
   return (
      <div>
         fullName: {me.get("firstName")} {me.get("lastName"})
      </div>
   )
}

true first class support for async/await and promises, not the fake `use` hook

async function MyComponent() {
   const ditto = await fetch("https://pokeapi.co/api/v2/pokemon/ditto")
      .then(e => e.json());
   return (
      <div>
         {ditto.name}
      </div>
   )
}

Add support for async iterator

Not sure if one would expect this to end up with one final div and auto dispose all the previous, or all div's should be retained

async function *MyComponent() {
   for (const delay of this.delays) {
      await this.wait(delay);
      yield <div>`Delayed response for ${delay} milliseconds`</div>;
   }
}

Add support for observables (e.g. rxjs)

function MyCounter() {
   const time = timer(0, 1000).pipe(map(() => new Date()));
   return (
      <div>Current time: {time}</div>
   )
}

Conclusion

Do you agree on using the platform instead of inventing dubious hooks with many gotcha's? Or do you think it's an impossible idea? If the latter then you would be surprised to hear that the fastest UI library in the krausest js framework benchmark is already built with these concepts, it's called xania (named after a small district in Morocco).

benchmark results:
https://krausest.github.io/js-framework-benchmark/2022/table_chrome_104_windows.html

benchmark code:
https://github.com/xania/krausest-js-benchmark/blob/main/src/app.tsx