Why JSX/TSX Isn't Cool

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.

Cognitive Load Issues

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

const Component = ({ isLoading, items }) => (
  <div>
    {isLoading ? (
      <p>Wait...</p>
    ) : (
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    )}
  </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:

<template>
  <div>
    <div v-if="isLoading">Wait...</div>
    <ul v-else>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

The v-if and v-for directives allow for expressing the developer's intentions more clearly, avoiding nested ternary operators.

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

JSX/TSX was created for React, and its use outside of this ecosystem raises many questions.

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.

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.