Hooks

Hooks, the bane of my existence. What are they? What do they do? How do you use them? I hope to answer all these questions here. First of all a hook is a function that lets you ‘hook into’ different react features. Think of it as an array with two different values. The first value would be a variable with the state. The second value is a variable with a handler-a function will change the current state. Something that didn’t dawn on me till writing this: values are functions, and functions are values. Here’s an example of what I mean below:

Let me explain what’s going on.
 You are assigning the number 10 to the variable c. So when you console.log(c) it gives you the assigned number: 10.

 In this case you are assigning the answer to the equation to the variable o, NOT THE EQUATION ITSELF. So when you console.log(o) you get 69.

 Here we are actually assigning an entire function to our variable. So this time when you console.log(d) it shows you that function and what it does.

 Now finally in our last one we are assigning d() to the variable e. This time when you
console.log(e) it gives you the string you assigned to the function assigned to d.
With useState you can add React state to functional components, but only ones declared as a function. The hook has state kept inside it, but is accessible from the component where you called the hook. Some Simple rules to follows: always use hooks at the top level of the React component. Don’t call them inside loops, conditions, or nested functions. Hooks must be called in the same order every time a component renders. That’s how React preserves the state of the hooks between many different useState and useEffect calls. You can not call hooks on regular JavaScript functions, only on React components and custom hooks.
To use useState first you must import it from the the React library, then you have to invoke it inside the react component.

Now you can call the set to update the state value or render state freely. Here’s an example:

Here’s what is looks like in browser:

If your variable comes from other data you don’t need state. For instance if you’re changing the theme color from dark to light based on the time of day, that can come from the system data. A toggle is true or false and is triggered when a button is clicked, we don’t need state here either. When we want to store the input from the user or when an event is triggered, that’s when we use state. Form data is also stored in state at least until it’s sent to the database, where it can be retrieved and edited again.
This would be the best first approach to handling multiple states at once:

In browser:

Another way to do this, but is a bit messy is:

This is more complex because we need to spread the existing object and then add the change or you’ll lose it.

Changing state is asynchronous and here’s an example:

In this example I created a function handleOgresCount and I called setOgres with the new value. Doing this made it so the state wasn't updated immediately.