3 reasons you should try Svelte

react with hook is 9 line, but this component can be instanced any amount, and after remove closeInterval properly. Maybe seems complex, but you can use modern vanilla JS / JSX.

import React, {useState, useEffect} from 'react';
export const Timer = ({...props}) => {
  const [seconds, setSeconds] = useState(0);
  useEffect(_=>{
    const interval = setInterval( _ => setSeconds( s => s + 1 ), 1000);
    return _ => clearInterval(interval); // refacted: Franciszek Krasnowski 
  }, []);
  return <div {...props}>{seconds}</div>;
}

implement example

import React from 'react';
import {Timer} from './timer.js';
import './style.css';

export default () => (
  <section>
    <Timer />
    <Timer style={{color: 'red'}} />
    <Timer className="custom-timer" />
  </section>
);

each timer have own state

Good points, thanks!
But #3 contains a common mistake when describing svelte – its difference is that it compiles to imperative JS, not vanilla. All top frameworks compile to vanilla JS

Alex Kh

@alexkhismatulin

I’m hearing a lot that @sveltejs compiles your components into *vanilla* js compared to @reactjs or @vuejs but that’s a confusion. They all have a vanilla output and what people confuse is *imperative* code output in svelte vs *declarative* in react and vue

09:09 AM - 26 Sep 2020

0 0

Yes, agree with the headline of this article, you should try Svelte and not just because is the new "cool kid on the block".

For me, it was a breath of fresh air to be able to make websites with as little extra things possible and still have several functionalities baked into the app.

I personally like how you can have everything necessary for a component in a single file and not needing to go back and forth between styles, markup and js.

I have already used it 2 times to make business type websites for my father and a good friend of mine and it almost feels like I was just using plan HTML + CSS plus some cool functionalities you can implement with just few lines of JS.

I'm not a big React fanboy but, I'm not sure about Svelte. Blending styles, controllers and presentation into one file feels wrong. Also, I don't know if in Svelte it's possible (or how hard it would be) to implement an app state management with central store(s). I think the comparison would be only fair in a more advanced use case.

Most of my career I've been using React, but recently I decided to try Svelte for a project. I think I still prefer React approach to building UI. But that's my personal opinion. But one thug bothers me in that article, why are co comparing Svelte to React example that uses classes? It's quite 'old' approach and you can do everything with hooks much easier and cleaner. I just think these kind of comparisons don't give a real justice.

I tried react and vue and dont like it.
I think that Svelte and Nim are better giving you more features without the need of linking other additional libraries.
You should try Nim if you liked Svelte.
😃

Or you could try RiotJS which appears to have heavily influenced Svelte, and is a lot more mature - it's on version 4 (version 5 is in alpha)and has been around since 2013. A similar timer component would be defined as follows:

<timer>
  <p>Seconds Elapsed: { state.time }</p>

  <script>
    export default {
      tick() {
        this.update({ time: ++this.state.time })
      },
      onBeforeMount(props) {
        // create the component initial state
        this.state = {
          time: props.start
        }

        this.timer = setInterval(this.tick, 1000)
      },
      onUnmounted() {
        clearInterval(this.timer)
      }
    }
  </script>
</timer>

I only know base of HTML, CSS, and JS (plus, little knowledge about Vue). Then, I try React but it's difficult for me. I try Svelte, then, I can create website with it. It's so easy! 🥳🥳🥳

I build my blog with Svelte.

imo it is just even easier to write functional react components for stuff like that so you may want to consider that when comparing line count

The word vanilla is confusing here IMO