React Hooks vs Svelte

[@CodingwithJesse]

If you enjoyed this video, check out my video course The Joy of Svelte at www.joyofsvelte.com/

[@IfyDon]

Svelte is pure developer joy

[@CodingwithJesse]

Well said!

[@kaidoesthingsxyz]

Svelte was the first framework I used and I love it

[@ChumX100]

Since Svelte is a compiler, it's syntax can be pretty much whatever devs prefer and at the same time, the browser receives the code that it likes. No compromises: Happy devs, happy browsers. Genius!

[@CodingwithJesse]

Well said, Duke!

[@Anonymous42282]

Nice! You could have removed the outer divs which was necessary for React but not for Svelte - saves 2 more lines.

[@paul_devos]

Great comparison/example. Coming from Python. e.g. we hate boilerplate, this was awesome.

[@tim_t]

You can remove the div tags! 😆 It took me too long to realize that I don't have to nest a file's elements in a single parent div.

[@CodingwithJesse]

Great point! I could've made it even simpler! :)

[@jonty3551]

Wow... thats great....

[@danielpiedraquintero]

simplicity and elegance... thats why I love svelte! I have been trying to learn vue/nuxt and I have to say it feels messy and like I need to write twice as much code as in svelte. for some reason I do not feel as comfortable as when writing some svelte component.

[@anarcus]

What the... I've looking into Svelte for like 2 days and i already love it xD I used React, but i hated all that unnecessary stuff that it has I also tried Vue, but for some reason i still didn't like it's syntax I know that Svelte's syntax is close to Vue but still, i feel a lot more comfortable with Svelte! I already know what my next project is gonna be written on :D

[@stephaniemay9090]

is there something in react that svelte cannot do? (literal question, because i just learned how to code javascript and im looking into svelte!)

[@CodingwithJesse]

I don't think so! React is JavaScript, whereas Svelte is really a new programming language that includes and builds on JavaScript, so anything React can do, Svelte can do better 😉

[@maskman4821]

what an awesome comparison !!! svelte without a doubt beats react, no question at all !!!

[@CodingwithJesse]

Thanks! I think so too :D

[@ajdegol]

Hooks certainly made things better in React, but all my new projects are Svelte these days. There are teething issues for sure, but then you always forget the pains you went through to learn your current tools.

[@ThatGuyAnonymous]

Svelte is what every framework should aspire to be, I love react but if doing common things like form, for example, requires heavy wiring with third-party libraries than there is something fundamentally lacking form the framework. there is too much plumbing and hacking to get anything done.

[@CodingwithJesse]

I agree. I hope Svelte inspires a new generation of amazing programming languages and tools.

[@IamSH1VA]

Svelte is much simpler & very very performant 👏🏻💪🔥

[@roblesrt]

Awesome, simple and easy to understand example! Keep it up sir!

[@CodingwithJesse]

Thank you so much!

[@NoahNobody]

Any plans to do more comparison videos like this? Like useEffect, useRef etc...

[@CodingwithJesse]

I hadn't planned that but that's a great idea! I'm working on my Svelte course ( joyofsvelte.com ) right now, but I'll think about making more React-vs-Svelte videos once it goes live.

[@Ricardoromero4444]

How about custom hooks? In react I could declare a function that returns [counter, increase, halve, double] and I'd have a reactive variable and functions to mutate it. I haven't found out how to do something similar in svelte. Tl;dr: how do you share logic across components in svelte?

[@CodingwithJesse]

Good question! You can use custom stores to share reactive state across components. svelte.dev/docs#svelte_store

[@yt-sh]

So will we see more Svelte projects from you?

[@CodingwithJesse]

Absolutely! Subscribe to my newsletter for updates: tinyletter.com/jesseskinner

[@josbexerr5166]

Excelente, el compilador svelte mi sorprendio graicas

[@pablowbk]

Very good explanation, thanks

[@vexkiddy]

Love Svelte!

[@torb-no]

I take bit issue with your claim of simplicity. The surface level simplicity is there for sure, but in reality Svelte compiles what you write into more complex JavaScript. With React it's still just running the very code you wrote. This can potentially be relevant if you need to very precisely understand what's going on in your code. The tradeoff might be worth it of course! It's just a complication I think ought to be recognised. Additionally: I don't think this video fairly compares React Hooks as one of the big advantages of hooks is how you can easily refactor and compose functionality in a reliable way. Does Svelte also have functionality that let's you do that? I'm not being rhetorical here, I'm genuinely wondering, cause the comparability of react hooks is brilliant and I'd love to see equivalent functionality in other places.

[@CodingwithJesse]

Thanks for the comment. The code Svelte compiles to is actually quite simple and readable, you can see it in the right pane of the REPL, if you're curious. I'd argue that the React library itself is more cryptic and unreadable and stands in the way of understanding precisely what is happening, particularly when it comes to the magic of hooks. As for the ability to refactor, Svelte's reactivity does need to happen within Svelte itself, but if you want to refactor some of that reactive code out of Svelte into plain JavaScript, you can use a Svelte store to achieve this. svelte.dev/docs#svelte_store

