A video showing the advantages and disadvantages of each reactivity model would be nice, signals have gained a lot of attention thanks to seeming like a simple solution for the rendering cycle used by React without changing much in the writing model but for me who currently use Svelte as my main framework seems to be another step backwards as it brings more work to be done during runtime and decouples state from component (making animations and lifecycles like svelte uses impossible), not that the system svelte uses doesn't have either your problems, that's why the idea of the video

Thanks again Jack for all your hard work in putting these videos together.

Solid's state model wins me over -- it feels like how state management ought to be (IMO). Fine-grained updates, easy to use w/o being too easy like Svelte (i.e., Svelte being easy to get yourself into trouble in large project, 2-day data binding, auto-exporting props, etc). Too bad SolidStart is only in beta -- I've been coding the same project in SolidStart and SvelteKit for the past couple months, and prefer Solid in almost every way except for not being 1.0 yet (no major issues, more about knowing there will likley be breaking changes). Love your videos Jack! Always well done and informative -- a great service to the JS community. Thanks!!

8:47 you can see that fallback in For component is not when data is loading, but when you have an empty array, like when you filter doesn't match any items

that thumbnail, looks so promising

Thank you for helping me keep my FOMO in check! :-) Always nice feeling when you grasp a concept you previously didn't. Thanks for all your videos Jack.

For people who use Vue or Svelte this feels like 1990

There are a few creators on KZfaq to which I give my like right off the bat, and you are one of them! Thanks for the - always useful - content!

Finally reactive concepts from angular comming to the other frameworks as well! 🙌

`@preact/signals-react` does support fine-grained updates - just omit the `.value` property when using signals in JSX: Filter: {filter}

Jack as usual your research is excellent and you deliver in spades. Unfortunately, my key takeaway here is that Ryan is a friggin' genius and now that SolidStart is slowly chugging along towards a production-ey state, the rest of the class is growing restless.

It would have been a wonderful explanation of you link signals with refs in vue, as both uses proxy under the hood, but great explanation loved it ❤️

Hey, cool, Jack is representing team right side panel! My brother!

Great talk. thank you Jack! I guess the reason solidjs, qwik needs signals based on how they update dom. Updating states subscribed by a component followed by full re-render of component , that's why we can't say it's fine grained state update. However, qwik and solidjs only updates some point of declaration in single component , which makes they can fine grained states management. For support their architecture, signals seems inevitable

Love the snow in the background Jack

Youve come along ways man and can tell your zeal for what you do, cant thx you enough for not holding back the wealth of knowledge

Nice video, I would be interested to see the different lighthouse scores of these solutions. maybe even a performance analysis for each implementation :D

And somewhere under a palm tree, a Java Spring Enterprise developer is sitting quietly, drinking sambuca. The one who understood life, he is in no hurry :)

THANK TO THE PREACT TEAM!

Oh, Qwik's code - cool!

Really loving Solid Start. 👍

Thanks for sharing, Jack!

Signals are quite similar to events ... And we can reimplement signals "easily" by using (react-mitt) library ... However, signals may lead to bad practices Would love to hear you thoughts on this

I'll waiting this video for a long long time! Yeah!

17:44 - you could show the DOM nodes updating in the element inspector

i like the way you compare it in other libs too

Appreciate your great contents! Now Jotai is even better with signal

Is there a way to understand how the signals work under the hood without actually reading the source code? I tried first, but it feels overwhelming. I never worked on a JS library, so don’t even know where to look in the repo. At the same time, I wanna understand how these technologies work on a deeper level, because all the videos about Signals I’ve seen so far only explain the API and how to use them, but not how they work and why they are so cool and better than the V-DOM

Signals are also coming to Angular

Great video as always A small correction, svelte uses the preact/signals core package

Thank you for the nice video Jack!

The gymnastics some go to instead of simply move to Solidjs... React was a stepping stone in the age of web development, let's move on to the next already.

Hello Jack, I am your fans from Macau. I wnna ask you what is your theme of VScode? I really love it, can you share with me please? thank you!

Great video Jack, as always! Care to share more about your terminal, looks like a modified version of vscode's? I like the fact that it shows node version and other useful stuff

Thank you for this video. I do imagine time you need to get all versions work and captured. I’d be also happy to see some comparison to svelte and vue. Anyway thanks!

Cheers Jack

I am happy react and jotai user, but I should look into solid, looks interesting 🙂

I already find filtering in React so easy. It’s just JavaScript but Solid looks pretty sweet though. Makes more sense to me than svelte.

Mind blown 🤯

Hopefully solid steals some of the react ecosystem

Incredible video again 👏

Love you man

Just Amazing

I notice you destructure the User component props in solid. If I'm not wrong, we should not destructure the component props in solid because it won't be reactive again. Can you confirm this?

HI @Jack Herrington! I found a little bit confusing the function `routeData` because the 1st thing we do is create this array destructuring with [users] on it, but then inside our createResource 1st parameter the function we pass returns a object with property e value for users. How it works for the array destructuring for createResource return object to get the 1st value of the returned array? Sorry if my question is a bit confusing too... But I wanted to understand how that `{ users }` object go to the first value of the returned array on line 13 at 9:15 of the video timeline. Thanks!

Jack, looking for some feedback. If building a large enterprise app, and you had a choice of Zustand or Signals, what would your pick be?

“Signals” will be great if “signals” is not tied to jsx, react, vue, solid, svelte, angular, … Advantage of framework/library independent “signals” is that developer can (1) switch from react to solid or others (2) test state management without loading up all these e2e… just use plain javascript test runner like mochajs or jasminejs.

