React Signals tutorial - practical guide

In this video, we're looking at the new state management library called Signals from the Preact team. The concept of Signals was perhaps introduced in Solid JS for how it handled reactivity for components. In any case, this is good news that Signals are now available in React which makes state management SO EASY!
In this video, we look at what signals are. We use a really simple VITE + React app first to convert the counter component to use Signals instead of the useState() hook from React. Then we also look at what a computed property is from the React Signals. After that, we jump to a more complex, real-world project example to see how we can easily use Signals to manage state in our React Apps.
.
.
If you watched the whole video, comment in the chat "I've seen it all :D"
If you like the video, don't forget to hit the 👍 button. Also, subscribe if you haven't already :)

✨Sign up at Rapid API Hub ✨

📚 FREE BEGINNERS PROGRAMMING COURSES:

📚 Angular Cookbook:
An amazing treat for all Angular engineers regardless of their years of experience. More than 80 recipes to follow.

🎥🎤📷 GEAR for Content Creation (contains affiliate links) 🎥🎤📷:

❤️❤️ Become a Supporter at Patron (because you're awesome):

❤️ Support the CodeWithAhsan community One-Time-Only:

🎥 Live Streams / Free sessions:

Timeline:
00:00:00 - Introduction
00:00:30 - Creating a new React & Vite app
00:02:09 - Basic example of Signals with React
00:06:27 - Real-world example of Signals with React & Tailwind CSS

[CodeWithAhsan]

Do you think this is better than Redux? Or will you keep using Redux? Or is there a different State Management library that you prefer?

[codemonkeynorth]

Better to just use {count} instead of {count.value} in your jsx part, because it doesn’t cause the whole component to rerender on change, it just updates that placeholder

[garcipat]

Is this with the AuthSignals the recommended way to store the values?

[IjcloudDev]

Hi...i love ur video could you tell me how u edited, mostly putting ur social handle in d video. Thanks

[riddy]

Nice Video. I'm trying to use signals, but it seems they don't work with `react-navigation` ?

[SahraClayton]

Do Preact signals work with React version 18, I can't remember who's video I watched but I thought they said that signals do not work with React concurrent mode. I might of heard that wrong.
They do look very good though, seems to solve some of React's problems.

[AbdulBasit-toxr]

It updates the value like "count.value++". Does it mean it does update the value in a mutable way?
what if we have a complex data like
var foo = signal({ a: 1, b: 2, d : { e: 5 } })
should I have to update the original object like foo.value.d.e = 10 // update the e value ??

[yabuking]

Maybe add which signals package to install. Not sure why you skipped that.

[mognomoinak]

Hi Ahsan, can you please share the source code on github or something similar. I would be very greatful.

[EthanStandel]

Shameless plug, but if you want Signals to scale like a full state management solution, you grab preact-signal-store. Currently it only supports Preact, but I'm working on converting it to a monorepo that exports a package that works with React as well.

[IjcloudDev]

Hi...i love ur video could you tell me how u edited, mostly putting ur social handle in d video. Thanks