Skip to content
loading...

React Hooks vs. Svelte

Jesse Skinner on November 13, 2019

I get asked a lot on my Twitch channel to show a comparison of React and Svelte. I thought I'd record a short video to show everyone how to take a ... [Read Full]
markdown guide
 

Great article! I'm in love with Svelte, it makes me feel so productive. Recently I made one small project with Svelte and then with React. Just to see the difference. React has more (better) tools like routing, making UI... which is natural. But developing this project with Svelte was pretty straightforward and fluid. I'm not sure if Svelte is ready to be used in large, complex projects though. What do you think? Thanks!

 

I am also using it in production.
Development experience with Svelte has been great.
I am blown away by it.
We did not have any issues related to the framework.
There are some features that we've felt that we need but they are not available yet.
Performance has been great. Stability, predictability has been great.
Compile time barely noticeable.

 

Thanks! I think it's ready. I'm already using it in production. To avoid making a mess of spaghetti as complexity increases, I've been finding it helpful to keep Svelte components as small as possible, use Svelte stores heavily to deal with data loading or to share state between components, minimize the usage of reactive statements, and generally try to keep the amount of JavaScript in each component to a minimum. I plan to write these suggestions up in a longer post one day soon.

 

Looking forward to these suggestions! Right now I try to isolate my main .svelte file keeping only core structure there. Then I have an 'actions' folder and 'services' folder. Functions like fetchData() is inside services and listData() inside actions. So in my main .svelte I just call these actions. I think it's clean and easy to maintenance.

Example

 

Where is the component named? In React it's the exported function name, but what about svelte?

 

Great question. In Svelte, you give a component a name when you import it. The whole file is the component, and it ends up being the default export. Typically you'd give the component file the same filename as the component name you want to be used. For example:

<script>
import Example from './Example.svelte';
</script>

<Example />
 

Cool that makes sense. So definitely never two components in one file? I've been meaning to try svelte out lately. Just got to find a good project to test it with

Yes exactly, one component per file. It's an interesting design decision, but I think it's a smart one, because it really minimizes the boilerplate needed. In fact, an empty file is a valid Svelte component!

Yeah usually the only reason why I end up putting two components in one file for react is to avoid having to write those few lines of boilerplate over again. If I don't have to do that then I would be able to stick to the best practice of using a new file for every one

 

What about helper functions like 'useContext' and 'useEffect' any tips on how to share state or reconcile complex prop updates or cleanup event listeners.

 

Sure, Svelte has a bunch of features that can help here. Stores, onMount, context, and event dispatching. svelte.dev/docs

 

That's pretty compelling. I'll be in React Native land for a while, but maybe by then, there'll be a Svelte Native. Interested to see some more involved examples.

 

Great idea. I love rewriting React code as Svelte, I'd like to do a more complicated example in a future post or video sometime.

 
Sloan, the sloth mascot Comment marked as low quality/non-constructive by the community View code of conduct

People, really don't know JavaScript in 2019

code of conduct - report abuse