| HN Mirror

This is a good point. Svelte has a lot of 'magic' under the hood but a lot of it does not look like magic which can lead to confusion.

The docs are pretty complete and well structured. There are of course obscure issues, but most of the footguns folks run into for typical use cases (e.g. doing something like using an array method and expecting reactivity) are well documented, and solutions on avoiding them are easy to find.

This means that if you do run into something which is not completely intuitive in Svelte, it's normally because there's not an intuitive way of doing it, which means you do more 'ad-hoc' learning as you try to work out what you need to do to get things working the way you want, and sometimes it's easy to fall into the trap of thinking that something that should work is not working.

React does less to 'hide' its magic and makes you work harder mentally up-front to understand what it's doing in terms of component lifecycle etc. In exchange, because it doesn't look as intuitive, you're a bit less surprised when it doesn't work.

For example, in Svelte, you might create something like:

  <script>
    const colours = ['red', 'white'];
  </script>

  Colours of the British Flag

  <ul>
    {#each colours as colour}
      <li>{colour}</li>
    {/each}
  </ul>
  <button on:click={() => colours.push('blue')}>Add blue!</button>

If you click the button here, nothing happens, because you only mutated the array, which doesn't trigger reactivity. If you're not aware of this, you might not immediately understand that you've made a mistake.

A similar React component would look something like:

  function () {
    const [colours, setColours] = useState(['red', 'white']);

    return (
      <div>
        Colours of the British Flag

        <ul>
          {colours.map(colour => (<li>{colour}</li>))} 
        </ul>

        <button onClick={() => colours.push('blue')}>Add blue!</button>
      </div>
    )
  };

You'll get an IDE warning that 'setColours' is unused, and anyway, you already wrote the code to destructure the 'setColours' function out of 'useState', so you theoretically should know that you need to use it, the mistake is 'clearer'.