[@pushpithageeganage7992]

A cool guy right there !!

[@CodingwithJesse]

You're too sweet :)

[@johannes.schaffer]

Imba makes reactivity even shorter

[@CodingwithJesse]

Oh cool, I hadn't heard of Imba before, thanks. I wonder what the click button example would look like in Imba...

[@johannes.schaffer]

This example wouldn't be much of a different in Imba. You really cannot make this any shorter. But if it comes to things like changing values (in Svelte you have to reassign them), or recomputing values (in Svelte you have a special, though very short, syntax), imba shines. You can do things like array.push, and imba does the rest. In Svelte you would have to use the more verbose spread syntax for that.

[@CodingwithJesse]

@@johannes.schaffer Ah nice, I'll have to check it out sometime.

[@johannes.schaffer]

If you have a "framework" like React or Svelte, wether it uses a VDOM or the real DOM, they both have to know what exactly changed in the code, to update the specific Node in the DOM. Therefore they have a more verbose syntax. Imba on the other hand rebuilds the entire DOM each time and is still WAY faster than Svelte or React (On there website they say 20x faster than React). Imbas approach is called memoized DOM

[@fibonacciinvestments2091]

Facebook employees thumbed down this video.

[@und0]

Cool video! You've demonstrated how svelte indeed is simpler especially for beginners! With that said I have to disagree with you a bit, I wouldn't consider importing React, function statement and return statement as "boilerplate" I can buy the useHook as boilerplate however. I have a lot of optimism about svelte I love the concept and how it's a truly reactive framework instead of a virtual DOM run time based framework. What I think svelte gets wrong is the mutability, the reason you need a bit of boilerplate for react is because you aren't directly mutating anything, you're calling pure functions instead of assigning. This is why in simple contexts svelte appears to be much simpler than React but in more complex scenarios mutability with the "let" initialize tends to lead to poorer quality code. Where svelte gets it right is the performance, compiling before instead of running at runtime is a huge performance advantage. Unfortunately in many scenarios this is not a huge factor. I've been playing around with svelte a bit and I must say I like it a lot but React is still superior in my opinion. I know Svelte is young and I can't wait to see awesome new libraries extending svelte come out. I'm thinking about making a couple myself :)

[@CodingwithJesse]

Thanks! I disagree about mutability leading to poorer quality code, though. I think it leads to a lot simpler code. But if you're into FP, there are lots of other options out there.

[@m3rl1on]

yep this is why i love svelte. unfortunately, i can't get a job only by learning Svelte though, because most of them still uses the big three.

[@danielpiedraquintero]

Jessen's Channel do you keep an eye on twitter.com/sveltejobs ?

[@CodingwithJesse]

That's true, to a point. But a few years ago none of them were using the big three, because the big three didn't exist yet. I mean, it's hard to know what'll get you a good job next year.

[@maorben3313]

The simplicity goes away with the compiler. It is no longer javascript... It gives strengths but cancels others. And React is javascript (+jsx) so i dont know how i feel about calling “function” and “return” a boilerplate

[@CodingwithJesse]

That's true, it's better than JavaScript :) And fair enough, "boilerplate" might be overstating it, but it is extra code that isn't needed anymore.

[@maorben3313]

@@CodingwithJesse I personally think that Angular and Vue did wrong with making their own templating language. That’s why JSX is so powerful it is not javascript but it’s kinda is(??) I don’t like learning new syntax that is unique to a single framework. My brain cells are occupied enough 😎😎

[@rishabghosh595]

now you have a global variable.. congratulations..

[@CodingwithJesse]

It's not global, it's scoped to the instance of that component, just like state in a React component.

[@Chana999]

When you say something and you don't know what you are talking about ...

[@jsonkody]

you obviously don't know what you are talking about :-/ Svelte is amazing. And as I know it follows the best practices by default (if you explicitly doesn't tell otherwise) .. like component scoped variables or css

[@aghileslounis]

it is bad practice to manipulate data like this, and in real world project we need something to manage state in a very strict way. Also i'm sorry but Svelte is not Elegant to write, so much tags and new syntax, not intuitive i guess, the thing i hate the post is when i need to write logic inside html AND in a new way {#if } common Beside that the way you teach is very interesting, clear and efficient

[@CodingwithJesse]

Thanks! I disagree about this being a "bad practice" though. Reminds me of the talk that introduced React to the world, Pete Hunt's "Rethinking Best Practices". Besides, if you want strict state management, you can use a custom Svelte store. Of course, if you don't like the syntax, there are lots of other tools out there. It's always best to choose the tools that you enjoy using most.

[@aghileslounis]

@@CodingwithJesse thank's for taking this as good comment, beside what i said, i really like the idea of svelte i think it is the future and the next step after virtual DOM.