DEV Community

Cover image for React Hooks vs Svelte - Why I chose Svelte?

React Hooks vs Svelte - Why I chose Svelte?

Dhinesh Kumar on August 12, 2021

I work at ZoomRx and I have been developing web applications for the past 10 years. ZoomRx is a strategic healthcare consulting firm. All of my fro...
Collapse
 
tombohub profile image
Info Comment hidden by post author - thread only accessible via permalink

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?

codesandbox.io/s/react-dom-events-...

Collapse
 
dhinesh03 profile image
Dhinesh Kumar • Edited

@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."

Collapse
 
tombohub profile image
tombohub • Edited

I feel nothing, go and move mouse and let me know when is starts getting slow.

Thread Thread
 
dhinesh03 profile image
Dhinesh Kumar

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.

Collapse
 
varghesethomase profile image
varghese thomas e
Collapse
 
scriptkavi profile image
ScriptKavi

Many early birds have already started using this custom hooks library
in their ReactJs/NextJs project.

Have you started using it?

scriptkavi/hooks

PS: Don't be a late bloomer :P

Collapse
 
kvetoslavnovak profile image
kvetoslavnovak

Thank you for your article.

You did use the Svelte code example for the React one.

Collapse
 
dhinesh03 profile image
Dhinesh Kumar

Thank you, I've updated the correct gist link.

Collapse
 
kvetoslavnovak profile image
kvetoslavnovak

👍🏼

Collapse
 
gottfired profile image
gottfired

Wouldn't you handle mouse move in react like this? stackoverflow.com/a/62356629/677910

Collapse
 
dhinesh03 profile image
Dhinesh Kumar

@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.

Collapse
 
gottfired profile image
gottfired

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.

Thread Thread
 
dhinesh03 profile image
Dhinesh Kumar

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.

Thread Thread
 
gottfired profile image
gottfired • Edited

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.

Collapse
 
muhamadbashr profile image
Info Comment hidden by post author - thread only accessible via permalink
محمدبشر ⚛ 🇵🇸

please answer my question before write this do you build project by svelte ???

Collapse
 
dhinesh03 profile image
Dhinesh Kumar • Edited

Yes i did.

Some comments have been hidden by the post's author - find out more