State Or No State

And the freedom to change your mind.

If you live in the 21st century and have ever visited a social media site, you have personally witnessed the magic of a constantly re-rendering webpage that can serve you the most up-to-date information available. This is great because it’s annoying to press the browser refresh button every time you want to see the latest amount of people who like that cat video you shared.

A React Hook

As developers, the ability to update likes on a post or views on a video without the user having to press the browser’s refresh button is given to us by tools such as the React Hook “State”.

Hooks are new in React 16.8 and useState is definitely a favorite. According to the React Docs, using state will tell React to preserve the state of some data between re-renders.

How to implement

This application renders an adorable photo of a cat and tracks the amount of likes based on clicks of the like button.

Implementing State

1. Import
   First, we want to let our application know that we will be using the useState hook in this file by importing it at the top in the same place you would import other necessary files.
2. Declare variable and setVariable
   Since useState returns a pair, the current state value (in this render) and a method to update that value before the next render, we can go ahead and de-structure this at the top of our component after it is defined. As always, choose a variable name here that is both descriptive and hints at the type of data we are expecting it to hold. The method to update state is usually named by prepending “set” to the variable name.
3. Determine starting value
   Because the state variable is just a regular Javascript variable with Transformer powers, we can give it any type of data to hold: a string, integer, array, object, boolean value, even null. If you’d like to hold a search term, a starting value of an empty string would be best. If you want to keep track of likes, an integer. If you are expecting an array of values, an empty array is a good choice. If you need to collect some key-value pairs before saving them to a database (controlled forms anyone?) an object with some default data is ideal. If you would like to do some conditional rendering later based on some changing condition, slap in false and set it to true when needed. Finally, if you just don’t know what the future holds but know you’re going to need it somewhere, simply start with null and update at a later date.
4. Use
   After declaration, a variable held in state can be used in your JSX just like any other variable, surrounded by curly brackets to display on the webpage or passed down as props to a child component.
5. Update
   This is the fun part and what distinguishes a state variable from just a regular one. It can be changed without a page refresh and without a data fetch to the backend server! Remember that setLikes method defined above? We can call that method in response to some user interaction, click, submit, or to cause some change to the DOM, showing a component that was previously hidden. Technically, the set method should be written as a callback or arrow function because it is taking the previous version of state and transforming it for the next render: setLikes((likes) => likes + 1) . This also means that we should use the spread operator when working with arrays and objects as we would get an error if we try to simply mutate the previous state value.

Does it state?

Please enjoy this diagram as a quick way to determine if you should useState.

State or no State?

So the next time you obsessively check to see if your crush has liked your latest cat video post, you know you’ll have React’s useState to thank!