Hot vs Cold Observable in RxJs (2021)

hi everyone welcome back my name is dmitry mozanski and today we're going to talk about hot and cold observables in rxgs library you were asking me about this topic quite a lot so finally i decided to make this video and small spoiler this topic is not so hard as it might sound so let's get into the details immediately so if you will google for the definition what is hot and cold observable most probably you will find two statements the first one sounds like called observables start to emit values only when we subscribe to them when hot observable emit values always despite we have subscriber or not and the second definition is that cold observables they are unicasted when hot observables are multicasted and both those definitions are true with only one remark that i would say that the first one is proper definition and the second one which is about unicasting and multi-counts casting this is a kind of consequences of the first statement yeah i know it might be not so easy to get it straight away so let's split it to smaller pieces and clarify them one by one and i would suggest you to start with unicasting let's try to figure out what is that so i have a stream very simple one uh i use off operator and then transform it to some random number inside the map operator easy easy we also know that observable by itself they do nothing so in order to start execution of this code we have to create a stream from this observable and how do we create stream we just subscribe to the observable right and such a way we create a subscription so we can console log the value which comes inside this stream and if we save it we can see that they will printed some random number what is also important to keep in mind is that every new subscriber creates separate execution context what i mean by that if we save it we can see that they were printed three different random numbers which means that this piece of code has been executed for every subscribe separately despite we subscribed to the same observable you can think about it like class and class instance we have only one class but we can create as many instances from this class as we want and they can have different life cycles they can have different states they are different yeah but created from one class pretty much the same happens here this is our class those are our class instances and because every subscriber kind of gets its own execution context they are unicasted because they are not sharing this math random every subscribe every stream owns its own math number this is what i mean unicasting and this is behavior of cold observable which is this one this is the cold but why they are unicasted and now we slightly come to the first statement that cold observables starts to emit values only when we subscribe to it so subscribe create the data source this is the key point and to understand it better i would suggest you create our custom operator and let's say it is an operator called from timestamp yeah and operators those are just function which returns some observable observable of number because timestamp it's a number and we have to return new what right observable here we go and every observable takes a function so let's provide a function and this function as an argument gets the subscriber but what is subscriber object subscriber object actually this is what we path as a parameter for our subscribe method this notation is just syntaxes sugar actually it looks like this this is just alternative notation of what we had before so it means that if we want to cast some value into the stream we have to call exactly this next method in order to execute this function and let's do it so we have this object right here so we can call next method and we have to provide some value right and in order to get some value we need some data source and data source can be really anything it could be some http call another promises websocket connection some event listeners whatever but in my case i will just create a constant called timestamp and get the timestamp from the date now method this is my data source and i can provide it right here so we get here the timestamp which will be console locked eventually so i would suggest you to replace our current stream with my new operator and let's remove so far these two save it and let's check this out okay we got the time stamp and now let's try to create another subscriber and we see okay it happens too fast so let's add some delay let's say it will happen after two seconds and all this stuff i have to put into my set timeout callback so now if we save you see that they were emitted another value this is because our data source is created inside the observable this function is being executed every time we subscribe to it so every time we get different time stamp if we want to make our front time step operator hot the only one thing we have to do is to move it outside of our observable this is basically it because we kind of caching this timestamp outside of this function every time new subscriber arrives it will take only cached timestamp and every new subscriber will get the same instance of this constant such a way we achieve multicasting so so this value will be broadcasted to every new subscriber and as a evidence let's try to run our code and you can see that same timestamps arrived to both of these subscribers this despite we subscribed in the different point of time so in order to be more precise we can rephrase our first statement as a for hot observables the data source is being created and activated outside of observable means before we even subscribe to it when cold observables create a data source inside observable at the point when we subscribe to it so this way we achieve unicasting for cold observables and multicasting for hot observables that's the whole magic behind hot and cold observables examples of hot observables those are from event like mouse event click mouse move whatever it happens despite we subscribe to it or not it just happens yeah subjects all subjects behavior subject replace subject simple subject they also hot observables some operators like share share replay publish publish value they make called observables hot observables because under the hood they use subject like share uses subject share replay uses replay subject behind it all right now we figured out what the difference between those two type of observables now the question how this knowledge can help us in our daily job well i will show you an example which very often especially new developers which are starting with rxgs encounter and it is duplication of http calls so imagine that we are doing some http call in our component so i create some posts property and say that they should be get a call to the dosa to some end point and then i want to render them one by one somewhere in the list so i do in g4 and let's save it and okay so complaints okay we have to say that here is going to be any array like this so now i save it i have my list but let's say that somewhere at the top i would like to create i don't know some div which shows how many posts has been fetched and here what i want to do is to subscribe to uh it was a sync and then i just want to read length of this array yeah and if i save it it works fine but if we go to the network we can see that we did posts to time because http get returns called observable and the call to the server will happen every time we subscribe to this observable and a sync pipe does exactly this it subscribes to the observable and because we subscribe two times here and there there will be two http calls so we have to make this observable hot and multicast this fetched value to all subscribers and in order to do this we can use as example share replay operator and if we save it we will see that the result is the same but only one time the post endpoint has been called this is because share replay broadcasted the value we got from this endpoint to this subscriber and this subscriber just simple as that of course you can say that we could use ngif and then cash the posts variable and reuse it into the template sure we could do this but this is just example and good illustration of uh use case for hot observable all right guys thanks for watching until the end i hope you enjoyed this video and if you find it useful please share it with your colleagues it is really the best thing you can do in order to support my channel except buying my courses of course and by the way talking about my courses i have already three of them uh links will be in the video description as well as some coupon codes so check them out it is really worth it and i wish you practical week ahead stay safe and see you in the next video

Channel: Decoded Frontend

Views: 20,393

Keywords: hot vs cold observable rxjs, hot cold observable, hot cold observable rxjs, hot vs cold observable angular, cold vs hot observable, cold and hot observables, rxjs hot vs cold observable, rxjs hot vs cold, rxjs hot and cold observables, angular observable, rxjs, reactive programming

Id: oKqcL-iMITY

Length: 15min 6sec (906 seconds)

Published: Tue Dec 07 2021