How to use RxJS with React Hooks

00:00

however now the going team here and

00:02

today I want to talk about how to use

00:04

rxjs together with react hooks this

00:08

video assumes that you are familiar with

00:10

react and feel at home with react hooks

00:12

so let's start by talking about what is

00:14

rxjs and observables rxjs is a reactive

00:18

extensions library for JavaScript as it

00:20

says on the website and it's essentially

00:22

a library for reactive programming using

00:24

observables if you are not familiar with

00:27

all of those concepts don't worry we're

00:28

gonna go over them in a minute now let's

00:32

start by talking about what is

00:33

observables observables is basically an

00:36

idea of an in vocable collection of

00:39

future values of events I like to think

00:42

about it this way so you have a promise

00:43

and promise can only resolve one time

00:46

right so it can either be a rejection or

00:48

fulfillment but it will only resolve

00:51

once while observable have an option of

00:54

actually sending more than one value or

00:57

event over time and this is essentially

00:59

what you have to know about observables

01:01

right the cool thing is that observables

01:04

are actually in process of getting

01:05

standardized into ACMA scripts there's

01:07

been some problems with the proposal and

01:10

it's still stuck on a stage one but it's

01:12

coming to the language sooner or later

01:15

at least that's my opinion and there's

01:17

like a lot of effort put in the proposal

01:19

so if you're curious the links to all

01:21

the websites that I'm showing are going

01:23

to be in a video description if in case

01:24

you want to check them out for yourself

01:26

alright now that we got the basics out

01:29

of the way let's just jump right into

01:31

code sandbox and see how exactly do you

01:34

use rxjs and observables in a standalone

01:38

fashion right so I'm just going to

01:39

create a new vanilla sandbox I'm gonna

01:41

add our XJS here as a dependency and

01:43

that's basically all we need so what

01:46

we're gonna do is we're gonna implement

01:47

a very basic observable that will show

01:51

us the numbers right so I'm not I'm not

01:53

even gonna render it in this case I'm

01:55

just gonna import from from rxjs

02:00

so this is the from operator allows you

02:02

to create observables from other

02:05

iterable things or in some other special

02:09

cases like promises in this case we're

02:11

going to create a new

02:13

numbers observable right and we're gonna

02:16

say from array and in this case is just

02:18

gonna be numbers so very straightforward

02:21

nothing super fancy here right now let's

02:24

say we want to actually do something to

02:26

those numbers right so let's say we want

02:29

to have squared numbers so how would you

02:31

go about that squared numbers is going

02:34

to be equal now we're going to take our

02:36

observable and pipe its to operator so

02:41

called operators which is basically

02:42

modification functions which is

02:44

something we can import from rxjs slash

02:50

operators right in this case let's say

02:53

we also we are saying we want to squared

02:54

numbers which means that we want to

02:56

square them which means we need the map

02:57

function right so we're gonna pipe it to

02:59

the map function that takes in a value

03:03

and then does something to this value

03:05

since we're squaring them we're gonna do

03:07

exactly that so it's gonna be squared

03:09

numbers right now if I try to

03:11

console.log this squared numbers we're

03:15

actually not gonna see the numbers

03:17

themselves but we're gonna see the

03:18

observable this is exactly what I was

03:20

talking about before so it's a primitive

03:21

right now what do we do actually if we

03:25

want to see the real numbers we have to

03:27

subscribe to it so this is one of the

03:29

things of the observables to consume it

03:31

you subscribe to it right so we got the

03:32

result and if we console.log the result

03:37

in this case we're gonna see that we

03:39

print out the values one at a time so

03:42

this happens for each value right the

03:45

whole pipe happens for each value it's

03:48

also lazy this is like one of the

03:50

strengths of the observables they are

03:52

executed lazily which means that okay

03:54

say we have this range say we want to

03:57

filter so we're going to auto import the

03:59

filter function from the observable

04:02

operators and say we want to say okay we

04:04

want all the values that are larger than

04:07

two what the laziness means is that

04:10

actually the square the map that we

04:13

define here it's only going to be

04:14

executed after the filter is done so

04:17

it's not gonna do any work whatever the

04:20

complex pipelines you have there after

04:22

the filter on any of the values coming

04:24

before that this is like one of the

04:26

bigger

04:26

things about the observables right this

04:30

is the basic usage so it's very

04:32

straightforward worth noting that

04:33

basically once you subscribe you get the

04:36

subscription objects and you can

04:40

unsubscribe from it so say if we want

04:43

the for some reason to dispose of it

04:46

right so we're going to console.log the

04:48

first number we get and then we're gonna

