Why not React?

why-not-react.md

Everywhere you turn there's React. But why? Back in the day browsers were less functional and less compliant so it may have made sense for Facebook to create a tool in which their developers could work without needing to pay attention to browser differences.

I guess there are some companies for which this is still true but for many others its not. Most companies I work with use modern versions of Chrome, Edge, Safari or Fiefox. They run modern versions because the compliance functions of their organizations insist on it because they don't want an old bropwser version to be the reason they get sued for negligence after a hack.

All modern browsers are functionally complete and its hard to find a difference that has any relevance in the vast majority of cases. In my view, the case for React does not exist. It's a legacy tool that's outlived its usefulness but because Facebook uses it, it must be the right thing to use. No. React introduces a redundant run/build process so JSX can be turned into, you know, HTML. It requires the use of a browser plugin just to debug.

Here's a React example from the quick start guide:

const user = {
  name: 'Hedy Lamarr',
  imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
  imageSize: 90,
};

export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={'Photo of ' + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize
        }}
      />
    </>
  );
}

Here's the same result using vanilla JavaScrit assuming ES6 which all modern broswers support.

const user = {
  name: 'Hedy Lamarr',
  imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
  imageSize: 90,
};

export default function Profile() {
  return `
    <div>
      <h1>${user.name}</h1>
      <img
        class="avatar"
        src=${user.imageUrl}
        alt="Photo of ${user.name}"
        style="width: ${user.imageSize}; height: ${user.imageSize}"
      />
    </div>`;
}

What does React offer? Again, sure, if you have to support IE11 or if your clients insist on using Chrome 74 (we're on 119 at the time of writing) then React may serve some purpose. Otherwise not.

So the React aficionados will be shouting saying yes but the build process can do other things like lint and test. Sure it can. But so can a modern development environment like VS Code. It can lint in real-time, run tests and do all sorts of other things making the case for a build or run step redundant.

Yes, they will continue on but you can use the run/build to transpile your SASS or LESS to CSS. Sure, but these are also redundant as all major browsers support nesting CSS. Admittedly it took until August for Firefox to join the party but other browsers began supporting nested classes in spring this year (2023).

Even worse, React foists NPM on everyone. Potentially thousands of files downloaded into each project. What a security risk! Who has time to verify all the files downloaded.