import SocialEmbed from "../../../../components/SocialEmbed.astro";


# Introducing the signals_hooks package for Flutter hooks and signals

<SocialEmbed platform="youtube" id="732LqgfYbDQ" />

## Description

Website: https://rodydavis.com
Twitter: @rodydavis
BlueSky: @rodydavis.com
Github: @rodydavis
Patreon: https://www.patreon.com/rodydavis
Buy Me A Coffee: https://www.buymeacoffee.com/3mgFNYd

## Transcript

**0:00** · hi my name is Roy so today I released a new package called signals Hooks and you may be wondering how that might work or how you can use it in your flutter apps so today I'm going to create a quick example on how you normally would work with variables and flutter how we migrate it to signals and how signals hooks can make it even easier when working with the flutter hooks package all right let's get started so first I'm going to go to my flutter idx instance

**0:30** · and I just have a default counter example this example does nothing more than you set State and this is probably something you're very familiar with in fact we can go in here and create this a value Notifier and this should already start to add some ergonomic benefits we can remove the if state

**0:57** · check here and we want to to wrap this one with a value listenable Builder so usually I wrap it with Builder value listenable Builder we're going to do count and we can get out the value

**1:17** · and the child awesome so now when we restart we get a count update as normal so this is already really really cool and offers a unique advantage over set state but let's take it further with signals so let's go ahead to your terminal and do flutter Pub add signals this will update your Pub spec yaml and allow us to import it inside of

**1:48** · um here so we can change this to Signal importing the signal flutter package and everything else stays the same and because signals created after 6.0 are value listables and value notifiers we don't have to change any code which is really cool if we wanted to be uh use more functions out of the modern signals package we can do the new signals mix in

**2:18** · which allows us to change this up a bit and do create signal and we can remove this unneeded Builder since this will automatically get rebuilt every time that we change our

**2:39** · value so here as we expect count increments so I think this is already really cool offers a lot of advantages over just defaults at State uh the more we chain computed the better our performance will get but one thing that has been a challenge when working with signals and flutter is you still want to be able to create reusable logic

**3:02** · with signals and I think this is actually where um hooks is actually going to help so we can go to our terminal and do flutter Pub add flutter Hooks and the new package called signals

**3:22** · hooks so for those that are probably not used to hooks in flutter this hook books is a kind of replacement for State full widget which allows you to bind to the life cycles of disposing en knitting and having logic that's collocated with that

**3:43** · single widget but to be able to be shared across multiple stateful widgets and it's actually really easy to migrate so we can just go in here and call hook widget as our new extension we can go and delete all this

**4:05** · perfect and we going to remove this remove this because now this is going to go inside of the build method U I'm going to use the default um hooks implementation so we're going to do use

**4:26** · State and for the on press call back we're going to do value Plus+ under the hood this is actually a value Notifier which is very similar to what we just talked about and because signals automatically does a two string method that's reactive we have to explicitly declare it here awesome really cool so now how do

**4:54** · we use the new signals hooks package well we can go in here and instead of you State we can do use signal and we can import it and now remove that unnecessary

**5:11** · call and one final time it rebuilds as expected what's really cool about this is we Define this logic inside of our build method and it doesn't matter how many times we call the build method this signal only be called once based on how normal hook are created and we can go in here and do other cool things like count Str Str which is a use computed that we will explicitly call

**5:42** · count value to string and when we grab this we can add it into

**5:57** · here I'm going to rebuild this this is now pulling from the computed value which is then pulling from the The Source signal and we can also even add effects right inside of the build method so we're going to do use signal effect which is different than the use effect in hooks which allows you to react only when specific signals change so we can go in here and do print

**6:27** · count value \[Applause\] and hit save and now in our terminal right here we can see through our log messages if I pull it up there we go it's only being called

**6:51** · one time you don't get the exponentially increasing number of listeners every time that it calls so this makes it really awesome to be able to take this logic put it inside of this build method and then be able to share it with other components not only that you can then share these signals um across multiple places and even create sub classes uh one final thing I will show you is this

**7:16** · new function that I added for defining Global signals and to be able to bind to them they don't have to be Global but um I just wanted to show how this would look like so we can say like save state would be signal

**7:33** · zero and we can swap out instead of use signal we can do use existing signal and instead of a value we can pass in our existing signal this will mean that we can have multiple widgets all bound to the same Source signal and it still works as expected because this will actually update its parent signal so yeah I think that's it for this video uh please let me know if you have any questions and I will try to

**8:02** · respond to them reach out to me on Blue Sky and Twitter as well as GitHub thanks for watching bye