Hooks in React are tricky to use correctly and even harder to use in a performant way. This has left many applications with poor code quality and bad performance, but that doesn’t have to be the case anymore. Signals is a technique that has been around for decades, but only recently has made its way to React and it makes creating performant clean code in React much easier. In this video I explain exactly how signals work and why they are so great.


📚 Materials/References:

Preact Signals Library: https://preactjs.com/blog/introducing-signals/


🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


⏱️ Timestamps:

00:00 - Introduction
00:57 - Demo
02:18 - The Problem With Hooks
04:12 - Why Signals Are Great
05:40 - Basic Signals
11:15 - Advanced Signals


#ReactSignals #WDS #ReactJS

Kevin

FaunaDB

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

Discover the benefits of using signals over React hooks, including simplified usage, improved performance, and eliminating complex rules. Signals handle dependencies automatically and can be used anywhere in or outside of a component. Performance metrics have shown significant speed improvements with the use of signals.

Why Signals Are Better Than React Hooks

I saw this on YouTube the other day and now I want to try it. Love this idea.

I am really interested to try it in a real project!
I am only confused if it’s the right way for managing state… the hooks are designed to manage a state that refresh the component, but in this way we are avoid all the refresh of components.
It’s powerful but I think that it might dangerous because it’s an hack of the normal flow of React.
What do you think about it?

In as much as this looks like a great hack, I really want to know the downside before trying it out on a project.
If you have found bugs or any deficiency, kindly share.

React is bad at state managment compare to Angular or Vue for exemple.
When we are using useSate we always have to deal with a useEffect and a useMemo to avoid useless rerender of the whole children tree while updating the parent.
The problem is that useState return a value and a setter instead of a getter and setter.
Using signals could simplify automaticaly this behavior.
Preact already gives us useSignal but React team should implement it natively…

i almost thought the tutorial is by some guy called “web dev simplified” on youtube