React Hooks vs Svelte, There is a lot more to discuss about it but for this article I’ll give you my perspective about two important aspects of the frameworks, better developer experience and better user experience.
Better developer experience
- Learning curve
Although I knew the React class component well, it almost took a week to understand all the nuances of hooks like the why, where and how to use it effectively. This blog will help you to learn more about the underlying hooks system.
- Readability and Maintenance
We have been using a lot of frameworks in our products. So readability and clarity are more important to me than any new fancy features.
“Any fool can write code that a computer can understand. Good programmers write code that humans can understand.” ― Martin Fowler
React Hook - sample code to capture mouse coordinates
Svelte - sample code to capture mouse coordinates
As seen from above, Svelte does great things in a few lines of code. It's easier to read and understand by anyone who has some basic HTML/CSS/JS knowledge. It completely removes all of the unnecessary boilerplates like useState, useRef, useCallback, useMemo etc., from our application logic. Writing less code will help us with less maintenance and more time to develop new features. Read more about the readability part on Rich Harris’s blog. On a side note: If the same example was written using React class component, it would be way more readable than the one using Hooks.
- External library integration
React uses Virtual DOM so we need a special wrapper to handle the state of the external library components. But, the React community is extremely huge so you can find wrappers or equivalent React implementation easily. On the other hand, Svelte deals with the real DOM. This makes things simple and easy when doing some CSS Animations and DOM manipulations. You can use any DOM libraries directly or you can write a simple wrapper by yourself.
Better User experience
- Svelte surgically updates the DOM without relying on a middle interpreter or any complex reconciliation algorithm. It’s often beating out other frameworks on UI and JS speed. And it’s increasingly used in production on various popular and traction heavy sites.
- React is fast enough to give a good user experience for the majority of use cases but when we have performance needs in terms of rendering, especially if we work around data visualization then it is not enough. Virtual DOM is a pure overhead. It doesn’t matter how efficiently the diffing algorithm evolves; it will always eat up client’s hardware resources.
Doesn’t Svelte have any flaws?
- The syntax used for component props is a bit weird for me.
- Svelte won’t listen for reference updates and array mutations, which developers need to actively look out for and make sure arrays are reassigned.
- Compared to Svelte, React has a huge community and you can easily find a solution to any problem. As a React developer, I really like Svelte as well. However, I've only found Svelte useful in lightweight simple projects. I like Svelte API and reactivity out of the box, but for all its advantages, the ecosystem around svelte is lacking compared to react. To speed up development in a more complicated web app we need tools/libraries like svelte kit, svelte-query, svelte-yup etc., but these are not mature enough yet. Hopefully, Svelte's ecosystem will get better as more people start using it.
- In my experience I observed that developers always find it difficult to switch from other frameworks to React Hooks. Trust me, I was a big fan of React hooks when it was introduced. I do like the idea of function components and hooks, but I certainly don’t enjoy working with them in a larger project.
- See the below history, React keeps evolving but in the wrong direction, Svelte simply just chooses the right path.
Top comments (15)
I don't get it, are you paid by somebody or you don't know what you are doing? What are you trying to achieve by showing fake examples and confusing people?
@tombohub Actually you don't know about react hooks well. As you mentioned, simply adding onMouseMove will work but it will end up a performance issue due to frequent garbage collections. we might not want to constantly be registering and un registering listeners every single render right?
Still you don't understand ??
Refer the open source code usehooks.com/useEventListener/, Read it line by line. What do you feel now?
To write high performant react hooks app you should know about the react internals. This is what I'm trying to tell developers: "React's learning curve is higher compared to Svelte."
I feel nothing, go and move mouse and let me know when is starts getting slow.
Please feel free to do it by yourself if you have time :)
If you want to do it in a smarter way, you can use chrome debugger.
codesandbox.io/s/react-dom-events-... Fixed version
Thank you for your article.
You did use the Svelte code example for the React one.
Thank you, I've updated the correct gist link.
Wouldn't you handle mouse move in react like this? stackoverflow.com/a/62356629/677910
@gottfired Simply adding onMouseMove will work but it will end up a performance issue due to frequent garbage collections. please refer the usehooks.com/useEventListener/ code for more details.
To be honest with a simple onMouseMove there is no performance penalty at all, but sure adding an event listener avoids synthetic events. But in that case I'd not cite the code of useEventListener() as part of the overhead, since you'd simply use that hook when you want to add an event listener. That would be like adding the compiler code for on:mousemove from svelte as overhead to the svelte implementation. Not that I'm in any way against svelte. I think that direct dom manipulation definitely has a future, but I think the comparison should be fair.
Agreed with you, We can use the 3rd party useEventListener hook. but how do we know that we need useEventListener hook? Also, this is a generic problem so we can find 3rd party hooks, what if you have a complex ui that needs to be developed by yourself, you'll end up using useCallback, useMemo, useImperativeHandle etc., right?. This is what I'm trying to convey here, if you need a high performance react app, you'll need additional learning and time apart from your application development and you'll end up with less readable code. Svelte completely removes all of the unnecessary boilerplates like useState, useRef, useCallback, useMemo etc., from our application logic.
Agreed. When I transitioned to hooks from class components it took a while to wrap my head around the concept. But now I find it very powerful, since it easily allows separation of component logic and rendering and improved React code reuse a lot. I'll keep an eye on svelte and also solid, which also looks very promising and imho easier to transition to as a react developer than svelte which gives me Angular (shudder) vibes.
please answer my question before write this do you build project by svelte ???
Yes i did.
Some comments have been hidden by the post's author - find out more