So now we're able to communicate back and we are actually updating our course goals array in the app component
but what you see is despite the array being updated and clearly the new goal is part of the array, our
output here on the screen didn't change
and that leads us to a core concept of React, state. React does not re-render this jsx code and therefore
the real UI, all the time whenever some event is triggered anywhere in the app.
So just because I click this button here does not mean that React will re-render the entire screen
just to make sure it doesn't miss any data change,
this is not how React works,
instead in the end you have to tell React when it should re-render and you do so by using a concept
called state. This course goals array
here is a regular Javascript array, put in other words, React totally ignores it,
we have to tell React that it should not ignore it and that instead,
whenever we change this array, it should update the
UI, the jsx code of the component in which we changed it,
so in this case of the app component.
Now to do that, we import one other thing from the React package
and that's use state, a function built into the React library, a so-called React hook and you'll learn
more about hooks in my React - The Complete Guide
course of course, a function which we can execute inside of functional components and only inside
of functional components, in class-based components, you also have a state management mechanism, not focus
of this course here but you could also do it there but in functional components, you use these hook functions
as they are called, all these functions starting with use at the beginning, to manage state, so to manage
data which when changed should lead to the UI of that component in which you manage the state to
re-render.
So here in the app component, I now want to call use state and to use state,
I pass this array here,
this is my so-called initial state
then, I can get rid of that constant for now.
This tells React that this component has some state and that this is my initial state, by the way
you can also have multiple different state pieces and they're all watched independently
but here I only have one main state and that is my array of goals and I tell React that I have this
state and that this is my initial state.
Now of course I want to get access to that initial state, store it in some constant so that I can use it
in the rest of the component because course goals is now missing everywhere.
So use state also returns something, it returns an array of exactly two elements;
the first element always is our latest state snapshot,
so either our initial state or once we changed it,
the updated state and the second element of that array returned by use state is a function that allows
us to update that state,
replace it with a new value and tell React that it should re-render.
So here I will use array destructuring, by using square brackets on the left side of my equal sign here
to extract these two elements I have in the array returned by use state and there are always exactly
two elements, so it does not depend on which kind of state data you pass here,
use state gives you an array with exactly two elements.
First element, your current state,
so in my case, my array here,
second element, a function to update the state
therefore typically we name this set and then any name of your choice,
set course goals in my case.
So I have two constants created with the help of use state, first constant holds my state snapshot,
second constant actually holds a function which we can call to update that state snapshot and we will
call that function here in add new goal handler. We can call set course goals here
and now I want to update my course goals by adding a new goal.
Now a simple form of doing that is to simply then use my old course goals and call concat here, not
push because push modifies the existing item, instead set course goals
wants a brand new array which will replace the old array and concat will also add an item to an array
but it will return a new array to which this item was added.
So it gives us a brand new array, doesn't touch the old one and we then pass the brand new array to set
course goals and React will then use that brand new array to under the hood replace the old array in
its internally managed state and it will re-render this component
once it did so and therefore update this course goals constant with the new array in the next render
cycle, which in the end means that React will execute this function here and therefore when it does so, it will reflect
that new data in our jsx code.
So here I want to concat my new goal and if we now save this and I click add goal, you see new goals
are added to the list because React now re-renders this screen or the parts that need to be re-rendered
whenever we update our state.
Now how exactly React re-renders and so on is not the focus of this course,
you can learn that in dedicated resources like the official docs or my complete guide,
for now it just suffices to know that React magically and efficiently does re-render the page or the
parts of the page that need re-rendering based on the state changes we applied.