DEV Community

Discussion on: Really, why React?

Collapse
ecyrbe profile image
ecyrbe

There is a huge difference between Vue and React, even though both are component libraries.

Vue has a real templating system, meaning, that the control flow (if, loops ...) is declarative... whereas in React, the control flow is made in javascript, it's not declarative... it can only be interpreted at runtime (for each render), with no chance for optimisation.

JSX is just syntactic sugar for createElement (no templating here), whereas Vue has a full integrated template compiler that knows about control flow, component context (props change) and can optimize what it renders.

Hence, not a template syntax engine, even though it looks like one. Hence people expecting it to be a template system, find it ugly.

Now to be quite frank with you. Having used a lot of component libraries, React is the one i prefer using for now. No stockholm syndrome here.

Why ? It's all about writing business code, i prefer using react hooks. It's simple, it's clean, it's composable, it's reusable.

Just compare this :
github.com/jfbrennan/m-/blob/maste...

with this :

AutoComplete = (props) => {
  const [textState, setTextState] = useState('');
  const [completions] = useAutocomplete(textState, props.AutoCompleteSource);

  return (
    <div>
      <input
        type='text'
        value={textState}
        onChange={(e) => setTextState(e.target.value)}
      />
      <div>
        {completions.map((val, index) => (
          <p key={index}>{val}</p>
        ))}
      </div>
    </div>
  );
};
Enter fullscreen mode Exit fullscreen mode

I known i can maintain the second one... the first one, maybe , with pain.

Thread Thread
jfbrennan profile image
Jordan Brennan Author • Edited on

Thanks for clarifying. I know what you mean about the technical differences in "templating", however irl the library's implementation doesn't matter to a dev does it? Part of building components is writing markup of some kind and that's the role JSX plays. Compared to other markup solutions - true template engine or not - JSX imo is the worst.

As for comparing a React component to a Web Component it depends on the purpose of the component. WC have zero dependencies, are faster, and can be shared across all of your companies web projects. Also, your code above doesn't cover half of the use cases the M- autocomplete does. If it did, yes it would probably still be less code and maybe more maintainable and it should because it depends on a 40kb library!