Quick Code
Published in

Quick Code

How to Learn React #7 — Discover Magic Behind Component

Hello and welcome back to the series of tutorials which will help you understand what React is and how it works. In the previous chapter we learned more about updating component state. In this chapter we’ll learn about component life cycle. I know you probably have a lot of things to do today so without any additional chitchat…let’s start.

If someone would ask me what is component life cycle I would tell this. It is series of actions which are executed before component is displayed, after component is displayed, before component is updated and after component is updated. To examine it more and better let’s distinguish before two things. Component is displayed(or mounted) and component is updated. Let’s take a look at first one. Component is displayed or mounted by in render which is one of the component life cycle methods. When we define render in our component we tell how it should be displayed on our page. In similar fashion we can define componentWillMount(executed before render) and componentDidMount(executed after render). Now for the update part we can usecomponentWillUpdate(executed before component update) and componentDidUpdate(executed after component update). Just to quick memory refresh, update can be caused e.g by changing component state. Okay I know what you’re probably want to hear…enough of the theory already and let’s do some coding. Let’s go…

Let’s change our MealPlan component a bit

We added componentWillMount method and we’re changing state in it. I know it is not much for now but it’s more about the idea. So before component is actually rendered we want to fill it with some data, in our case list of meals. so instead of just changing state with some hard coded data we could actually make request to the server to fetch all meals stored in database and then displays them in our component. Well I guess at some point we’ll do that but not in this chapter because we don’t have server yet. For now…dummy data have to be enough. We could also use componentDidMount to do some stuff but I can’t think of anything more to do related to mounting the component. Let’s take a look at our application so far.

So the app is loaded and we immediately see meals we should eat and we can also add meals. I can think of one little feature we can add. We can write some message to user when new meal is added. New meal is added, that means component state is changed. Component state is changed that means component is updated and yeah you’re guessing it right, we’re gonna make use of componentDidUpdate. I already went ahead and implemented the functionality and now MealPlan is looking like this

I changed our state a little and now we’re tracking if the message about new meal should be displayed or not. Initially it is set to false so message won’t be shown. In render we added this line of code

{this.state.showAddMealMessage ? <p>New meal added</p> : null}

By that we’re checking. Okay is this.state.showAddMealMessage true? If so display message to user. If not don’t show the message.

And the last change was adding componentDidUpdate and if you look closely you’ll see we’re defining it with some parameters. You see…componentDidUpdate and componentWillUpdate are always providing two params…props and state. For componentDidUpdate it is previous props and previous state. For componentWillUpdate it is next props and next state. We can skip props for now and only talk about previous state. So as we know componentDidUpdate is called after component state was changed so by the time this method is executed, state is already changed. But we can still access last version of state before update because the method itself is providing it for us. So I want to check if the new meal was added I just check if prevState.meals.length < this.state.meals.length

If this condition is true I can say new meal was added and I can set showAddMealMessage to true. And that is all we need. Well you might ask why we can simply just write the method like this

componentDidUpdate() {    
this.setState({showAddMealMessage: true});
setTimeout(() => this.setState({showAddMealMessage: false})

We can’t really do that because remember? This method will be called each time state has changed. And we’re actually changing state in componentWillMount. So if we would use it like this, message is still shown when we’ll add new meal, but also when component will be mounted for the first time. And every time component state is changed somehow.

Okay this will be it for this chapter. If you were playing around with the app so far you maybe noticed that you have to click on the button each time instead of just pressing ENTER. Yeah you’re not alone…I find that irritating as well. We’ll fix it in the next chapter. Stay tuned. Cheers :)



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store