Learn how to use React Hooks to manage states in a function component.

The State Hook

Let's see an example of managing the changing value of a string as a user types into a text input field: 

```js
import React, { useState } from 'react';

export default function EmailTextInput() {
  const [email, setEmail] = useState('');
  const handleChange = (event) => {
    const updatedEmail = event.target.value;
    setEmail(updatedEmail);
  }

  return (
    <input value={email} onChange={handleChange} />
  );
}
```

Here's a breakdown of how the above code works:
* We use [array destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) to create our local state variable `email` and our local setter function `setEmail()`.
* The local variable `email` is assigned the current state value at index `0` from the array returned by `useState()`.
* The local variable `setEmail()` is assigned a reference to the state setter function at index `1` from the array returned by `useState()`.
* It's a convention to name the setter variable using the current state variable (in this example, `email`) with "set" prepended.

The JSX input tag has an event listener called `onChange`. This event listener calls an _event handler_ each time the user types something in this element. In the example above, our event handler is defined inside of the definition for our function component, but outside of our JSX. Earlier in this lesson, we wrote our event handlers right in our JSX. Those inline event handlers work perfectly fine, but when we want to do something more interesting than just calling the state setter with a static value, it's a good practice to separate that logic from our JSX. This separation of concerns makes our code easier to read, test, and modify. 

It's common in React code to simplify this:

```js
const handleChange = (event) => {
  const newEmail = event.target.value;
  setEmail(newEmail);
}
```

to this:

```js
const handleChange = (event) => setEmail(event.target.value);
```

or, using object destructuring, this:

```js
const handleChange = ({target}) => setEmail(target.value);
```

All three code snippets above behave the same way, so there really isn't a right and wrong between these different code snippets. We'll use the last, most concise version moving forward.

Use State Setter Outside of JSX

We can also use state with objects. When we work with a set of related variables, it can be very helpful to group them into an object. Let’s look at an example of this in action.

```js
export default function Login() {
  const [formState, setFormState] = useState({});
  const handleChange = ({ target }) => {
    const { name, value } = target;
    setFormState((prev) => ({
      ...prev,
      [name]: value
    }));
  };

  return (
    <form>
      <input
        value={formState.firstName}
        onChange={handleChange}
        name="firstName"
        type="text"
      />
      <input
        value={formState.password}
        onChange={handleChange}
        type="password"
        name="password"
      />
    </form>
  );
}
```

A few things to notice:
* We use a state setter callback function to update a state based on the previous value.
* The spread syntax is the same for objects as for arrays: `{ ...oldObject, newKey: newValue }`.
* We reuse our event handler across multiple inputs by using the input tag's `name` attribute to identify which input the change event came from.

Once again, when updating the state with `setFormState()` inside a function component, we do not modify the same object. We must copy over the values from the previous object when setting the next value of a state. Thankfully, the spread syntax makes this super easy to do!

Anytime one of the input values is updated, the `handleChange()` function will be called. Inside this event handler, we use object destructuring to unpack the `target` property from our `event` object, then we use object destructuring again to unpack the `name` and `value` properties from the `target` object.

Inside our state setter callback function,  we wrap our curly brackets in parentheses like so: 

```js
setFormState((prev) => ({ ...prev }))
```

This tells JavaScript that our curly brackets refer to a new object to be returned. We use `...`, the spread operator, to fill in the corresponding fields from our previous state. Finally, we overwrite the appropriate key with its updated value. 

