Why Signals Are Better Than React Hooks

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:

🌎 Find Me Here:

⏱️ 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

[marvin_hg]

I'm one of the authors of the @preact/signals library and this is by far the best video about signals and why they are so exciting. I love the way you demonstrate it by coding along and moving an app over to signals. That's a fantastic way of showing the benefits. Thanks for making this video!

[its__VP]

This is an insanely helpful and informative video! 100% would love a full crash course!

[zaryab]

This makes me excited to code in react once again. A crash course on signals would be much appreciated but also make sure to cover its shortcomings, if there are any.

[jonnyeh]

Great video but you missed the best feature: when you render a signal in JSX, without ".value", it renders the signal as a TextNode, and it re-renders just that TextNode when the signal changes without re-rendering the component! This provides HUGE performance gains and is the main reason to adopt signals!

[JavaScriptWithSohail]

This is React + signals (easy state management) + improved performance! What else would I want in life? Thank you

[andreibicu]

This library makes our lives so much easier. It makes so much sense, as it enhances clarity and enforces cleaner code, in the end. Great explanations, Kyle!

[arsen]

It’s a awesome demo of what signals solve in everyday situations. It’s just funny that there’s a huge hype around it right now, when Vue did it some time ago. It just boosts my respect towards Evan You and the whole team behind Vue.

[felipestrefling]

Wow, this is a paradigm shift for me. This will completely change how I manage states from now on, in a good way! Thanks for the video Kyle! Looking forward to a video showcasing what else this can do!👏

[codycodes]

epic! Coming from svelte-land and needing to implement signals in my app so it's easier to maintain and update state between components. This showed me multiple concepts I hadn't grasped/thought of from other signals videos yet! Appreciate the timely + informative video!

Would love to see more content on signals!

fav takeaways:
1. Signals can reduce triggering needless component re-renders when your apps state has moved up to top-most components.
2. We can place our main backing logic in other locations than the parent components and use signals to interact with only the needed parts e.g. sibling component communication.
3. We can use computed signals to add additional functionality to existing signals e.g. getting the length of an array using another signal which is that array.
4. Coming full-circle, we can still have our backing code in the parent component, and simply pass that signal into our child components. Only the child components who reference that parent component via the signal will be re-rendered when the signal's value changes!

on 4...
This makes me think we can potentially do the scaffolding for the signal in another file entirely and just import it into the parent component and then pass it into our child component?

Can't wait to bring these back to svelte and apply them there!

[benbowers]

If these work with React Native, signals are really gonna transform the whole React ecosystem. I'm really happy to see people actually taking notes from all the react alternatives, like Solid, Qwik, etc., and actually creating real solutions to React's biggest down sides.

[IxMeTutorials]

So it basically works like Vue 3. I'm glad that React devs start to realize what they've been missing out on.

[marc]

Welcome to the Vue 3 composition API! Proudly using 'signals' in its reactivity since September 18, 2020.

[spaghettimonsterfish]

Nice video! I'd be curious to see a comparison between preact signals and other state alternatives using similar constructs like redux, zustand, etc, as maybe a follow-up idea.

[xbsidesx]

Great explanation and example. It's so much better to see a working example instead of dummy functions. I really enjoy it. Now about signals, it makes me a little cautious because everything looks very... global? Should I use this only for global stuff? How to know when to use? Also, how to organize them in a large project? I'm guessing those questions are going to wonder for a while, but I'm excited regardless. Thanks for this video! <3

[Sjon_E]

can you make a video about the shortcomming of signals and why someone may not want to use them? you make them seem like a magic to a lot of react problems but i know there's always a catch

[AJARC]

WOW, I can't believe I didn't know about it, I will implement it in one of my projects as soon as possible. thank you very much.

[draecal]

This video just blows my mind, if been struggling quite a lot with hooks and signals just simply everything to an absurd level. Thank you for this piece of gold content.

[janisozols]

Tested it in large project by adding it in one place and it completely broke another unconnected place that uses a lot of hooks, because:
""In addition to overriding React's public API, Preact Signals works by taking React internals and patching them while relying on fragile assumptions about how they work. This library is an entirely unsupported way to use React. The only reason it isn't constantly breaking is that we haven't done stable releases recently."

[silasobviously]

Thanks for this! Really well timed, Svelte just announced Runes which are based on signals. I think they realized how awesome signals are and how well they’re already working in other frameworks, especially in large-scale projects

[Duconi]

I like how amazed you are about such a basic feature that us used by Vue and other frameworks for a long time. Coming from Vue I was always annoyed about the bad hook concept React uses.