Why JSX/TSX Isn't Cool

At first glance, JSX and TSX seem like innovative tools: JavaScript and TypeScript suddenly become more than just programming languages—they are now almost full-fledged markup tools. However, a deeper look reveals that this approach is far from as ideal as it seems.

Mixing Logic and Presentation

One of the main criticisms of JSX/TSX is the mixing of logic and presentation. Unlike Vue or Angular, where the template structure (HTML) is clearly separated from the logic (JavaScript/TypeScript), in JSX everything is intertwined.

Yes, React allows splitting components into smaller pieces, but in practice, this rarely saves from increasing cognitive load. For example:

function App() {
  // ... another stuff

  return (
    <div>
      {items.map((item) => (
        <button onClick={() => handleClick(item)}>{item.name}</button>
      ))}
    </div>
  );
}

When reading such code, the brain has to simultaneously keep in mind the context of two worlds: presentation and actions. Vue and Angular solve this problem through declarative templates and directives:

Vue

<script lang="ts" setup>
// ... another stuff 

function handleClick(item) {
  console.log(item)
}
</script>

<template>
  <div>
    <button v-for="item in items" @click="handleClick(item)">
      {{ item.name }}
    </button>
  </div>
</template>

This approach makes the code more readable and obvious.

Problems with Syntactic Sugar

JSX looks like HTML, but it's not HTML. Small differences (for example, className instead of class, the need for self-closing tags like , explicit use of curly braces for interpolation) constantly confuse, especially beginners. Moreover, such solutions introduce additional complexity in code perception.

Vue or Angular templates are usually compiled into highly optimized JavaScript code suitable for the virtual DOM or other rendering approaches. JSX requires transformation through Babel or TypeScript. This imposes additional requirements on the build and slows down the development process.

Moreover, any project with JSX becomes practically unusable without a complex build chain.

Limited Ecosystem

JSX/TSX was created for React, and its use outside of this ecosystem raises many questions. For example, Vue offers the use of its templates in other tools—they can be easily adapted for Nuxt.js, which supports server-side rendering.

Angular integrates with various platforms, be it mobile applications or PWAs. JSX outside of React is more of an exception than a rule.

Why is JSX/TSX still popular?

Its popularity is based on React's powerful marketing strategy. The idea of "UI as a function of state," supported by declarativeness, sounds attractive.

Developers gravitate towards concise and flexible solutions, and JSX offers exactly that—a superficially convenient and fast tool for working with components. The high popularity of React and support from large companies such as Facebook and Airbnb also play a role.

Many like JSX/TSX for its conciseness in simple cases, but problems begin to accumulate as the project grows.

Conclusion

JSX/TSX has certainly revolutionized the world of web development, but it is a tool with clear drawbacks. The mixing of logic and presentation, syntactic subtleties, and a limited ecosystem make it less suitable for large and long-term projects.

Vue and Angular demonstrate how templates can be made more intuitive and readable. Therefore, if maintainability is important to you, don't rush to rely solely on JSX.