04:49

say subscription dot unsubscribe which

04:52

will result in us just getting the first

04:54

number and then everything else again is

04:56

going to be discarded and never executed

04:58

because observables are lazy and if

05:00

nobody is subscribed to them they're not

05:02

gonna do anything okay so this is the

05:04

basic case now let's talk about the

05:08

usage of observables in react without

05:11

hooks so like the you know the the old

05:13

standard way of doing that so we gots

05:15

the code sandbox for react here once

05:18

again I'm gonna import rxjs and we won't

05:22

actually be needing any new files here

05:23

so I'm gonna just you know copy this

05:25

code we have over here because let's

05:28

just start with implementing the exactly

05:30

same thing but rendering the numbers

05:33

inside of our react app right so how do

05:38

you go about that well in this case we

05:41

got the function components so let's

05:44

make it into a class stands react start

05:48

components right and this is gonna be

05:51

our render method and we need another

05:54

closing bracket there we go okay so now

05:57

we got the class rendering as expected

05:59

so what do we have to do to work with

06:01

observables well first of all we need to

06:03

define a column sorry the estate because

06:07

it will need to be updated so the our

06:12

component has to react to the changes

06:14

right I forgot the super over here and

06:17

we're gonna say okay that current number

06:19

is one for example I guess let's start

06:23

with zero because we don't have zero in

06:25

our numbers array right and okay so we

06:29

define that we set the state so now we

06:31

can actually render it let's create a

06:34

simple render here current number is

06:39

this states that come on state current

06:43

number right so we got that now we need

06:47

to actually listen to the observable so

06:49

we obviously cannot just subscribe to it

06:52

and never unsubscribe because they will

06:54

lead to memory leaks and problems in the

06:56

long term with the amp so that means

06:59

that we have to handle two things we

07:01

have to handle component did mount right

07:04

so this is where we set up our

07:05

subscription this is exactly what we

07:07

want to do but instead of saying that

07:10

let's subscription we're gonna say this

07:11

subscription and store it on the

07:13

component itself right and in this case

07:17

we're not gonna unsubscribe here and

07:19

instead of using console.log we're gonna

07:21

set States to our current number result

07:25

right so this is exactly what we want to

07:27

do now this works we get our final

07:31

number because the numbers are being set

07:32

dynamically but the problem is that on

07:34

every mount on every refresh on every

07:37

page change for example this is gonna

07:39

result in more and more listeners set

07:42

right which is not something we want

07:44

which means that we need to clean up

07:45

after us so on component will unmount

07:48

we're gonna say this subscription and

07:50

subscribe not too bad right so it's it

07:53

works but yeah it's not far from being

07:57

perfect essentially right now let's make

07:59

it more interesting so let's say we want

08:01

to see the numbers dynamically here in G

08:03

right so let's how do we do that well

08:06

there is a delay function that that is

08:09

one of the operators for HGS and let's

08:12

say we want to see one number per second

08:14

so if we do that you see it actually

08:16

kind of works but it still shows us only

08:18

the last number this is because the

08:21

delay is applied to all of the values

08:23

instantly right so we go through all of

08:25

them and you set the delay for one

08:27

second for each and while the delay is

08:29

there it still applies it to every value

08:32

which is not something we want to see so

08:35

what we actually want to do is again one

08:37

of the probably the most powerful

08:39

features of our XJS is we want to merge

08:41

map the value into a new observable that

08:44

will be delayed so there's the merge map

08:47

operator merge map right

08:50

it takes the function that

08:52

the value and returns something new so

08:54

in this case we're gonna say that we

08:56

create a new observable from an array

08:58

that only contains our value so we're

09:00

gonna pipe it into one second delay

09:02

multiplied by the number so that the

09:05

delay is increased every time right and

09:07

as you can see here we finally have our

09:10

result that is working so we actually

09:11

can see on the page reload that the

09:14

number increases over time right so okay

09:16

we're skipping the value one and two in

09:18

this case so the we're getting three

09:20

four and five seconds delays but it

09:22

works as expected right so pretty

09:24

straightforward still that is a lot of

09:27

code to set this up and if you would

09:28

have to do that in every component that

09:30

consumes observables is just not as

09:32

convenient right so let's rewrite that

09:35

to work with hooks first of all we're

09:38

gonna change this into a function again

09:40

right so we're going to have a function

09:41

f that is this and it returns the

09:46

renderer as before so this works

09:48

perfectly fine this doesn't have to be a

09:50

render anymore so we can just return

09:52

this right let me just format this real

09:54

quick now instead of this state and

09:57

