DEV Community

Ibrahim ben Salah
Ibrahim ben Salah

Posted on

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

Keep JSX and functions

function MyComponent() {
   return <span>Hello, React<span>;
}
Enter fullscreen mode Exit fullscreen mode

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>
}
Enter fullscreen mode Exit fullscreen mode

useState with objects

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

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>
   )
}
Enter fullscreen mode Exit fullscreen mode

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>;
   }
}
Enter fullscreen mode Exit fullscreen mode

Add support for observables (e.g. rxjs)

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

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

Top comments (2)

Collapse
 
dephiros profile image
An Nguyen

Saw this lib on us benchmark and looks amazing!!! Native async, Rex support and potentially resumableLooking forward to learn more

Collapse
 
xania profile image
Ibrahim ben Salah

thanks for your encouragement :)