Thanks!

Thanks and really nice. Can we move the array values as separate child component to see how Signal subscribe and works in preact ? seems Signal is global state and hope it may render only child. Please let me now your thoughts.

Vue does it in so much better way(not just in state management) but still ppl looking into react that implements layer on top of another layer

Jotai can do lot of things really it's a great library and integrations are really cool.

"What are they?" - That's why I am here 😂

💚

Is it accurate to think of reactive state management as 'use this variable x and all the changes that may happen to it'?

Great video as always @jherr. In case of both Solid-Start & Qwik-City the signal data will be computed on the server before first render, apart from the actual filtration that will be done on the client. Is there a way to run the computed on the server for lets say the preact or jotai signal if used with something like next.js?

There is a sudden cut at the moment when you are going to show the re-renders with the profiler in the example with Jotai

Vuejs is so much more elegant and readable in its writing than Solid, I don't understand the current craze for this library

Here's one for you - Why should we care about signals? React is pretty fast with regular updates. Is the performance gain that significant?

react/v-dom is going to be for boomers soon

What font do you use? Thank you for the video

In the Solid example, is there any particular reason to wrap users in "{ users }" in routeData return statement (What creates another object with key: value pair users: users?) then to destructure it in Home function? Wouldn't it be more simple to return directly the users array then assign it to users const?

They solve a problem that they created it. I went back to vanilla and left react for companies with 100 developers

So one more reason to use Jotai. Can you please share if Jotai is reliable for production product or internal only? how you take that kind of decision in general?

Among the apis presented in this video, in my opinion, the best by far is preact/signals By invoking the value using the .value property it is possible to destructure the signal when passed as a prop to another component (one of the most annoying parts of the solid, which brings with it other even more annoying problems such as the need for a helper function to declare default values for props), -it is possible to invoke the signal value inside an effect without adding the variable as a dependency using the .peek() method (something impossible with solid)- *as @ryansolid made me aware, it is possible to do the same with signals in solid using untrack*, it is possible to invoke the signal value inside the jsx reactively only using the variable directly without calling any method or property and on top of that thanks to the .subscribe method it becomes compatible with Svelte without any modifications

Can we used signal in react ? Can we used preact signal package in react ?

So we are here because directly manipulating the DOM with vanilla js was too hard and untidy right? We're back to server rendering but seems like a lot of effort just to render some html

Doesn't Solid do computed values automatically if you assign a value to a function which calls the original state within it? Is the createMemo needed?

Your React `useRef` example for updating innerHtml wasn't done correctly.

What's your vscode theme?

Can you make a video about 'React Forget', it apparently makes React apps more performant by reducing rerenders?

Poor Vue 🥲 left out again. Having one of the best reactivity systems out there, implementing the exact same "signals" functionality, it often gets overlooked in these discussions.

As of latest next.js an today no need to add above text on each file

Hello, this is your daily reminder to not destruct props in solid 6:58 thank you

Signals? The thing that C has had since 1970-something?

How would you implement something like rxjs' `switchMap()` for async results that can return out of order, and you only care about the most recent request? Or `debounce()`? Is it essentially a bunch of bookkeeping with imperative code?

Hi, do you know if this is supported in nextjs? Tried multiple libraries but no luck

6:45 - Through what kind of black magic does useRouteData link with routeData?

somehow sound like Rxjs from angular ?

Looks like react people always try to invent vue

Signals really seems to be the future when using jsx, especially when compared to the react model But it seems to me that it is possible to go much further by dropping jsx altogether and moving dependency analysis to the build like Svelte does As Ryan Carniato himself (creator of solid) said, the implementation of signals has some disadvantages because the signals, due to the need to manage their own dependencies at runtime, already have a default minimum size, as they are natively disassociated from the component, it is not possible to have a visualization of component lifecycle and make the framework hostage to a single state management api Svelte on the other hand to avoid this differentiates local state created with the let keyword from shared/composable state created with any api that obeys a specific store contract whether it be the native implementation of the stores framework or any other external one (preact signals for example)

What's the name of that font, wow it's so attractive in coding

Plz make videos how we make API in GrapQL plz ASAP

Small, unimportant correction: You don't have to use in SolidJS. You can use .map and any other array method on signals-- just like you can use ternaries instead of . *Edit: See Correction Below!!!* The utility components are provided for better DX and performance. EDIT: *Correction* You can't set up a component with a ternary, but you can use one inside the return statement in {brackets}. A ternary will mount your component correctly, but it won't respond to any changes in the signals. I couldn't find any gotcha's with though-- it just seems to be more performant and easier to write than a .map.

create-fast-context better 😎

I don't really understand the hype for Signals, just a rebranding of an Observable?!

Please i just built an app in react, utilizing signals but I get this error => { 'default' is not exported by react/jsx-runtime, imported by node_modules/@preact/signals-react/dist/signals.module.js } any time I run vite build, I have searched but couldn't get any answer... Would appreciate if you can help me please

I appreciate it but, having moved to React from Vue for almost two years now, I don't understand how this is becoming popular since Vue has been doing this for a while now. React is nice of course but I always liked Vue better and I wish it was the more popular option

All syntaxes but the Solid one look gross

Why do people always show the state as a global in these signal tutorials, aren't final variables known to be a bad idea for decades already?

So much confusing knowing all these frameworks.

I wish Vue had better reactivity system. In Solid and React we write less code.

Over complicated as always. Code invented to make something simple difficult great job.

Qwik syntax is garbage. Solid is the only actual threat to React honestly