Arrow Functions and State in React
Tags: react, javascript, beginners
Published: 2023-02-13 20:45:10

Learning React has been interesting, but I've found myself having a hard time understanding State and Hooks. Partly because I'm new to understanding arrow functions. 

Seeing something that is so engrained in my mind like a simple example function: 
``` javascript
(function (a) {
  return a + 100;
});
```
Transformed into this:
``` javascript
a => a + 100
```
has been a little mind blowing. I love the simplicity of it, but it can get a bit confusing after being so used to "function { ... return... }"

A trick that has helped me is that if a function is simple enough, like the example above, an arrow function is removing the words function and return and simply splitting the parameters from the expression to be returned by using an arrow. When there are no parameters, you'll just see ().

Combining that logic with the idea that functions in Javascript can be assigned names, just like you assign a variable to a value, it gets a little easier to understand arrow the below arrow function.  
``` React
const increment = () => setCount(prevCount => prevCount + 1);
```
`Increment` is the name of the function
`()` just means there are no parameters
`=>` indicates everything to the right is logic to be calculated to return some value.

Now what is the `setCount` and why is it calling `prevCount`? This brings us to tracking state, and understanding it with arrow functions simplifying the logic.

## State and Hooks

React hooks help us keep track of State, by providing an easier way to manage internal tracking of a components current value. Hooks allow you to do all this without having to use component classes, and the dreaded `this` keyword.

One of the beginning methods called is `useState()`. When called, it will return an array defining a current state, and a state setter. 

``` React
const [count, setCount] = useState(0);
```
`count` is the current state
`setCount` will be the function to update our state
`0` is initializing the state

If you're unfamiliar with the syntax, you can look into array destructuring here. {% embed https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment %}

The nice thing about useState() is that it will automatically call render() indicating that the component will need to re-render, without us having to include that in the code.  Just be careful to not include it within the render function or you'll be stuck in an infinite loop. It also allows us to keep track of state from one value to the next.

When a component is initialized, React will use whatever initial value is passed as an argument in `useState()`. But, this means when the component is re-rendered using `setState()`, React will use the previous state to update the component! 

When needing to update your state, you'll often need to call upon the current state to calculate the value of what you want set next. In this case, it is best practice to update state with a callback function.

In JavaScript, a callback function is a function that is passed into another function as an argument. 

Take a look at the following example that combines all of the concepts. 
When our state setter (`setCount`) calls the callback function, the 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).

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

export default function Counter() {
  const [count, setCount] = useState(0);
 
  const increment = () => setCount(prevCount => prevCount + 1);
 
  return (
    <div>
      <p>Keep clicking the button, you've done it : {count} times</p>
      <button onClick={increment}>Click me</button>
    </div>
  );
```
Every time the user clicks the button, the count will be updated by 1, and the component will re-render with the current number of clicks. 

Here the logic is separated out from the return statement, but this could be calculated within the button and would look like this

``` React
<button onClick={() => setCount((prevCount) => prevCount + 1)}>Click me</button>
```
It is more readable and cleaner to handle it the first way, but it can be done within the <button> if desired.

That was a quick recap of a couple things I learned last week, and I'm hoping to show a similar recap each week. Let me know if you have any tips/tricks or any topics you'd like me to look into! I look forward to learning with you all.
---

I want to use this space to show what I'm learning, and speak with people who are learning themselves! Also, if you're a React expert and have feedback about what could be done better or is incorrect, please feel free to comment.