JS Built-in Signals In React and Svelte TODAY!

JavaScript could be getting built-in signals! A TC39 could unify how we manage state across React, Angular, Vue, Qwik, Solid, Vanilla... everywhere! Reading the TC39 proposal and talking about it is one thing, but let's see it in action, connecting two different frameworks on top of Astro.

👉 VS Code theme and font? Night Wolf [black] and Operator Mono
👉 Terminal Theme and font? oh-my-posh with powerlevel10k_rainbow and SpaceMono NF

00:00 Introduction
01:51 Creating Signals
05:45 Watching Signals
07:37 Creating Signal Hooks
10:22 Building The React UI
13:04 A Little Summary
14:20 Adding Svelte
17:15 Crazy Last Minute Interlude
20:10 Conclusions

[js.]

Nice video. The fact that two different frontends use the same signal store is awesome.

[bumbletastic]

I'm definitely going to push that into prod right now

[Cuptial-evtb]

5:20 Yeah I was thinking "JOTAI" this whole time, which is already amazing enough that I'm honestly not in a rush to try out Signals anytime soon. Glad I could just watch a quality video of you trying it instead, lol

[seannewell]

Kind of wild the difference b/w how svelte and react can be integrated with this lol

[tjvrana]

Legend state is production ready and is great for react signals

[jammin-yt]

This is a great video, thanks Jack!

Reminds me a lot of MobX. I’m pretty happy that these patterns are making it to mainstream (heh) React.

[deng]

Can you tell me what the theme of zsh in your vscode? It looks good!

[scholarwang-xpkg]

Hi Jack, I really enjoy your videos and I would also like to share the knowledge you've shared with my friends.

May I have your permission to repost your video? Due to regional network restrictions, I have to download and repost it, but I will credit the original author and indicate that it is for educational purposes only.

I look forward to your response.

[mzerone-gm]

I do not see react get signals in recent days the problem is the reason for that the reactive model of react is about re-evalute the component this mean of you want to opt-out you need to use useMemo useCallback memo other framework you need to opt-in so signals for react it is like useState

[HilaryCheng]

It is still early phase, use it once it's api is confirmed.

[bbass]

Great stuff as always J. I'm hoping you might have a suggestion re: first steps in learning about building a decentralized blockchain - possible project coming and I'm definitely not "up to speed" fon this subject, . thanks in advance :)

[count_of_pizza]

I'm wondering, what do you think about web components and webassembly?

[PinheiroJaime]

The effect function, in React, is called inside useEffect. Of course, cause there is a "unsubscribe".
BUT... in Svelte example, effect function is called directly and never unsubscribed.
Is this how it is intended, or??

[dealloc]

I'm personally OK with the explicit "get()". No indirections, and clearly tells the user that this is a Signal which will subscribe to any changes and re-run any computed computations.

If you wanted, you could easily build your own function that returns its own API, i.e. like Solid's "createSignal" function, which returns a tuple with a getter and setter similarly to React's useState.

[products-explorer]

It's too complicated, I will wait for the final native version. Angular uses signal and the usage is simpler.

[VincentJenks]

That looks like a whole mess of gnarly boilerplate, compared to what I'm seeing in Preact signals. I'm excited about this evolution, especially because useEffect is so messy, and you're otherwise left with a myriad of non-standard, third-party options that may not be around for years. Signals brings simplicity and maturity to React, which is desperately needs. I'll wait for the standard to make it into JS and trickle down through all the frameworks.

[ivan.jeremic]

I don't like the way signals syntax looks like, if if is a proposal why not take the chance and make a totally new syntax to make it cleaner, Her just an Example:
signal count = 0;
signal double = count * 2;

effect {
console.log("count ", count);
console.log("double", double);
};

[sou-eu-o-anonimo]

Why all these `new`? Soon enough people will get tired of writing them. Too verbose for JS!