Now, this is nice.
So we're updating our document title each and every time we click on a button.
And of course, we do that using the use.
However, what if we would want to change our functionality a little bit around where we what if I wouldn't
want to showcase but I have zero messages.
What if I would want to do that?
Only when essentially I have value bigger than zero.
So I only want to showcase that if I have the actual messages.
So what I'm trying to say is I would only want to run it when my value is bigger than zero, because
at the moment notice, of course, we render the component and then sends usufruct runs after every
render well, which we right away do, the functionality that is within the user and our national thinking
would be something like this, where if value is bigger than zero, then of course we would want to
run yours.
Sounds pretty reasonable, right?
But remember, seems like eternity ago when I talked about general rules and I said that we cannot we
cannot place hooks as far as conditionals.
So this work, we right away have a big fat complaint because we cannot call hooks conditionally.
And at that time I said that it doesn't make sense for me to place a USB stick in the conditional.
However, I will do that once we get to a use effect.
And of course, we have finally arrived at the user, for example, which technically would make sense
to place it in the conditional.
However, we cannot do that because of the rules of the House.
So just keep that in mind.
Now, the question, of course, is, well, how we can fix that?
And one of the ways how we can do that is by setting up if and else inside of the callback function.
So the point of this video is to showcase that even though you cannot place hooks in the conditional,
similarly how we work with a set function where we set up a conditional and then depending on the value,
we called the set function with some specific value, the same thing we can do in the use effect.
Where inside of that callback function, yes, we can set up a if an all statement.
So how is that going to look like?
Well, in here I could say if value is bigger than one, only then I would want to update document title.
So what happens?
Norrish on the initial render?
Nothing happens even though we still call this user.
So we still call it.
However, in the years affecting the callback function, we have a conditional where I'm checking the
value and I only would want to update document title if the value is bigger than one.
So on our initial render, nothing happens.
However, once I click the button.
Now, of course, the value is one.
So again, nothing happens.
So I guess in this case we can either look for bigger or equals and you'll notice how now once the actual
number is one.
And of course, I'm also updating right away the title because it matches my condition.
Hopefully that makes sense where we cannot place the hooks in the conditionals, something we already
covered before.
However, as far as setting up the conditionals within the callback function, yes, we can definitely
do that.
And it is not against the rules.