Arrow Functions and State in React

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:

(function (a) {
  return a + 100;
});

Transformed into this:

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.

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.

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.

Destructuring assignment - JavaScript | MDN

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

developer.mozilla.org

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).

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

<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 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.