All language subtitles for 006 Getting Started with a Custom Hook as a Store_en

Saudi context API is not ideal, but there is a different way you could manage this and for this all

to create a new folder and a name it bookstore, you could name it just story, but I already have a

story folder for my redox stuff, and I don't want to delete that because now I will build my own global

state management storage solution with just JavaScript, react and react hooks and nothing else, and

also not the context API in that Hooke's store here.

I'll create a new store, just fall and in that fall on, I'll show you a solution of managing state

globally with just will react in JavaScript.

So let's say we're using Deadfall to manage our global state and I'm deliberately using a very generic

name here because we'll be able to use this store for all kind of state, not just for our products.

Global state could be an object.

Now, we also want to have a couple of places in the app where we can listen to changes in that state.

So all that a variable listeners hear, that's an array.

Please note that both these things are normal variables in this file block scoped.

So not globally available variables, but only available in that file.

But they're not tied to any class or anything like that.

They're just in that file.

They're also not exported.

So we got listeners, we got the state will also need a couple of actions which can be dispatched and

that's, let's say, is an empty object for now.

OK, so now we got these three things, now let's create a custom hook and definitely have a look at

the React Hooks module first so that you have an idea of how hooks work and how you would build custom

hooks.

So here I'll create a custom hook and you name it, use store and just like.

All right, Hooks.

It's a function just to function like this.

Now, in this hook here in this custom hook, I can, of course, use react hooks.

So now let's import such a right hook and there let's import the use state hook.

Because my goal here now is that I have some mechanism that could lead to other components to render

and use.

State has such a mechanism.

You state allows us to manage a state.

And whenever we update that state, any component that uses you as state will re render.

And you also learned in the React Hooks section that if a component uses a custom hook and that custom

hook uses you state, the component that uses to custom hook will render when you state in that custom

hook will trigger a render.

And that's what I'll take advantage of here.

So I want to have some state in here in my custom hook, and that state will actually be my global state.

So I'm using the variable which is defined outside of my hook here.

And that's important.

It's to find out sort of my hook.

So it's global.

It's not recreated when we call use store.

It's not created separately for every component that consumes my custom hook.

Instead, it will be created once when this file is first.

Import that somewhere basically.

And they're after any other file that imports from the same file will also use that same state.

And that's one important idea here, will share data between all files that import from it.

And that's not something we did before with custom hooks.

The idea was the opposite, that we could share logic, but not data.

Now we'll share logic and data by managing the data outside of the hook because instead of the hook,

it would not be shared.

It would be exclusive to each component.

Each component would get its own data, but managing it outside of the hook, every file that imports

this file or something from that file gets the same shared data.

So here we use this state and of course.

We therefore get our two values, which we can structure here, but I'm actually only interested in

my set values.

So in my set state value, you can name does whatever you want.

But since I have that abstract global state name here, I'll just name this sad state and I just have

to set state function because I'm only interested in the second value in the array you state gives me.

So I'm not interested in the current state snapshot.

I'm just interested in that second value here.

So in the updating function now, why am I interested in this?

I'm interested in this because whenever dysfunction is called, the component that uses my custom hook

will render and will need this later to render our components when something in our state changes.

We're not there yet.

But that's why I have dysfunction.

Now, I want to add dysfunction to my listeners, Arae, because listeners should be an array full of

functions which I can call to update all components that are using my hook so that I have a list of

listeners, a list of components that are interested in updates to my global state.

So we can use listeners, push here and push, said states, so push a pointer at this function to listeners,

that means that every component which uses my custom hook will get its own set start function, which

is then added to the shared listeners array.

So this array will grow over time the more components we add.

Now, of course, it would be great that if a component is unmount, that we get rid of its listener,

though therefore also used to use a fact hook here.

And actually use you the fact your.

So did I push something?

To listeners in use of fact, so this will be ran whenever a component that uses my hook updates.

Now I'll add that second argument to use effect to define the dependencies and with an empty array.

This means that this effect will now only run for the component that uses my custom hook when that component

mounts.

And that makes sense.

I want to register a listener for the component when it mounts.

And we can also provide a clean up function here so that we remove the listener when the component unmount,

because with this dependency array will simply only run the effect once and run the clean up function

when the component is removed.

So here we have a function where I want to remove my listener.

For dad.

All simply said listeners, equal to listeners.

And filter out the listener.

I just registered here, so here I got my listener because this function, which I pass to filter runs

for every element and listeners array, and I want to keep all listeners that are not equal to set state

because that state is what I added to listeners here.

And because this is a closure here, the value of said state is captured here for that component that's

using my custom hook and therefore will be the same when the component mounts as it is when it mounts.

So here we can use that comparison.

Even though that state is a function different object, it will be equal to the listener.

So to the same sad state we registered here when the component mounted.

So here we're removing our listener in the component amounts.

Now, we're not entirely honest about the dependencies of use fact, though it's not actually the case

that we have no dependencies in here.

Instead, we do have a dependency to set state here.

But that's no problem because that state is coming from U.S. state.

And I mentioned in the React Hooks section that react will guarantee that this never changes for a given

component.

So effectively, we have only one dependency which never changes.

So this effect will only run once and will only clean up once.

Now, privacy, by the way, we could Amita's if we used to create a structure and syntax, then my

limiting tool was able to find out that this is the updating function, which never changes.

It's not able to find out if we extract it like this.

And therefore, here we have to edit.

But again, it will never rerun.

So this is no problem.

So now we're adding a set state function to our listeners for a component that uses my custom hook when

that component mounts and removing it when it amounts.

So the first steps are taken.