Signals for front end developersare blowing up on Twitter right now.And you may be asking yourself,what are they?How do they relate to meas a React developerand am I missing out on anything?So what am I gonna do inthis video is we’regonna walk through four different examplesof signals.We’re gonna walk through Solid-JSsignals, Qwik signals,and then two on Reactand by the end you'll understanda little bit more about what signals areand when you should use them.Let's get right into it.What signals arecan be a little bit vague,but from the conversations I am seeing,what most folks referenceas signals are the signalsthat are implemented in Solid-JS.So that's what we're going to start.We're going to build outa solid application and we're going to seehow signals work in that application.And there'stwo fundamental parts of signals in solid.The first is that it is a reactive statemanagement system.It models data in a reactive way.And the second is it's solidinherently does fine grained updates.What we're looking at as we dig in a solidis a good understandingof what reactive state management is.Then as we migrate into React,we'll talk about how signalswork with the VDOMand how that fine grained updating works.So by the end of this will understandboth of those key concepts.Now let's take a look at our exampleapplication.We're going to re-implementthis application in four different ways.This is the Qwik version.It's pretty simple.It has the name of the frameworkat the top.It's got a list of the usersthat we get from an APIthat's going to show us howasynchronous behavior works here.We have a filterand then we can type in to the filterand that will then filter down the resultsset to justwhat is in that filter and that servesas the client side interactivity.And also there will how relationshipsin reactive state management work.Okay, let's go build out the solid startversion of this.So I've got my VS code open to the rootdirectory of the GitHub projectthat is associated with this video.The link to that is in the descriptionright down below.And we're going to startby creating our solid variant directorythat's going to be our solid JS version isI'll go intothat directory and then from there I'mgoing to initialize our Solid Startapplication by doing NPM init solid.Now I've got some options here.I'm going to choose Tailwind CSSbecause it'skind of the lightest of the boilerplates.I'll give it server siderendering and TypeScript,and then from here I'll do an npm installand then we'll fire it up.All right. Looks pretty good.And some basic functionality in there.Let's go take a lookat what the files look like.So we have a source directory.The first thing going to dois hack on some cc's,so I'm just going to remove the tail endand then put in some very simple accessthat just makes thingslarge, has padding on it.Let's go take a look at what that did.Yep. Cleaned that up.Now I’ll go and clean upthe root template.I want to get rid of the about and homeand just have the basic page.So I'll go over to the root.tsxand get rid of this navbar. Say yhis is our solid variantand then get rid of a bunch of this.Okay, let's take a look.Yep. Nice. Super clean.Good starting point.So now let's go over to our index route.All right, This is our index route.Solid start is a lot like NextJS.Yes, but basically for solid, solid start.All right, let's go and trim this down,and then I will put an H1 in there.Just say this is the solid variant,and I'll get rid of everything else.Cool. A good starting point.Now, let's start off building a page,kind of from the top to the bottom.The next thing alongthe line is our filter input.So we need a way to track the stateof that filter input.To do that, I'm going to use createSignal.Gonna bring that in from SolidJS andthis signal I'm going to define globally.You can do that in solid,you can define signals wherever you wantto, and that's really nice.So I'm going to put thefilter right at the top hereand I'm goingto initialize that filterto just an empty string.And then down in our return,I'm going to add our input.Now the trick here is thatI don't just say filter, I call filter.And what that does is it subscribesthis componentand this particularinput to the value of filter.This is actually where the fine grainedupdating comes in.When filter changes solid is goingto change Just the value on this input.That is how precise.That's why they call itfine grained updating.And then we have an oninput the equivalent in React of on changewhere we call set filter.So how do we know if it's working?Well, it's just bringing a divthat shows the current filter value.All right, let's take a look.So pretty easy now.The next thing we need to dois we need to call this ReqRes API.This is just a free APIthat you can get users from.So we're just going to call the list userfunction.That's going to give us backa big response that has some data in it.That data is going to havea bunch of usersand we're going to usethat as our data source.So much like NextJShas a getServerSideProps,Solid Start has a routeData functionthat you can export,and that routeData is the one that doesany asynchronous requeststhat you need to goget your data for your route.So let's go and implement on that.Now, within our routeData,we need to make an asynchronous request.And the way that you model datafrom an asynchronousrequest in solidis that you use a resource.So we're going to bring in create resourceand we're going to call create resourceto create a resource within our route datathat is first going to goand await the fetch of our ReqRes dot indot API users route And that's goingto give us back a response from that.We need the JSON, which will also await.And then from that response payload,we're going to get the data part of thatand that's going to give us our users,which will then return.But of course this is TypeScript,so we do want it to be strongly typed.So let's go and specify a definitionof what we're going to get back.In this case,we're going to get back user data.And so we can say that this resourceis basically just an array of user data.Okay.So nowwe have our route data with our users.Now how do we get it into our homecomponent?We’ll to do that we need to use a hook.And that hook is useRouteData.And you can call useRouteDatawithin your componentto go and get the list of users.And the nice thing hereis that you have some strong typing.So now if we do Cmd+K Cmd+Iwe can see that users is a resourcethat has an array of those user data.Now we want to display those users,but we should have a componentthat does a nice job with that.So let's bring in a componentcalled user that we give it a userand it goes and puts out a devfirst name, last name and email.So now we have our list of usersand we have our user component.We need to go and then iterate overthose users and put them on the screen.And the way that we do that in solidis we use a For.Let's bring that in.So it's not like React,you don't have map, you have this forand with that you canthen iterate through users.You can even give it a fallbackwhen it's loadingand then you give it a functionas the children and that functiongets called back with the valueand then you do whatever you want with it.In this case, we're going to goand build out that user component.So let's try this out.Okay. Looking pretty good.We have our user list from our resource.We've got our filter that we can change.Now weneed togo and create a list of filtered usersand that filter users list would depend onboth the filter and also the users.So how do we do that in Solid?Well, let's go back into our code.So to do that,we are going to create a memo.And the memo is just another typeof signal.It's a computed signaland it depends on other signals.So we can also create that anywherewe want.In this case,we have the users data here in home.We have the filter data as a global.So actually the most convenient placefor would probably beright here inside of home.So we'll call create memo.It'll take a functionkind of like useMemo in React.You're going to take the usersand then filter them based on the filter.Okay, pretty cool.So let's go and take thatthen filter users that we gotand replace user to that hit save.And now over here,perfect. Awesome.And this is reactive state management.Let's go take a look at the code again.We've got signal for the base typeslike just filter in this casewe've got a resource for asynchronous dataand we have create memowhich allows us to compute databased on existing signals.And when any of those signals change, itautomatically changes for us,which is just super cool and easy.Now if you're looking at this and you'resaying, well, a lot of these names seemvery similarto useState and useMemo in React.That's true.When you think about it React actually hasa reactive state management systembuilt right into it.The only problem isthat it's got dependency arraysand that makes it a little bithard to use.Solid JS doesn'thave those dependency arrays by calling.In this case, for example, filter,we are subscribing this create memoto that filter.And by calling usershere, we're automatically subscribingthat memo to users.So it automatically subscribes to both.And when either change,it changes automatically.And that'sbasically thecore concept of reactive state management.So yes, React has reactivestate management built into it.It's just not as clearand nice as this signals based version.And you know what?That does it for Solid.Let's go take a look overhow Qwik does it.So we'll go over to our Qwik directoryand jump in there.So Qwil has Qwik city,which is kind of the equivalentof solid and solidstart and react and NextJS.Yes, all of these frameworkshave effectivelythe meta framework of somethingthat goes and manages routesand does all of that for youso that you can concentrate onjust writing particular pages and lettingthe framework handle all the routes.In Qwik World that's Qwik City and theroutes are in the src routes directory.Let's go take a look at index.tsand we can seehow this exact example works in Qwik.So we'll start off with our interfacefor user data.That's exactly the same as we had inSolid Start.We've got a user componentthat is the display componentequivalent that we had in solid start, andthen we have our base component itself.This is like the app component.Now in there, we're going to use a storeto manageour filter that comes back as store.And the nice thing about a store inthis case is that you can just referencethat value, say store.filterand then set that value.It's a lot like MobX in that way.All you need to do is just get valuesand set values.And by getting a value and settinga value, you automatically subscribe.Now, one of the interesting thingsyou'll see in Qwik is this dollar syntax.So anywhere where it's going to bealso running on the client,you're going to have a dollar.So in this case, on input is a client sideevent handler.So it's going to have that dollar on it.And when we get a new value for thatfilter, we're going to just dostore.filter and set the filter.To display the filter all we have to dois just reference that filter.And then we got our filtered users.Well, where does that come from?Well that comes from again,that combination of filter and users.So let's start with users.Where does that come from?Well, users in this case is a signaland we type that to be a set of user dataand then we use a taskto populate that data.And in this case,that task is going to call the fetchon that API users that we have beforeit's going to get back that JSON.And then it's going to set that valueto that JSON data.Here's where Qwik is actually really cool.This task actually happens100% on the serverand then it takes the dataand it packages it up for the client.Now in the React world,they call that hydration.In the Qwik world,they call it resumeability.And the notion is that the server stopsprocessingat some point wherein it's got the usersand it's got the filtered usersand it's got the initial pageand it basically just pauses in timeand then Qwik handlesresuming with no delaythat state on the clientand it's pretty cool.And it's definitely quick,a lot quicker than react hydration.To kind of wrap this up filtered usersis also a signal also a user data array.And we're also going to use a taskto populate that.Now this task gets given a track functionand that track functionis effectivelywhat amounts to a dependency array.You can call that trackfunction and say, Hey, whenever you thinkthings might be changing, call me andI will let you know if they changed.In this case.That is when the either the user valuesdata changes or the store filter changes.I'm not sure if this is quitethe right way to do that in this case.Somebody can let me know in the commentsif this is the right way to usetrack on this.I'm not sure.But whatever it seems to work,which is a good starting point.So whenever those change,then the filter users value has to change.And then we do our filter.There's really nothingall that exciting about it.We're just setting filtered user valuethat then goes down to our map.You don't have that for concept in Qwik.You do have that kind of react mapconcept, so it's pretty similar that way.And there you go.So let me give you my $0.02 on this.I think that there is a good modelof reactive state management here.I do think this track is a bit clunky.It reminds me of dependencyarrays and dependency arrays in Reactare where we get in trouble.So I would muchrather us have a way where I could justby accessing store.filter or users.value,we automatically get subscribedjust the way that we do in solid.That would be really a nice upgrade here.But otherwiseI think this is a really good takeon reactive state managementand it also does that fine grainedupdating, that solid does,which brings us to fine grained updating.So if you don't know what that is,let's go build out a little react outso I can show you.So I'll close this outand I'll bring up a terminal.And I'm gonna go back up a directoryand I'm just going to use Viteto create a very simple React application.I'll call it fine-grained.Not going to use TypeScript.Doesn't really need it.I’ll install it and I'll run it.And there we go.We've got our Vite React application.What I want to do is I want to implementjust the top of this,just the filter,and then I'll show you how that works.First with more traditional reactusing useState and then a useRef variantthat kind of simulates what finegrained updating would look like.Okay, so let's just pair this downand instead of count it’s gonna be filterand instead of a zero, it'sgoing to be an empty string.We'll get rid of App, We'll go tweakthe CSS to look similar.Okay, that's good starting point.Now let's go and add in that inputand then we'll go and addin that filterthat shows us what the filter value is.Okay, let's check it out.Perfect. Right.React 101.Let's track some state.It’s the whole point!Now, what's actually happening herebecause to understandfine grained updating.We need to understand a little bit moreabout how react normally works.Well, what's happening is when I callset filter, that's changing the statethat's attached to the componentand the core concept of Reactis I'm going to take stateand I'm going to turn it into HTML.When the state changes,I need to rerun that componentto re-render that component,and then that will createnew VDOM elements which will thenget diffed the older VDOM elements.And what has changedwill then be updated in the DOM.And in this casewhat that means is we will change the VDOMso that the inner text of this divis going to be differentand then we will go and push that VDOMchange of the inner textthat now has a different filtervalue in it to the DOM.So to see this actually happen,let's go over to our arc againand then go into the inspectorand go over to componentsand I'll make surethat the highlight updateswhen the component render is on.Now as I type,we can see that everything is highlightingbecause the whole componentis getting re rendered.You wouldn't see thatin solid because solid doesn't do that.So it just goes literally in and changesthat inner text.Of course,trying to demonstrate that using Reactdev tools really isn't going to work.So you just kind of have to take iton faith that that's actually happening.Let's go and imitatewhat Solid is doing in our react app.So the first thing we need to dois avoid the re render.To do that,we need to use a different way to storethe state of filter than using useState.Now what’s a way to store state thatdoesn't force an update of the UI; useRef.So we're going to change our useStateto useRef.The initial value remains the same,but in this case we just get back a filterwhich is an objectthat has a current value on itand thatwould be the current value of that string.And then we're going to setthat current value to the new target valueand then show it.Okay, let's try this out.So now we don't get any updates.Yeah, no,but we've broken the functionality.It doesn't actually workbecause when we set current on a useRef,it doesn't forcean update of our component.So now we've got to manually go do that.So to do that we need a ref to this div,we'll call that the displayfilter ref and we'll create it up here.And now in addition to settingthat current, we are also going to setthe text contentof that display filter refto a new version of that filter.And notice, I mean, we actually haveto keep the formatting and everything.It's apain, but let's see, let's try it outand see if it worksand it kind of works.So what's actually happening there?Well, what's happeningthere is we have a controlled component.That's because we've set value,react thinks thatthat is now a controlled component.So we need to get rid of this value.And now it works just fine.But you can notice if we have ourhighlight updates when component render,we don't actually see anything happenwhen this happens.So that is the core concept of finegrained updating.You have some data in this case filterand you want to attach it directlyto specific DOM elements on the page.Now I will saysolid is a lot more than this.Solid will go and re-render componentsand everything else.But when it comes to react and how it doesfine grained rendering,when folks have hacked in,fine grained rendering,it's mostly around things like this.You're going to change an individual prop,you're going to changean individual piece of inner textor something like that.It's not like solid where you cantake that signal and connect it to a Forand get a whole bunch of componentsand map the whole state and all that.It is really in the React case,when folks hack in signals specificallyaround these very small updates likechanging inner text or changing a prop.So let's go take a look attwo different ways that folks are doingsignals in the React context.And the first one of those is the PreactSignals React Library.So it's a library from the Preact folksthat works with React to implementsignals.Now, there's actually four differentlibraries in this set of libraries.There's a signals core that managesthe reactive state management system.Then there is a signals preactto the works for preact, a signalsreact that works a react,and another one that works for Svelte.So in our case, in the codethat is available to youin GitHub for free, in the linkin the description down below,the version usesReact and also signals react.So what we're looking atis the preact version and this againit’s the preact library,but it is a React version.So we have two new functions we’rebringing in from signals react.They might start to seem familiar to you.One is signal that's going to createan atomic piece of data,and then the second is the computed.So in this case,our filter is going to be a signalthat starts with an empty string.Our users is going to be a signalthat starts with an empty arrayand our filtered users is going to usethat computed to thenconnect the users to that filter.And again,this is doing that really nice solidJS style of signals whereI don't have to tell it what I'm tracking,the fact that I useit is what connects me to the track.So in this case I use users that value.Therefore I am subscribed to it,I use filter.valueand therefore I’m subscribed to it.Now to populate the data,I just have a module levelfetch that just goes off and gets the dataand when it's done, it sets theusers value.The usercomponent is just a standardReact user component.And then we have our preact signalswhere we have our input.And then instead of calling a setterin this case, we just set that valueand then we reflect the value down here.Now what's really cool about thisparticular implementation of signals is ityou can use it to do larger updates,like in this caseuse filtered usersto build out a bunch of user components.But the reason that it works is becauseit doesn't do fine grained updates.So let's go bring this up in the browserand I'll show you what's going on here.All right.Now, before I start it up,I am going to use a different command.I’m gonna use the start command.That's because this is a Create React appapplication, not a Vite applicationlike the other applications.Why is it a create React up application?Well, this doesn't work with Vite,and the reasonthat it doesn't work with Viteis that they're doing some shenanigansto patch the JSX runtimeto make this work.So let's go take a look at it firstand then we can dig into that.Okay, so let's try it out.All right, That seems to work fine.Now let's go and do our inspector.Go into our componentsand see what is happening.Yeah.So everything is re rendering.So this is basically a stock react appwith the re render cyclejust normally re rendered.Not fine grained updating,but you get the reactive statement.Right. Awesome.So how does that work?Well, again,they are using some JSX runtime magicto connect the filter valueand subscribe automatically as you’reusing it to the componentthat actually uses it.And then whenever that changes,they're just forcing a naturalre render of the React component.So this is giving us half the equation.It's giving usthe reactive state management.Can we get the reactive state managementand the fine grained updating in React?Yes we can.It's in Jotai signals.So take a look at that.So this isin the Jotai version againavailable to you in GitHub.Let's go into our App.jsx.If you're not familiar with Jotai.Jotai is a re-implementation of Recoil.If you’re not familiar with Recoil,Recoil is an atomic based state manageroriginally from Meta.I think it's still from Meta.The idea is that you modelall of the pieces of statein your applicationas atoms and atoms can connectto other atoms and derive new atoms.And that's what we've got here.We've got the filter atomthat starts off as a string and we’vegot the users atom,which is in this case an async atom.It automatically goes and gets our APIusers and returns that data.And then we have our filtered user atom,which goes and connectsthose two atoms, the filter atomand the value of the users atom.And then it does our filter.And just like the otherreactive state management systems,any time you change any part of that,you change the filteror you change the users that filter usersatom will automatically update.Cool.We have the reactive state managementpart of the signals paradigm.Can we also get to the fine grainedupdates?Well, actually in this casewe use both a combinationof basic react re rendersand also fine grained updating.The basic react renders come from useAtom,which is a hook that allows youto connect to an atom and bring thatinto the React ecosystem as state.And then we have $, which is what allowsyou to do the fine grained updating.Now, to make all this work,you have to use this JSX import sourceand connect it to Jotai signal.And that's what's going to do a little bitof and that's where Jotai takes overand layers on top of the basic reactrender cycle,this additional fine grained updatingwhen you use it.So it supports this $ down here.Okay, let's go take a look in our code.So the where you see the $ in this case isyou see thatin the value of the input atomand also this filter component down herewhere we use $and we just get the filter value.So if we bring this up,we should see that the filter linedoesn't get a component updatewhen we change it.Let's take a look.Okay, looks good.Let's now change it. Nice.So everything's updating properly.Now let's go over here to our inspectorso we can see that we aren't getting reactrender updates on eitherthe input or on the filter.Nice.The only other thing to look atis our data display down here.That'swhat's actually showing the list of usersthat's wrapped in suspensebecause the underlying atomthat it's talking to, the filtered useratom is an asynchronous atom.So let's go back over here,take a look at data display,and we are using that atomand getting the users out of it.And then we're doing a normal reactrender to get our data.Okay.So I hope looking at these four differentvariationsof signals, both in the React contextas well as a solid and the Qwik contextgives you a little bit more insightinto what signals are,why folks are so interested in them,how they impactour application architecturesand the options you currently have today.In terms of signals in our apps.I will say that there has been some talkfrom the crack team about supportingsignals directly in React,also about a React compiler.Of course that doesn't exist today,so there's not a lot to talk about.Of course you like this video.Be sure to hit that like button.If you really like the video,be sure to hit the subscribebutton and click on that belland be notified the next time a newBlue Collar Coder comes out.
