Well, we now need to add in some code to take the search term that the users entered and make a request
off to the Wikipedia API.
I've got a very practical question here.
Where are we going to write the code for that?
Where we gonna write the code to actually make that request?
I think there are two possible options available to us.
Those take a look at a diagram and understand what they are.
We have two options.
I've listed out a flow of series or a flow of actions for option number one on the left and for option
number two on the right.
We're going to first focus on the possible searching.
Option number one.
Let's zoom in here just to be able to read the stuff nice and easy.
All right.
So user at some point time is going to type into that text input.
Remember what I just told you?
We want to make sure that whenever a user types into the input, we immediately make a request to the
Wikipedia API.
The one way we could do that is to add in some code to the on change, even handler.
So inside that on change event handler, we could add in some code to take the value from the input
and make a request immediately over to the Wikipedia API.
It, of course, takes some time to get that or to make that request.
Well, after a very short period of time.
We would then get a response.
We could take some data out of that response and use it to update maybe some piece of state that we
call results.
And that would be the list of search results like this array right here of objects.
And then because we are updating a piece of states, our component would re render and we could render
out a list of all those results.
But this approach right here, approach number one, very simple and straightforward.
However, it does have a downside.
Let's first take a look at option number two and we'll compare and contrast the pros and cons with both
these options.
With option number two, this one is definitely more complex.
But you're going to see that there are some really big upsides to it.
With option number two, we're gonna have users still type in that input.
So going to have the event change or on change.
Event handler called.
And we're going to continue to just allow that on change event handler to update our term piece of state
because we are updating a piece of state our component will re render.
And now here is the key.
Here is the whole key to option number two inside of our component.
We can add in some code to detect that our component is re rendering and that the term piece of state
has changed.
So this is the real key part right here.
We are going to add in some code to detect that our component is re rendering and that the term piece
of state has changed.
Once we detect that it's re rendering and term is changed, we will then make a request to the API.
And then after a brief period of time, we'll get back.
Response update results, piece of state.
Are components going to re render again?
And we'll show our list of results to the user.
The big difference here between these two approaches is whether we want to attempt to make the request
immediately inside the launching Chandler or whether we want to only update some piece of state and
then make the request only after our component begins to re render and we detect that term has changed.
Now, again, option number one probably seems really easy and straightforward, but like I said, there
are some very good reasons to go with option number two.
So let's look at some pros and cons.
With option number one, even though it's really simple and easy to understand it, definitely Titli
couples are searching code with the on change event handler.
In other words, we're going to have some very specific code inside that even handler.
That's going to take the current search term and make that request and then update some piece of state.
With option number two, however, we can very easily kind of decouple or extract that searching code
from anything related to an unchanged event.
Now, why is that relevant?
Why do we care?
At the other day, we probably could figure out some way to extract all this on change code into some
kind of helper function.
But the reason that option number two is so great is that we can very easily somehow trigger a search
if some other parameter changed inside of application with option number one.
We are only doing a search win on change event handler fires.
That's it.
With option number two, we could very, very easily say that if there is some other piece of information
that a user is going to enter, we could very easily trigger a search.
And when will that occur?
Well, remember just a moment ago I did a search of the Wikipedia over here.
I put in program and you're seeing some results here where everything is kind of organized by category.
So I see some programming or program search results related to arts and entertainment, science and
technology and some other stuff.
The inside of our search widget, we might eventually decide to put in some kind of maybe category selector.
Maybe we can put in some kind of dropdown that says I want to search for the term program in the world
of arts and entertainment or in the world of science and technology.
If we had some additional search criteria like that, we would probably want to trigger a search whenever
the user edits a search term or changes the category that they are trying to search for.
From.
So in that scenario, we would then have two pieces of information that would need to trigger a search.
And if we use option number two, it would be extremely easy to add in that additional search or that
additional parameter.
Now, again, we could definitely do this with option number one.
It's definitely possible, but it's just significantly easier as you're going to come to find with option
number two.
So that is why we're going to go with option number two.
We are going to.
Leave our unchanged event handler.
The way it is right now, and we're going to say that anytime our component renders.
We need to add in some code.
That's going to detect that we are are re rendering and that the term piece of state has changed.
And this is where the use effect hook comes from, the U.S. Factbook is what allows us to put together
this step right here, whose effect allows us to write out some code that detects that our component
is rendering and some piece of information has changed.
And that's going to allow us to run some additional code.
OK, so now that we've got kind of a reason, albeit kind of tenuous, I, I told you, imagine right
now you can think of a way to implement option number one.
And I'm sure you're thinking, oh, yeah, I'd be so easy and just fine.
I know.
But we are going to go with option number two again, even though it's kind of hard to see right now.
This is definitely a better way of implementing this.
So we're going to take a pause right here.
We're gonna come back.
Next video and we're going to take a look at this use effect hook and understand how we can use it to
detect that the term piece of state has changed.