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!
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.
Angular had this for years. If you need in-depth videos on Signals, watch Signals video by Deborah Kurata on YT. It's insane how good she is at explaining any topic.
I am still surprised no one is working or enriching ideas and models like the ones around DVA library. It has had all that and more for a long while, years, way before hooks.
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!👏
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.
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!
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!
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.
Add Legend-State to this list. I think it's the closest to signals of all state libraries. "Observables" are just signals with a different name and .get() -> .value and .set() -> .value =
@@timcodex As a member of the coding community, I have a question for you. Who is taking credit? Is Legend-State taking credit when they say something like, "Legend-State is a super fast and powerful React state library based on Observables. You may have heard a lot about Signals recently - Observables are conceptually similar but more powerful: deep reactive objects that notify listeners whenever anything in them changes." and "Some libraries hack up React internals to make signals and fine-grained reactivity work, which often doesn’t work on all platforms and may break if React internals change." Does it seem like they are taking credit for Signals? Its seems that their claims are that they created a better implementation of them than other state libraries. This is what I want tested and compared.
@@timcodex The state managment of React is bad, this is his worst part. You always have to deal with a useEffect and tons of useMemo when using useState. Signals are not useless at all since it's a cleaner and more straight forward solution. You don't have to think about rerender tree madness of child components.
@@thehelldesk5463 You can use observers or many other methods to get rid of "effect" & "memo". Signals are useless for me, personally. Maybe I am at a level that is not the same as you guys here.
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!
To be honest, almost all store solutions are global. The trick with global solutions is getting rid of unused data over time. That’s something React Query does very well and why it’s my favorite solution.
What's great is that top level declarations aren't global anymore thanks to ES Modules! Each module/file effectively creates a private encapsulation that you can optionally expose in a controlled way through export.
@@traviswatson6527 it’s great indeed, the only “complain” is how to organize it. HMR (at least in vite) expects only one export per component and that would break it. We could build a “signals” file next to where it’s the most obvious, but since you can import everywhere, what should be the strategy, for good colocation and not so complex readability?
@@alanthomasgramont I agree, signals looks like a lot like any other global store solution… but is it though? I use react query everywhere too, but it doesn’t solve a lot of what’s shown in the video.
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!
@@gillall4828 In React, it will trigger a React render of only the hidden component, which is still much faster than rerendering the surrounding component (and running its hooks, etc). It's a ton faster in Preact, but the optimization in the React adapter is still worthwhile.
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
One shortcoming is that in complex apps, it can make debugging harder. React deliberately chose the path of only being able to make updates to data explicitly via a function, which means you can track how data changes flow through your app more easily. This however is a preference, and I'm sure many others would disagree (which is why you have other frameworks). That being said, I prefer Jotai over Preact's signals - it solves most of the rerender/sharing state issues without having to write non-idiomatic React code.
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. If React was a piece of hardware, this is exactly the kind of thing that voids the warranty. We can't help with debugging issues here, and we don't consider them bugs because so much has been meddled with. If you have a repro case that doesn't rely on Preact Signals, we'd like to have a look. Thanks. - Gaearon
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.
@@gabrielmalek7575 this exactly idea of reactivity usage was in Vue2 already in 2016 (implicitly by just declaring variables in data property in options api), and explicit in Vue3 with composition api (ref() and similar functions). Glad to see React find this is more handy in 2023
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
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."
Hey! You have many great contents. And I value what you do. Thank you for that. But doesn’t this approach break the one pillar react stands on? I.e unidirectional data flow? If we pass data to a component up the tree, it makes it incredibly hard to debug and read. One other major thing this goes against is the Command Query separation. Which helps us know if a piece of code changes state or consumes it. And useState, useReducer, redux have by default. Is there anything am not seeing? Please correct me if am wrong.
Still not as fine-grained as Solidjs because of the limitation of the react re-rendering mechanism. The smallest unit of update/re-render is still at the component level, whereas in solid, it can go down to a piece of style or part of the text on an element, since the update is on the browser DOM directly in solid. So with preact-signal for react, the level of granularity depends on how small your component is, so it doesn't offer too much added benefits over other global state management libraries like Redux, Valtio... All the benefits described in the video actually come from the separation of state and component. If you really want to achieve the finest level of granularity, you have to ditch the middle man - virtual dom and the re-rendering mechanism, which basically means, not react. But if you still use react, as least choose one of the global state management libraries and move all your state outside of your component, most of your troubles will go away.
Very helpful. Did not know this exists until now. Been using my own state context, which does pretty much same thing but with reset state, non reactive mode and more :)
I think there are trade-offs for both. I've used signals in large codebases and they can become very hard to debug/untangle once you have complex relationships. I think solid handles this better with explicit setState rather than implicit.
maybe you're right. Although few things come to my mind 1. you've now introduced your own semantics. 2. it's still a hack. Also it becomes non trivial to enforce this new semantic 3. you're going against the grain of the framework (vue) and everything becomes a bit more involved and different 4. it was a large vue codebase and I'm not sure if the migration is worth it for the business @@giladkay3761
@@giladkay3761 yeah, this is just an ergonomic decision. since the signal() and computed() primitives are provided as plain functions, you can just replace them with your own. Or patch Signal.prototype with an `update()` method. Doesn't change anything about the pattern or design.
Looks fun and easy to use, great video! I would love to see an example in a large project. For example managing lots of signals and/or splitting them into different files.
Man, this is way too cool! I feel like this is how things should be. Feels much more intuitive and natural as opposed to the growing complexity of hooks. Especially for newer developers like myself. I'm working on an app right now, and it consistently gets more complex with hooks and passing data, and this will make it soooo much easier. Great demo for Preact Signals! Thanks a lot!
Rendering optimizations With signals we can bypass Virtual DOM rendering and bind signal changes directly to DOM mutations. If you pass a signal into JSX in a text position, it will render as text and automatically update in-place without Virtual DOM diffing: const count = signal(0); function Unoptimized() { // Re-renders the component when `count` changes: return {count.value}; } function Optimized() { // Text automatically updates without re-rendering the component: return {count}; }
@@cyberchadit works in the React adapter too, it just doesn't fully bypass VDOM like Preact does. Instead, it results in a tiny leaf component for the text Signal. Updates only re-render that one tiny component, so they're still much faster than a normal re-render.
Using signals is the best way to have code hard to maintain a very bug prone. You transform pure functions in strange things that depends on mutable variables imported from anywhere in the code. Am I missing smt ?
Great video! thanks! i think this is what the new framework "Solid JS" is all about. it introduces and uses the "createSignal" hook instead of "useState" which eliminates the need to rerender the whole component when a value changes, just all the places it was used! and one more important thing is that using signals in Solid-JS (i'm not sure how it works in the library you were showing) you won't even need state management and store libraries like redux. you can just create a signal outside of a component and use it wherever you need and the data will persist across all of the places it was used with no effort!
Btw: Meteor introduced Tracker which is very similar to signals in 2012. It is always amazing how those concepts get forgotten and then pop up as the next new hot thing…
Wow - this is amazing! I'm currently learning react and got really frustrated with the state management, since it was adding soo much noise and the code flow felt broken into tiny pieces with no clear structure.
This is the best of your videos that I have seen. And Signals seems to solve what I have been looking for. Amazing. Why isn't this how React works from the start? It just solves so many problems React have.
Its nice but it seems to me like a more concise version of Jotai or redux basically without so many rules. I mean as your application grows you want to separate your state from your components more and more as it can get pretty complicated. I see this working but I would personally need some organisation around the signals element otherwise it could get unruly especially in a team of devs. But nice presentation and concept explained well.
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.
I was saying that for ages, nobody in the react community listens. React just doesn't do the right thing, which is to _help_ developers. Instead, it makes the devs suffer for no good reason at all. As usual, there's a "React-twist" in that the template still requires you to dereference the .value manually, whereas Vue is smart enough to know what you need.
@@ziat1988 Basically the whole Vue 3 built-in state is the "signals" stuff. Just search "Vue Reactivity API" and you will find out it has a lot of similar stuff in this video. IMO React has the worst state system across all modern framework, and Vue 3 is currently the best.
@@ziat1988 Yes, in new API you can use function called "ref" with returns and object with property "value". Overwirtting that property changes the state.
This makes me wonder 2 things: - If signals have existed for so long, why have we bothered with state and never really used signals much (enough)? Like, what are the downsides? - Regarding the way it works (and its benefits), it looks similar to basic usage you can have from state managers like Zustand. What major differences are there?
The reactivity of signals is very like Vue (specifically Vue 3 Composition API). I would encourage anyone to try Vue 3. It just makes sense. React is a headache.
I know Vue but still React is awesome bro. There is no community for Vue still. React is leading in future forever..They are upgrading very well step by step. React ❤
Preact signals provide an intuitive interface but may fail in concurrency scenarios like concurrent React or SSR. When making a similar state management system I solved it by enforcing synchronous reads. Jotai solves it by providing a resolver function for derived atoms at the cost of being more verbose.
An incredibly interesting and formative video as usual! It's great to see that, lately more and more React library developers are embracing inspiration and key concepts from other libraries, rather than the usual scenario where other libraries draw from React. The only minor concern with these Preact Signals is that they access React's secret internals and React JSX runtime function. This can sometimes lead to unpredictable behavior in a production environment. I'd be eager to hear your thoughts on this. I've conducted a small experiment with 'signals-for-react,' a package that aims to implement signal-like primitives for React without relying on or overloading the React source code. However, it's a bit more verbose compared to Preact's solution at the same time.
So aside from persisting the state, would signals be a viable replacement for state management libraries like Redux and Zustand? Seems fairly similar in utility.
Pretty cool thanks for exposing me to this Kyle. Amazing it works within react too, making it able to be leveraged inside our existing apps easily. I plan on using this in my high level state for sure.
I'd be interested in peoples thoughts on using Signals vs. Recoil. Are they basically delivering the same functionality? Are there different uses cases for each? What are the pros & cons of each?
I think this's just another approach. We can use different syntaxes (or libraries) but looks like the data flow and rendering logic did not change much. In my opinion, reactive things sometimes can be quite magic, especially in large codebase it will be hard to debug. Signals and React hooks can still exist equally and choosing which one depends on the personality of developer, like choosing framework for your project.
Yeah I agree with you, but signals just made it easier to not care about memoization of components and state and it automatically manages to re-render only those components which use the signal's value. Also sharing signals between components is far far easier as compared to the traditional Context API or even solutions like redux.
True, but I find it's easier to use signals when value is being updated immediately without any state delays. Sometimes in react, there are states delays just because you forgot to put a dep or 2 in a hook. When a problem like this occurs, took ages to debug
I am coming from vue background into react. regardless of whether vue hooks ref(), reactive(), watch(), watchEffect() are actually signals or something similar. When I used react I felt I am heavily constrained by a lot of rules and way to do things, and the re-render everything when something changes. the things I simply and intuitively do with vue, or even solid or qwik or svelte, are very hard to do within react. the problem is in some environments, react is a tabo, and criticizing it is forbidden! this preact signals actually saved the day.
When Kyle adds a new item to a signal at 09:15, I noticed that he spreads the current signal value (making a copy of the array) instead of mutating state directly using the .push() method. In Vue you can do this and it blew my mind when I discovered this because it simplifies thinking about state. You don't have to worry about the React rule where you're not supposed to mutate state. You can simply push an item to an array to update the state and call it a day. So simple.
Hi Kyle, thank you for your content! I see that this library still solves basic state management problems, so my question is why do you think (if you do) this is better than zustand for example that has tools for persistence in box or atom if you need lightweight solution? I’ve started to use them in my work and very satisfied, maybe I missed some point here in this video. Thank you in advance
Dropping bombs on us, Kyle. Love it. I checked out vanilla JS signal patterns and moved on, using context and custom hooks. This pattern looks like a winner.
The problem with these approaches is that the abstract away a lot behind the magic and when something goes wrong it’s REALLY hard to debug if you don’t understand the internals (which are usually pretty complicated). Still, great way of cutting out boilerplate.
Correct. It’s just abstracting out things react can do. If the dev is a SR and is just being quick, great. If the dev is a new student with only this knowledge as the path forward, not great. The real trade off is deciding if adding a moving part is worth it for something you can already (and should) know how to do.
The stunning thing is how convoluted the state and property handling has been in React while libraries like DVA has been available for a long while doing all that but better, cleaner... I guess the react team and USA developers in general are somehow reluctant to get ideas from China...
@@evolutionxbox A lot! My main problem with them is the encouragement of mixing view and app logic. Terrible! But aside from that, the fact that they hide a lot of the reasons for performance issues. I think hooks are in general a bad idea. There might be a couple of uses cases, but hooks are clearly an anti-pattern. I also believe hooks are the result of the lack of proposition for a state handling, that's probably the reason why react has been so polluted since the beginning and the dev team does not catches with ideas like dva(for me, the best way to use react)
I'm glad Preact recommends pulling the singals out to their own files. I would absolutely hate keeping both the components and their states in the same files.
Surprised that people are surprised by reactivity-based stores/variables that behave in a way very similar to mobx/VueEx after them existing for so long Although signals being able to figure out inside which components they're being called/used to trigger their re-renders instead of me having to wrap everything in observer HOC is pretty nice feat!
I wonder as well. Because, correct me if I'm wrong , but really he's kinda comparing apples to oranges, useState isn't global so performance issues will usually appear when you 'prop-drill' your states as seen in the video;
To prevent rerendering of child components I would give few suggestions instead: 1. Do state lift up and wrap with memo those components ( like Sidebar ) which you don`t want to be rerendered ( making them "pure components" ) 2. Use Context or something for state management like Redux, MobX
00:02 Signals make it incredibly easy to use powerful stuff without complex rules and with default performance 01:47 Using signals or state doesn't make a difference in simple applications. 03:16 Signals solve unnecessary renders and provide default performance 04:52 Signals library is powerful and can be used with various JavaScript frameworks including preact. 06:30 Using signals to automatically update code 08:08 Signals provide a way to store and update values, solving the need for useState. 09:47 Signals library provides built-in useEffect functionality. 11:24 Using signals allows for efficient updates to components based on the changing data 12:59 Signals allow easy sharing of information between components and improve testing 14:42 Extracting and passing down signals makes testing and performance gains easier. 16:21 The video talks about signals and how they are better than React hooks. Crafted by Merlin AI.
I think most of what React devs want signals for can be accomplished through react context. That said, whenever I find myself memoizing like every value in my state, I definitely start wishing I could just have a magic portal to shoot important values through.
React context is a shitty way to manage state period, and it's why I never bother with it. Any change you make to where you want to randomly include another components state always results in a rewrite, which is a really unfortunate and time consuming process
Yo that article he linked actually covered this lol: "Another common workaround teams reach for state sharing is to place state into context. This allows short-circuiting rendering by potentially skipping render for components between the context provider and consumers. There is a catch though: only the value passed to the context provider can be updated, and only as a whole. Updating a property on an object exposed via context does not update consumers of that context - granular updates aren’t possible. The available options for dealing with this are to split state into multiple contexts, or over invalidate the context object by cloning it when any of its properties change." That sums it up pretty well. Context becomes a little wack when you use large objects and components only require one or two properties from that object.
Your Halloween demo is amazing. You have "hooked" 🙂 me on Signals. Looks to me Preact is an even preferable alternative, as Signals is natively part of it.
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.
Another option for getting access to states inside other components is to pass the value up as a prop, then update a state inside the parent component that then gets passed down to the other component as a prop
Update: Signals sounds really awesome. Will it work on server components though? Original: I wouldn't put all of the hook logic in the parent component (which you did in the beginning of the video to add count to header). Since you only need count, you just need to add a state variable in the parent to hold the count, then pass the state value to the header component and the setter function to the Todo form component. That would be much cleaner and keeps the main logic still inside the form component, but still communicates the necessary info upwards and outwards.
I believe that you are going to absolutely love Vue if you value the performance and simplicity of signals this much. Would love to see Vue vidoes from you.
This kind of looks like Jotai? I haven't used any state management libraries before but it looks pretty appealing. It gets rid of unnecessary re-renders and prop drilling. I feel like there has to be a catch somewhere though but I'm not sure what it might be. Could it be cleaning up state properly when components unmount?
redux and similar let you use deep objects for state and smart enough to only rerender components that are relevant to the specific sub-property. usecontext typically rerenders too much so have to usememo to skip unwanted rerenders. signals are really only for direct values like strings or numbers of which you might need 100s of instead of a large object
@@im7254 I observed that when using ContextApi, each component which uses this Context (useContext(...)) will rerender no matter if value extracted from this context is being changed, it simply rerenders all components that use this Context if any value is changed and no useMemo, Memo or whatever will stop it. What is the case with redux?
it is backed by FB, Angular messed up hard by rewriting from Angular 2 to Angular 3 and dropping the retrocompatibility Devs lost faith in Angular, and Vue was messier (setup api was a lot more convoluted than React) Years passed and a billion of React developers are available for hire, just a few lurking around that play with Vue or Svelte
Im still a begginer but why doesnt everyone use signals on react? Why to overcomplicate with states and even have perfomance issues sometimes? Im really wondering because i dont understand
In bigger projects, having some structure is very useful for keeping it consistent. It is often better to do things in a way that appears complicated to new developers, because it prevents issues when the project gets large. If not managed properly, signals will create a mess in a large scale application. If you do manage them properly, you probably won't save much effort compared to hooks. That being said, they may have some use cases in simpler projects.
