State... The Thing Everyone Hates

What is state?

State at its core is a React Hook. A React Hook is a special function that lets you have access to or "hook into" certain React features. The useState React Hook lets you add a state to a functional component. This allows you to set certain data to a variable that can be used in the component that you added state too, and its children as well passed down via props.

How to use State

The first thing you need to do to get state up and running is to import the useState React Hook. That would look like so...

import React, { useState } from 'react'
// or
import { useState } from 'react'

Next, you need to declare your state variable and setter function in an array format with a const and set that equal to the useState Hook. In my example I will be using state to determine if the app is currently in dark mode or light mode.

function App() {
const [darkMode, setDarkMode] = useState(false)

return...
}

Inside the parentheses of the useState Hook is what the default value of the state you just created. In this example I only need to check if dark mode is on (true) or off (false). Currently it is off due to the default value I gave to the state. Next thing to do is to wright a new function that will change the current value of the state. (This function will be called when the user clicks a button to turn dark mode on.)

function App() {
const [darkMode, setDarkMode] = useState(false)

function handleDarkMode() {
  setDarkMode(!darkMode)
}

return(
 <div>
   <button onClick={handleDarkMode}> Dark Mode </button>
 </div>
)
}

The Function handleDarkMode calls our setter function in state setDarkMode. In the parentheses of the setter function is what you want the new value of state to be. In the example above, I set the new value of state to be !darkMode or "not" darkMode which will change the value to true instead of false. With this basic set up I can tell the app to change the overall style of the app if the value of darkMode is true or false.

Wrapping it all up

This is just the beginning and something very basic that useState can be used for. Learning state was not an easy or quick thing to do. I am still working on fully understanding everything that the useState React Hook can be used for! Some things that helped me when learning this was that...

• The variable that you declare for your state is just like declaring any other normal const variable. It is a variable that has data stored in it.
• The setter function is what you use when you want to change the data that is being stored in your variable.
• Lastly, and probably the most tricky, is to always think about what component you want to declare your state in. If the component you are currently in has no use for the data you need to store in state, you might need to go up or down your app's hierarchy to see what component is best suited to hold that state.

Keep those simple things in mind and you will be mastering state in no time!