Signals In React Will BLOW Your Mind 🤯
HTML-код
- Опубликовано: 12 сен 2022
- Let's talk about signals - the new feature in town for Preact and React.js. Let's also explore what is Preact and how to use it in React. Demo link: codedamn.com/playground/mj3ti...
If you've watched this video till the end, drop a comment below and let us know! 💜
⚛️ Do you want to become a full-stack web developer? Check out codedamn's full-stack learning path: cdm.sh/fullstack
⚛️ Get started with web3 and decentralized technologies today: cdm.sh/web3
👉 Checkout codedamn on social:
✨ Instagram: cdm.sh/ig
✨ Twitter: cdm.sh/twt
✨ Discord community: cdm.sh/discord
✨ Facebook: cdm.sh/fb
GitHub: cdm.sh/github
If you found the video valuable, please leave a like and subscribe ❤️ It helps the channel grow and helps me pumping out more such content.
✨ Video Tags ✨
What is Signal in React.js?
What is Preact?
How To Use Preact in React?
Signals in React: EXPLAINED
Latest Features in React: Learn NOW
✨ Hashtags ✨
#programming #2022 #technology #reactjs #coding
Let's talk about signals - the new feature in town for Preact and React.js. Let's also explore what is Preact and how to use it in React.
If you've watched this video till the end, drop a comment below and let us know! 💜
i was assuming singal won't cause the re-rendering of the component itself. its not awesome state will works the same.
This takes away the mental overhead of working with hooks. Looks similar to composable functions in Vue
The state tree is usually much shallower than the component tree. Hence the “components hold state” model has limitations. I like this new paradigm of separating the component tree from the state tree, and making stateful components subscribe to the state instead of containing it.
Well said
Yea, the old MVVM pattern.
React js is a shame and blasphemy to JavaScript community. Governments should ban the use of this stupid library. Same functionalities can be achieved with Angular and Svelte with less frustration, so what's the point of using the stupid react js which makes web development unnecessarily complicated.? Those who use react are slaves.
Guys may i plz know where did u gather this knowledge from regarding the component tree and state tree ?
@@Almighty_Flat_Earth Preact + signals basically fixes every single issue with react, and signals give the same fine grained reactivity and speed as Svelte stores without requiring a compiler, just a tiny library, while still maintaining runtime flexibility instead of needing to know the layout at compile time.
My issue with Svelte and Angular is that their build steps are horrible, and using them is basically asking for legacy issues once the project is five years old. While using a framework which is just a small js library mostly circumvents that problem.
This make me want to look at SolidJs more and more because they have this kind of idea working for them.
Yes. I can highly recommend. Solid is awesome. Preact/signals is cool, but never ever having to worry about re-renders or weird stale states like w solid is just awesome. In the end u just don't need that v-dom if u also have reactivity
Switch from React to Solid recently for my startup & it's been great so far. Solid has solved so many state issues that's plagued React for years. With Solid you don't need a state-manager & Solid has some extremely good docs
Signals is the thing i was looking for..maintains state all along without much implementation and dont have to store all the props of page( redux) .
I love the idea of taking state out of the funtional component and centralizing it. But, it sounds eerily similar to valtio and Zustand. Or they are different?
I watched this video till the end. I am subscribed and have the notification bell turned on! Thank you!
I watched this video to the end. Good stuff!
So cool how they made it available to use with react. Preact is in a weird position of being react-compat so being stuck a bit within those limitations, but this move of innovating and bringing that innovation to react is a really smart move. Those granular dom updates are very smart and makes it set itself apart from other reactive state management libraries for react.
How would you maintain the state of the variable and keep tract of the changes when the value can be changed from anywhere? There would be an overhead of keeping track of the changes from different components.
Inspired by Solidjs
Not inspired, it's a direct copy
And Vue.
@@ashutoshgarg9126 naa that's just not true. If anything it's kinda weird they didn't steal it more. Maybe it's to make the distinction between signals and state, idk.
@@bigmistqke anyway it would be a challenge to integrate signal with existing react code base
More like fanboy artwork. Have u seen the code? It's so **umm**
This sounds exactly like what Valtio state management library does.
We had this in MobX years ago! Wrap some state with `observable` and wrap your component with `observer` and state just works. Preact signals have the benefit of not needing to wrap your component which is nice.
Depends on how you see it; it patches React internals to achieve this, which is questionable at best and at worst will break your app if you update React to a version which changes the internal implementation. It also means it breaks backwards compatibility, so you have to use React at specific version ranges and cross your fingers it doesn't break in the future.
MobX was definitely one of the main inspirations. Was a heavy MobX user back in the day and I always liked the consistency of their reactive system. With Signals we wanted to build something that feels less object-oriented and forgoes the wrapper function like you said.
@@marvin_hg I don't understand why mobx uses classes in their docs. It's perfectly usable with only the observable fn and the observer hoc. Do signals have other goodies like autorun, reactions, when, computed etc?
@@MateoHrastnik Yep, MobX can be used without classes too but then you have to ask yourself why people don't use it that way? The innovation with signals isn't the reactive layer itself, although the one in signals it's pretty nice. The innovation is the developer ergonomics they enable. Dropping the need for a wrapper observable fn is a big deal for lots of devs.
@@marvin_hg have you seen Legend State. What are your thoughts on it. It looks similar to signals.
why not we use valtio which also works on concurrent mode?
SolidJS says hi lol
Jokes aside even if you can use Preact's signals with React, components in React still can get run more than once.
That doesn't happen for SolidJS components though :)
FINALLY. I forgot this channels name and I couldn’t find it. Happy to see your content again. Stupid algorithm 😂
Is it like react's Context but without the re-rendering every subscriber problem?
whats the downsides then?
im using rtk cause of the problem above and searching for much simpler option, is it safe much?
I watched this video till end !
I personally like Jotai for these type of client or local side state management but this takes away the overhead completely. Very interesting
will react replace hooks with signals or have both eventually?
this is just like zustand, im already using it in my project and it provide a lot more tools that signals
Oh bro, this literally blew my mind! #AmazingWork.
is this similar to observables in Rx JS ?
Im not sure whats happening but using .value ex `{varSignal.value}` is not rendering, if I remove it it renders. And seems to be an issue when using boolean. Im using react 18 by the way.
Nice. Thanks for sharing.
Is it similar to state management in sveltekit?
Great Content, Subscribed and Liked.
can you conditionally render using signals?
This can be very promising!
How would this be better tan lets say zustand or jotai?
Wow. So cool feature. I am not fan of redux. So this new alternative feature made me happy...
I didn't get it, didn't we already have this with Jotai.
I thought maybe it only re-render the component that use it, but it actually re-render the whole component
Note that it doesn't hook _into_ React but patches React internal APIs in order to work. Even on the Preact side it overrides `shouldComponentUpdate` implementation to memoize every component that uses signals, and doesn't call the original `shouldComponentUpdate`, which means that it breaks other libraries that also patches `shouldComponentUpdate`.
I'll stick with jotai for simple atomic global state :)
Can u plz explain in a simpler language ? I m actually new to reactJs
@@RudraSingh-pb5ls It means that the library relies on how React works internally and override some functionality in order to work the way it does.
If React changes these internals, the library will not work until it has been updated; if the library happens to not be supported in the future for one reason or another, it is no longer usable if you decide to update React.
You trade off usability for maintenance burden, unlike most other solutions that were made a long time ago, which still work. It's not as clear cut, but that is the gist of it.
@@dealloc On the other hand, if you end up using preact entirely instead of react, preact will always be supported by preact signals. Which also has the benefit of reducing bundle size and being able to hold the entire internal implementation of the framework in your head.
Is this different than zustand? Or how is it
Yeah coming back to MVC gradually, Like SSR. Not at all surprised.
How about recoil? build by facebook, same idea of taking states out of component. you just need to define atom() in some file and in the component replace useState to useRecoilState(atom), then your state will be global, and you can also useRecoilState(atom) in many other components, if you trigger setter in one component, then all components using the same atom will rerender.
I know the difference is that, recoil is an use-hooks, which usage is restricted by lots of hooks rule while preact-signal can be used more freely. Is there any other benefit that preact-signals brought?
It is essentially a concept taken from Vue 3. Vue 3 framework has been way ahead of its time.
Wow, amazing 👍
What is the difference from recoil?
Awesome ❤
Great, Preact and React are getting Solid..........js
And Solid.js is getting more Vue 3
@@user-ie1xg3he4t solid start you mean
cana we use it with react native
I guess recoil also solves the same problem. I'm not sure though please someone confirm
Does it work with react native?
It's amazing
Can i use those signals in react/next
If that is the case, why not use Ref instead. Changing refs dpes not trigger a re-render too. So how is this any different. Can you explain or am I missing something?
Changing a ref wouldn't update the content as well.
So... basically the same thing as Valtio?
how is this different from rxjs observable
Yayyy.... React found a way to fix another issue that it should not have in the first place. React is so good!
will it be possible to send large props from one page to another in next js using signals bro ?
How difficult would it be if my signal store becomes huge. Now to change a particular key which is deeply nested I need to go through many levels inside the object tree which is time consuming.. Your thoughts!!!
Maybe just keep the signal store small will help. And have a lot of small signal stores.
Just create multiple stores
Yep, just create as many stores as you need.
Also, just write your own setter functions if that makes your life easier.
Recoil seems more mature and more scenarios well thought out. But also idk what its future is. I hav3 loved recoil thus far and its design looks to handle deep trees very well
So basically its same as zustand ?
Isn't this availble through redux stores already. any component that is getting state(property) from the store will rerender if the store state(property) got updated.
a lot of boiler plate....
@@MCJini Try zustand, jotai or valtio. All of them are very minimal, they all use the selector pattern to avoid re-rendering the whole tree and are compatible with SSR.
Zustand - immutable state
Valtio - mutable state
Jotai - atomic state
I watched this video till the end
🔥
Basically, they bring Vue and Svelte way to deal with states to React, this is the same as in Vue 3 and a liite bit different from Svelte, but it is good as all of them, no way to use React Hooks again
Looks a lot like Apollo reactive variables
there is also a pub-sub pattern in js
Have u tried in Next JS?
Cannot find the playground link that you said will be mentioned in description or comments 😅
Added to the description. Thanks :)
@@codedamn Thankyou
Looks like store in Svelte
Can it replace Redux?
Isn't this exactly what Jotai is doing with atoms?
i think it is worth if you don't use routing other wise go with redux .
Doesn't valtio do the same thing?
Signal feels like MobX state management library
I had this same comment with a maintainer :D Similar observer pattern the difference is the "lazy" concept of when something subscribes to the updates so there's less memory overhead
Now this seems to be messy at scale. In a big application, any component could be updating this signal, how would someone debug which component is causing the bug?
In the wild, I would likely write up some functions to help with state updates for tracking purposes if you really need that. Otherwise if your app is small, don't bother and save the boilerplate.
I've done this sort of thing with Svelte and loved it.
I don't need a library to "force" me into writing code a certain way, I'm happier using a more primitive approach like this so I can adapt to whatever situation I'm coding for. I've seen Redux and Vuex just make giant messes by trying to force devs into doing things their way to achieve what you seem to be talking about, often ending up with a solution I didn't want but just kind of lived with.
This simple approach is my kind of thing.
Zustand is very similar to this.
So basically zustand. But it's cool that we have more options.
I don't understand what is problem to share state via context in React?
This is not really a good pattern to set value from anywhere. This is not looking scalable. Imagine if the value is getting set from multiple places , the maintaining large projects with signals will be difficult I feel. React can introduce signals, but they want to have single setter for any state updates, so that it becomes easier to track from where the setter actually getting invoked.
In which way would preact/signals be different then another state manager? They all share that same 'issue', no?
Welcome to a new source of headache in your projects, global variables!
it look like vue composition api
its almost same as atom in jotai
Solidjs inspired Preact.
Rxjs says Hi..!
it's look like Zustand 🤔
I think you missed the point dude. Context also doesn't re renders in the case you gave. The big win is with DX.
Its almost like having an object doing a method call to another object.
Apart from the .x language and the reactive design pattern React never brought anything new to the table and will never will. Those 2 things are very powerful, but beyond that, nothing related to React will ever blow the mind of any programmer or application architect.
isnt it stole from solid?
Just use Zustand
Sounds like Valtio
Isn't it something just like Jotai/ recoil?
Its copy paste of Valtio. We’ve had this supported for many years already. Its not new
its like jotai, i would use jotai instead.
This is like valtio but better
What a crap web community is. Few years back everyone was loosing their minds that we have so many plugins and options to choose from in javascript eco system. In 2022, everyone is losing their minds by signals after web kids finally realize, that hey, maybe observable is the right thing we need so our apps be more performant and flexible. RxJS is solving that from the beginning, and OS event system scalability is based on this stupid thing about reacting on events for ages.
Lol, this is standard in Vue and Svelte
Hi there. Perhaps I'm a bit zealous, but your demo link seems to be broken..
My bad. I had to first create an account. Now I can view your demo.. sorry for the misunderstanding
such a shame how cool angular could have been if many were using it, all these were possible in angular long time ago,
Are you talking about the output event emitter?
WTF dude global stores like Redux does the same thing it re-renders that components that is subscribed to that store / state. And in the begining of the video you are talking that this does not re-render when you clearly shown it does
Well, if you use it directly in the JSX without calling them it creates a pseudo-component around them, so then it does not re-render the parent-component but only that pseudo-component.
It's time to kick React. Now Svelte is the front end king in any side.
Solid*
Lol.. Keep dreaming.
@@WyvernDrexx nah.. its not dream. If you don't like svelte just skip it and avoid this. Who told you to comment here.
Jotai ???
This is the same as reactive variables from Apollo. Nothing new
Svelte and vue already do it in much nicer way... React is just like apple, they think they have achieved something nobody ever thought of but its already there and implemented in much much much nicer way... lol
SveLtE and Vue aLrEady dO it in mUcH NicEr wAY... ReAct iS Just Like aPpLE, tHeY tHiNk tHEy hAvE aChieVed sOmEtHIng NoBody EvER thOugHt oF But ItS aLreAdy TherE and iMpleMEnTEd in mUch MuCh muCh nIcER wAy...
What is Vue's implementation for this?
Having used Vue quite a bit before, I haven't quite seen this feature in it, and the closest things I can think of like this are far from nicer or easier to use. Sorry, my experience with Vue, at large scale anyway, has shown me just how messy and difficult it can be to use, not just for me but for every team I've seen use it. So far Vue is the only technology I have specifically requested I not be given at work.
Svelte on the other hand, yes they already have this sort of thing and yes it's implemented quite well and seems easier to use. I wish I could use Svelte at my job.
To me, this is a nod to Solid js, which has not only the same concept but also calls them signals.
Vue has the nice reactivity part, but not the "avoid rerendering" part. There are a couple of microframeworks achieving similar speed with vue's reactivity module but without vue's vdom implementation, and using JSX instead of Vue templates.
Isn't this same like Jotai? Jotai is better imo
one difference is you have to use hook to use state to the component and this is not required any hook. And I love Jotai.
@@ridoyhossain4701 Yeah I am gonna use Jotai till Signal is stable enough
@@ridoyhossain4701 use zustand then no need to use use* if you want to pass to function
just like vue :)
This is just a worse version of recoil or jotai
that is kind of stealing from solid js in my opinion ....
That is how the tech world is all about. You are learning from others and then improving your own product.
I really like they called it signals and made that obvious homage to solid. I find it kind of funny they decided to go for this API choice (it's Vue right, always forget which one is the reactive/vdom one) instead of the more react-idiomatic setter/getter-tuple, but maybe it was their way of giving credit to the other reactive/vdom combo.
It's just crazy that there is no first-class state management solution for react (sorry, but local state, prop drilling and context really is really not enough), so it makes sense preact made one themselves. The whole granular-trick w creating this pseudo-component if you do not call the signal-function in your JSX (dunno if that also works in react? Didn't finish the video yet) is really cool I think, and afaik really an innovation on their part.
So ye, innovation inspiring other innovation. And if you like preact/signals, you are gonna love solid. At some point you just wanna get rid of that v-dom i think.
its all open source software anyway so It's not like its a bad thing right?
@@night23412 creator of faker js thought otherwise 😂
This is stealing from Valtio. We’ve had this functionality for years already
thank you so much. redux sucks