constructor we're gonna have you state

10:00

hook so I'm gonna just use the current

10:03

number and then we're gonna have set

10:04

current number and this is gonna be use

10:08

stage which is going to be equal to zero

10:11

by default right so there's there we go

10:13

there's our state now we have to figure

10:15

out how to do the whole subscription on

10:17

subscription again if you're familiar

10:19

with the react hoax you know that there

10:21

is a used effect hook that basically

10:23

does exactly what we want

10:25

so we're gonna do this and there's our

10:28

use effect hook in this case when we

10:30

want to run it once I'm gonna provide an

10:32

MTA dependencies array because nothing

10:35

really changes in this app right okay so

10:37

we got the subscription setup well we

10:39

have to change something we have to

10:41

actually return the dispose function and

10:43

we have to set the subscription to the

10:45

local variable which makes it a bit

10:47

cleaner and okay in this case we should

10:50

use the current number over here and

10:51

instead of this set state we're gonna

10:53

use set current number so the code is

10:56

even less verbose than before and as you

10:59

can see here it basically works as

11:02

expected so in a few seconds we should

11:04

see our values

11:05

start ticking there we go okay so as you

11:08

can see it's a lot nicer when you're

11:10

using hooks a lot less verbose you don't

11:12

have to do a lot of setup and even

11:14

better you can actually easily extract

11:16

this use effect hook into a new hook

11:19

let's call it use absorbs or use

11:21

observable is what we want right and in

11:25

this case we're gonna pass in an

11:26

observable and we're gonna pass in a

11:29

setter function because well observable

11:31

has to set something right and I'm just

11:34

going to extract this here and say okay

11:37

so we're gonna listen to observable and

11:39

use a setter function for the result and

11:44

in this case since it's a custom hook

11:47

it's gonna depends so we're not gonna

11:51

run it once but we're actually gonna

11:52

change it based on the observable and

11:55

setter that are passed to it so in this

11:57

case I can just write in my coat okay

12:00

use observable we're gonna use square

12:02

numbers and we're gonna use set current

12:04

number right so once we say that we

12:07

should actually see the numbers working

12:08

as expected there we go

12:10

okay so this is all nice and easy but so

12:14

far you know it doesn't exactly seem

12:17

useful right so we've been doing all

12:19

those things and it's kind of looks nice

12:22

a synchronous and everything but how do

12:24

you actually apply that in real world

12:27

well let's implement a real world

12:29

example that is probably in showcased

12:32

for well just about every possible rxjs

12:36

demo I think Auto suggestion or you know

12:40

search suggestion basic right so in this

12:42

case I'm gonna use the Pokemon API so I

12:46

got the URL over here and which is

12:50

basically gonna have a function that

12:52

fetches gets up gets get pokemon pokemon

12:56

vine eight right so we're gonna have a

12:58

function that takes in a name and it's

13:01

gonna be a synchronous so it's gonna be

13:02

a promise and then what its gonna do

13:05

it's gonna fetch okay a weight fetch our

13:10

URL so the one that I have this is the

13:12

Pokemon API and it basically has 2,000

13:14

Pokemon so which is going to grab the

13:15

whole array still seeing

13:17

unison you know in reality you would

13:19

have a proper API that does the search

13:20

for you but in this case we're gonna in

13:23

this case we're gonna simulate the

13:25

synchronicity okay and then we're gonna

13:28

get results as Jason and in this case

13:34

it's gonna be results and we're gonna

13:36

name them all pokemons right so we're

13:38

gonna extract this and then what I'm

13:41

gonna return is I'm gonna say okay all

13:42

pokemons filter Pokemon so that Pokemon

13:48

name includes our name right so

13:52

basically just filter me everything that

13:54

the API returns with the input that user

13:58

provided right so simple enough now we

14:01

don't really need all of that anymore so

14:04

I can just actually kill that but that

14:06

will break our app so I will not do that

14:07

just yet now here's the thing let's

14:11

implement the search first right so

14:12

let's I guess we can just kill that

14:15

because we're not using we're not gonna

14:16

be using it anymore right so we're gonna

14:18

have search and we're gonna have set

14:22

search right so this is gonna be our

14:23

inputs and in this case I'm just gonna

14:26

create input type text placeholder

14:32

search and then we're gonna have value

14:35

search and on change is gonna be handle

14:39

search change because we need to do a

14:42

bit more than just set the function so

14:45

sorry set the value right so get our set

14:47

handle a handle search change it's gonna

14:49

take an event and we're gonna get the

14:53

new value

14:54

this is gonna be events targets value

14:58

and in this case first let's just set