Did you notice the square brackets around the `name`? This [Computed Property Name](http://eloquentcode.com/computed-property-names-in-javascript) allows us to use the string value stored by the `name` variable as a property key.

Objects in State

While there are times when it can be helpful to store related data in a data collection, like an array or object, it can also be helpful to create different state variables for data that change separately. Managing dynamic data is much easier when we keep our data models as simple as possible. 

For example, if we had a single object that held state for a subject you are studying at school, it might look something like this:

```js
function Subject() {
  const [state, setState] = useState({
    currentGrade: 'B',
    classmates: ['Hasan', 'Sam', 'Emma'],
    classDetails: {topic: 'Math', teacher: 'Ms. Barry', room: 201};
    exams: [{unit: 1, score: 91}, {unit: 2, score: 88}]);
  });
```

This would work, but think about how messy it could get to copy over all the other values when we need to update something in this big state object. For example, to update the grade on an exam, we would need an event handler that did something like this:

```js
setState((prev) => ({
 ...prev,
  exams: prev.exams.map((exam) => {
    if( exam.unit === updatedExam.unit ){
      return { 
        ...exam,
        score: updatedExam.score
      };
    } else {
      return exam;
    }
  }),
}));
```

Complex code like this is likely to cause bugs. It's best to create multiple state variables based on which values tend to change together.

We can rewrite the previous example as follows:

```js
function Subject() {
  const [currentGrade, setGrade] = useState('B');
  const [classmates, setClassmates] = useState(['Hasan', 'Sam', 'Emma']);
  const [classDetails, setClassDetails] = useState({topic: 'Math', teacher: 'Ms. Barry', room: 201});
  const [exams, setExams] = useState([{unit: 1, score: 91}, {unit: 2, score: 88}]);
  // ...
}
```

Managing dynamic data with separate state variables has many advantages, like making our code more simple to write, read, test, and reuse across components. 

Often, we find ourselves packaging and organizing data in collections to pass between components, then separating that data within components where different parts of the data change separately. The wonderful thing about working with Hooks is that we have the freedom to organize our data in the way that makes the most sense to us!

Separate Hooks for Separate States

What should we do if we want to add a state to our function component? How about if we wanted our app to respond to the changes in data?

In this lesson, we'll learn about *React Hooks* and how they can help us powerfully wield function components.

React Hooks, plainly put, are functions that let us manage the internal state of components and handle post-rendering side effects directly from our function components. Using Hooks, we can determine what we want to show the users by declaring how our user interface should look based on the state. 

React offers a number of built-in Hooks. A few of these include `useState()`, `useEffect()`, `useContext()`, `useReducer()`, and `useRef()`. See [the full list](https://react.dev/reference/react) in the React docs. 

In this lesson, we'll learn how to:
* Build a "stateful" function component.
* Use the State Hook.
* Initialize a state and set a state.
* Define event handlers.
* Use state setter callback functions. 
* Use state with arrays and objects. 

Why Use Hooks?

Let's get started with the **State Hook**, the most common Hook used for building React components. The State Hook is a named export from the React library, so we import with [object destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) like the following:

```js
import React, { useState } from 'react';
```

When we call the `useState()` function, it returns an array with two values:
* The _current state_: The current value of this state.
* The _state setter_: A function that we can use to update the value of this state.

We can use these two values to track the current state of a data value or property and change it when we need to. To extract the two values from the array, we can assign them to local variables by using array destructuring. For example: 

```js
const [currentState, setCurrentState] = useState();
```

Let's have a look at another example of a function component that uses the State Hook: 

```js
import React, { useState } from "react";

function Toggle() {
  const [toggle, setToggle] = useState();

  return (
    <div>
      <p>The toggle is {toggle}</p>
      <button onClick={() => setToggle("On")}>On</button>
      <button onClick={() => setToggle("Off")}>Off</button>
    </div>
  );
}
```

Notice how the state setter function, `setToggle()`,  is called by our `onClick` _event listeners_. To update the value of `toggle` and re-render this component with the new value, all we need to do is call the `setToggle()` function with the next state value as an argument. 

With the State Hook, updating the state is as simple as calling a state setter function. Calling the state setter signals to React that the component needs to re-render, so the whole function defining the component is called again. The magic of `useState()` is that it allows React to keep track of the current value of the state from one render to the next!

Update Function Component State

Like how you used the State Hook to manage a variable with string values, we can use the State Hook to manage the value of any primitive data type and even data collections like arrays and objects!

Have a look at the following function component. What data type does this state variable hold?

```js
import React, { useState } from 'react';

function ToggleLoading() {
  const [isLoading, setIsLoading] = useState();

  return (
    <div>
      <p>The data is {isLoading ? 'Loading' : 'Not Loading'}</p>
      <button onClick={() => setIsLoading(true)}>
        Turn Loading On
      </button>
      <button onClick={() => setIsLoading(false)}>
        Turn Loading Off
      </button>
    </div>
  );
}
```

The `ToggleLoading()` function component above uses the simplest of all data types, a boolean. Booleans are frequently used in React applications to represent whether data has loaded or not. In the example above, we see that `true` and `false` values are passed to the state setter, `setIsLoading()`. 

This code works just fine as is, but what if we want our component to start off with `isLoading` set to `true`?

To initialize our state with any value we want, we simply pass the initial value as an argument to the `useState()` function call. 

```js
const [isLoading, setIsLoading] = useState(true);
```

There are three ways in which this code affects our component:
1. During the first render, the _initial state argument_ is used.
2. When the state setter is called, React ignores the initial state argument and uses the new value. 
3. When the component re-renders for any other reason, React continues to use the same value from the previous render. 

If we don't pass an initial value when calling `useState()`, the current value of the state during the first render will be `undefined`. Often, this is perfectly fine for the computers running the code, but it can be unclear to the humans reading our code. So, we prefer to explicitly initialize our state. If we don't have the value needed during the first render, we can explicitly pass `null` instead of passively leaving the value as `undefined`.

Initialize State

In the previous exercise, we learned to update the state by passing it a new value like this:

```js
setState(newStateValue);
```

However, React state updates are _asynchronous_. This means that there are some scenarios where portions of your code will run before the state is finished updating. 

This is a good and a bad thing! Grouping the state updates together can improve performance in your application, but it can result in outdated state values. Consequently, it is best practice to update a state with a callback function, preventing accidental outdated values. 

Let’s take a look at the following code to see how it's done:

```js
import React, { useState } from 'react';
 
export default function Counter() {
  const [count, setCount] = useState(0);
 
  const increment = () => setCount(prevCount => prevCount + 1);
 
  return (
    <div>
      <p>Wow, you've clicked that button: {count} times</p>
      <button onClick={increment}>Click here!</button>
    </div>
  );
}
```

When the button is pressed, the `increment()` event handler is called. Inside this function, we use our `setCount()` state setter with a callback function.

Because the next value of `count` depends on the previous value of `count`, we pass a callback function as the argument for `setCount()` instead of a value (as we've done in previous exercises). 

```js
setCount(prevCount => prevCount + 1)
```

When our state setter calls the callback function, this _state setter callback function_ takes our previous `count` as an argument. The value returned by this state setter callback function is used as the next value of `count` (in this case, `prevCount + 1`).

We can also just call `setCount(count +1)` and it would work the same in this example, but for reasons that are out of scope for this lesson, it is safer to use the callback method.

Set From Previous State

We can now build stateful function components using the `useState` React Hook!

Let’s review what we learned and practiced in this lesson:
* With React, we feed static and dynamic data models to JSX to render a view to the screen.
* Hooks are used to “hook into” the internal component state for managing dynamic data in function components.
* We employ the State Hook using the code below. The `currentState` references the current value of the state and `initialState` initializes the value of the state for the component's first render.

```js
const [currentState, stateSetter] = useState( initialState );
```

* State setters can be called in event handlers.
* We can define simple event handlers inline in our JSX and complex event handlers outside of our JSX.
* We use a state setter callback function when our next value depends on our previous value.
* We use arrays and objects to organize and manage related data that tend to change together.
* Use the spread syntax on collections of dynamic data to copy the previous state into the next state like so: `setArrayState((prev) => [ ...prev ])` and `setObjectState((prev) => ({ ...prev }))`.
* It's best practice to have multiple, simpler states instead of having one complex state object.

Review

JavaScript arrays are the best data model for managing and rendering JSX lists. Let's take a look at the code for a website for a pizza restaurant.

```js
import React, { useState } from 'react';

//Static array of pizza options offered. 
const options = ['Bell Pepper', 'Sausage', 'Pepperoni', 'Pineapple'];

export default function PersonalPizza() {
  const [selected, setSelected] = useState([]);

  const toggleTopping = ({target}) => {
    const clickedTopping = target.value;
    setSelected((prev) => {
     // check if clicked topping is already selected
      if (prev.includes(clickedTopping)) {
        // filter the clicked topping out of state
        return prev.filter(t => t !== clickedTopping);
      } else {
        // add the clicked topping to our state
        return [clickedTopping, ...prev];
      }
    });
  };

  return (
    <div>
      {options.map(option => (
        <button value={option} onClick={toggleTopping} key={option}>
          {selected.includes(option) ? 'Remove ' : 'Add '}
          {option}
        </button>
      ))}
      <p>Order a {selected.join(', ')} pizza</p>
    </div>
  );
}
```

In the above example, we are using two arrays:
* The `options` array contains the names of all of the pizza toppings available.
* The `selected` array represents the selected toppings for our personal pizza.

The `options` array contains _static data_, meaning that it does not change. It's best practice to define static data models outside of function components since they don't need to be recreated each time our component re-renders. In our JSX, we use the JavaScript `.map()` method to render a button for each of the toppings in our `options` array.

The `selected` array contains _dynamic data_, meaning that it changes, usually based on a user's actions. We initialize `selected` as an empty array. When a button is clicked, the `toggleTopping()` event handler is called. Notice how this event handler uses information from the event object to determine which topping was clicked. 

When updating an array in a state, we do not just add new data to the previous array. We replace the previous array with a brand new array. This means that any information that we want to save from the previous array needs to be explicitly copied over to our new array. That's what this [spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) does for us: `...prev`. 

Notice how we use the [`.includes()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes), [`.filter()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), and [`.map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) methods of our arrays. If these are new to you, or you just want a refresher, take a minute to review these array methods. We don't need to be full-fledged JavaScript gurus to build React applications but know that investing time to strengthen our JavaScript skills will always help us do more faster (and have a lot more fun doing it) as React developers. 