React basics 101

Hello Friend,

For this one to work I'll need you to cooperate with me and write some code, if you're too lazy for it thinking like "I don't want to hustle with an IDE now" here you go: https://codesandbox.io/ go there and choose to a React template. if you still haven't done it, do yourself a favour and at least have some code in your head while going through this react 101 journey.

So I was given the assignment to handle this problem: - You are a part of a team, the team is a basic data structure that contains names, names cannot be repeated. Imagine a super-hero group having heroes like Batman, SuperMan etc. you can't have 2 batmans in the same team right? You need an input that takes new superhero recruts but makes sure if the new superhero has the same name as some other member of the team, you will print an error msg.

something like that will do.

now will be your last chance to code it yourself, from now on if you'll scroll further down you'll be joining me on how I solved it.

My first thoughts where that let's write the input, I'll also need a state to store the name I'm getting. afterwords I can use that variable to check if my team has such a name.

My plan to display the data and get the data led me to write something like this:

now, what about the error msg? of course!

So now I need another state, right? Okay, no problem.

And now I want to sort of "listen" to when my name input changes and check if my team already has such a name. So my instinct went straight to "useEffect listens if a prop changes if you pass it" so there I went.

now I got all the logical pieces responsible to make it work, I should be fine and expect the result in the picture above at the beginning of the article.

my final result looked like this:

Notice I added a console log at line 18 where I print "Rendered", I'll add some logs inside the effect as well:

So when the app starts we get a render(obviously) and our error state is falsy. great!

Uh oh, that's weird. Yeah, the code works just fine, you can see it, BUT, take a look at the line "Inside If: false" how the hell is that possible? this is JavaScript, everything is asynchronies, If I set a state to true I expect it to print true. Also, I get to render 7 times. that's almost double the chars I have in my name. Why?

React components automatically re-render whenever there is a change in their state or props. A simple update of the state, from anywhere in the code, causes all the User Interface (UI) elements to be re-rendered automatically

So let's see a different approach to this problem:

I removed the effect, moved the logic outside of it, and just put it into the component itself. now it looks thinner, less verbose, let's check if it also works well

Nice! bang, my App component was rendered just 4 times, the first time at the start, then 3 more times for each char input. I saved 3 redundant renders. That's nice. But most important is that my App component doesn't have a situation where its error state is falsy when it's actually true.

I can also upgrade the code with useMemo at this point and make it like this:

The bottom line is I learned that React just like its name and symbol of core reactor works like that as well. The way it works is if you change state it will cause re-render but in an atomic way, so like in this example I changed the error state to false, it will be actually changed only in the NEXT render. so make sure your logic will still work just expected since this is a great spot for bugs to appear.

Hope you enjoyed the article, Thank you for reading!