‫Let's quickly summarize
‫everything that we know about the useState Hook
‫in one single slide
‫so that you can keep it as a handy reference.
‫So we use the useState Hook to first create state
‫and then the set a function
‫that results from creating state to update state.
‫Now, we can create a state variable in the simple way
‫which is what we do most of the time
‫but we can also create state based on a callback function.
‫So whenever the initial state depends on some computation
‫for example, reading data from local storage,
‫we can pass in a callback function like this
‫instead of just a single value,
‫and this process is sometimes called lazy evaluation.
‫Now this callback function
‫is only called on the initial render of the component
‫so on subsequent re-renders it will simply be ignored.
‫Also, this callback needs to fulfill two requirements.
‫First, it must be a pure function,
‫and second it should require no arguments in order to work.
‫And that's actually it,
‫that's how we create state variables using useState.
‫And now about updating state,
‫we can again update state in a simple way
‫just by passing a single value
‫into the returned setter function as the next state.
‫So in this example the next state would be 1000.
‫On the other hand, in many situations
‫we actually want to update state based on the current state
‫for example, increasing a counter by one.
‫So if that's the case we can give the setter function
‫a callback function like this,
‫so a function that is pure and returns the next state
‫based on the current state.
‫And this is, in my opinion,
‫the preferred way of updating state whenever it makes sense.
‫Now, one important rule to keep in mind about updating state
‫is that you should never mutate objects or arrays.
‫Instead, you must create a new object or a new array
‫which incorporates the changes that you want to make
‫and then pass that new object into the setter function.
‫And we have done that multiple times already,
‫but I just wanted to mention this
‫here in the summary lecture as well.
‫Okay, so in conclusion,
‫both for creating and for updating state
‫we have both a simple way
‫and a way that requires a callback function
‫so this can be a little bit confusing,
‫which is why I decided to create this overview.
‫So I hope that this makes everything crystal clear
‫and that you have now mastered the useState Hook
‫once and for all.