DEV Community

Discussion on: How is Svelte different than React?

 
sharu725 profile image
sharath Kumar • Edited

React

import React,{useState} "react";

function App(){
   const [name,setName] = useState('');
  const handleChange = (e)=>{
     setName(e.target.value);  
}

 return (
   <div>
     <h1>Hello {name}</h1>
     <input onChange={handleChange} value={name} />
   </div>
 )
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Svelte

<script>
    let name = 'world';
</script>

<input bind:value={name}>

<h1>Hello {name}!</h1>
Enter fullscreen mode Exit fullscreen mode

So what's wrong with this way of doing it. It is more readable and maintainable. Nothing fancy going on here. Anyone without JS knowledge can go through the Svelte code and can guess what's happening there. Can't say the same thing about React.

I have been using React for years now. It is just not right. React is a short-sighted framework.

Thread Thread
 
steventhan profile image
Steven Than

I'm not sure if you examples highlight the pros for Svelte, if anything, they actually discouraged me from learning it

So what's wrong with this way of doing it. It is more readable and maintainable.

This is highly debatable. Looking at the snippet, several questions came to mind: What is bind:value? it's not a valid HTML attribute as far as I know. Why is there an unused variable in the <script> tag? What is this syntax of {name}, maybe it refers to the one in the <script> tag, but isn't the tag already closed before getting to this line?
Overall, it makes me think Svelte has too much implicit magic.

Anyone without JS knowledge can go through the Svelte code and can guess what's happening there

Why is Svelte's readability to non-JS devlopers an advantage? It's an JS lib/framework at the end of the day. You're trading readability between JS and non-JS devs here, what good does it bring?

An as an aside, I've yet to come across a resource for writing reusable libraries that target Svelte. I often find myself writing npm-installable component libraries, and react hooks brought it to another level by letting me ship non-visual logic with ease, is there such concept in Svelte?

Thread Thread
 
kevmodrome profile image
Kevin Åberg Kultalahti

To answer your last paragraph; the concept you're looking for is custom stores