15:00

search new value right so this will

15:04

basically allow us to type in stuff in

15:06

the search box and now we have it saved

15:08

to the state so it correctly updates now

15:11

while this works and everything it's not

15:14

exactly does it doesn't search for

15:16

anything right so how do you actually do

15:18

that well we need to create an

15:21

observable and then we need to apply

15:24

operators to it right so of course we

15:27

could create a new observable on every

15:30

or change but that doesn't sound

15:31

effective luckily for us the rxjs has a

15:34

very handy thing called subjects and in

15:38

this case we can take a behavior subject

15:40

that is gonna be our preset pipeline for

15:43

the value processing right so let's

15:45

create a new search subject right so I'm

15:50

gonna say okay we got our new search

15:51

object which is gonna have the default

15:53

value that is equal to nothing right so

15:56

this is our user I can actually remove

15:59

all of that because we don't really need

16:01

that we do need to use observable okay

16:04

so we created our subject now what we

16:07

need to do is say okay search subjects

16:09

next right and say new value okay so we

16:14

pass our new value to the search subject

16:16

which means whoever is subscribed to it

16:18

will actually get that value so I'm

16:21

gonna create a new state which is gonna

16:23

be results and set results and it's

16:27

gonna be use stage it's gonna be an

16:28

empty array because we're expect an

16:30

array of pokemons right and in this case

16:33

let me just do a div here and I'm just

16:38

gonna json stringify results now to

16:42

write so that we can actually see how it

16:44

looks so in this case it obviously looks

16:45

as an empty array now what we want to do

16:48

is we want to use observable right and

16:51

we're gonna use our search subject and

16:55

then we're gonna use set results to

16:57

update it right seems straightforward so

16:59

once I start typing it should set the

17:02

values which you know it works but

17:04

that's not exactly useful right because

17:06

we don't really do anything to that

17:07

subject now let's create search results

17:11

observable which will actually do all

17:14

the work for us right so we're gonna

17:15

take the search subject and type it into

17:18

a new set of operators that will

17:21

essentially search for the results for

17:23

us right so first of all we want to

17:25

filter the input so that value length is

17:29

more than one symbol because we don't

17:31

want to search for something very short

17:32

and Hamor our server with a useless

17:34

query is essential right next thing we

17:37

want to do is we want to debounce

17:39

time and we want to say okay we want to

17:41

only execute this after users

17:44

typing for 750 milliseconds this can be

17:47

tweaked a bit but you know essentially

17:49

if user changed his might need way of

17:51

typing we want to wait for him to

17:53

actually finish it next thing we want to

17:55

do is we want to say that okay we only

17:59

want to change if the value is actually

18:01

changed so if user type something then

18:03

changed his mind erased it but then

18:05

change the value back again we don't

18:07

want to do the same search right and

18:08

once this is done we want to merge map

18:11

in this case sorry merge map come on I

18:14

want to map our value to a new

18:16

observable that is going to be created

18:18

from our get Pokemon by name promise

18:21

right that is going to be searched by

18:23

our value so now we need to obviously

18:27

use this search result observable here

18:30

and this theoretically should give us

18:32

the result so if I go into the search

18:34

box and search for pull bazaar there we

18:36

go so we get our JSON now let's actually

18:39

render it correctly because this is not

18:41

very user friendly right so we're gonna

18:43

take results I'm gonna map them into a

18:46

Pokemon which is gonna be a div that has

18:50

a key Pokemon name and then I'm just

18:56

gonna render Pokemon name over here and

18:59

it's gonna be it so very simple

19:02

rendering in this case you know this is

19:03

not focus of this video so I'm gonna be

19:05

very straightforward with it so if we

19:07

search we got the names of the pokemons

19:09

and if you know if I start typing like

19:12

crazy erasing it you can see that it

19:14

actually only searches for the last bit

19:17

so it never hammers the server it never

19:18

does unnecessary work and this is

19:21

basically what's really great about our

19:23

exchange

19:25

white this is basically it's I think we

19:30

covered all the basic things here

19:33

obviously they're XJS is pretty old

19:35

library it's very popular there's a huge

19:37

community around it so if you don't want

19:39

to write your own hooks or if you're

19:40

looking for something very specific

19:41

there is plenty of existing libraries

19:44

out there for react for example rxjs

19:46

hooks that simplify working with rxjs

19:49

quite a bit so if you you know if you're

19:51

interested if you don't want to write

19:53

your own hooks do check it out it might

19:54

simplify your life

19:56

that is it from my side for today thank

19:59

you very much for watching and I see you

20:00

next time bye