useState - don't get Hooked 🪝
Tags: react, html, softwaredevelopment, coding
Published: 2023-10-07 07:09:47


Hooks are tools in the React library that allows developers to "hook into" React "state" when writing function components.

React Hooks consist of..

- useState Hook
- useEffect Hook
- useRef Hook
- useCallback Hook
- useMemo Hook
- useContext Hook
- useReducer Hook

`useState` is one of the two main React hooks I learned on my coding journey so far. Although `useState` is only one of the many React hooks, it is an important one, as it allows you add a state variable to a component. 

The first step that is required to utilize React Hooks such as **useState**, is to <u>import</u> the Hook of choice from the React library.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4nbx18azb9q4k4bxel0m.png)

  
   = = = = = = = = = = = = = = = = = = = = = = = = = = = =


We write this line of code in an "out of the ordinary" format using an array that is then destructured, providing two variables in one declaration.
`(useState declaration)`
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uapgfpo0di7ziuspvqsx.png)
_The syntax for declaring a state variable with `useState` looks quite odd and can be confusing, but with practice, it becomes familiar._


1. The first variable in the array is always the **'state'** variable. 
2. The second is a variable that will be used as the **'setter function'**, for updating the state variable.

> <u>_It is good practice to name the "setter function" variable after the state variable, using the term "set"._</u>
Initializing with the `const` declarative, we define the array of two variables to equal '`useState()`'. Inside the parenthesis we pass in the default value for the state variable.


   = = = = = = = = = = = = = = = = = = = = = = = = = = = =


```
const [timer, setTimer] = useState("00:00")
```
> Here we set the initial value *(of any data type) for the state variable (first variable in the array) "timer" to hold the constant value of a string - "00:00"
Also, we have the setter function (second variable in the array) that is used to update the value of the state variable, hence the clear and concise name - "setTimer".

_Constant_ "`const`" _variable declarations assign a value that cannot be re-assigned after declaring it. This is where we see the power of the setter function, as it is the only way to update/change the value of the state variable._
 
**I bet that funky array declaration syntax is making a little more sense now, right?** 🤔



> .. One crucial piece of information I cannot forget to mention, is where to declare `useState`! The useState declaration must be at the top most level of a function component, prior to the "return".
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v0s803pcbhhgy5e55pfq.png)


`(continuing the code from the example snip above)` - _let's see the setter function in action!_
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t02v5fnismsgkwh21w7u.png)

> Here we have a function called "handleClick" - with just a little logical thinking and coding knowledge, we can assume that this function refers to the click of a 'button' UI element.

>> Upon clicking said button, the "handleClick" function, will return the 'setter function' for updating the value of the state variable. Provided with a new designated 'state' value passed into the setter function (encapsulated in the parenthesis)...

>>> Now with the click of the button element, `useState` does its thing, and re-renders the component onto the DOM with the new/updated state value for the variable "name".


   = = = = = = = = = = = = = = = = = = = = = = = = = = = =


State can pertain to a single component, or can be declared and held in one parent component, that returns multiple child components - in which state, and useState can be passed down as props. In doing so we can access, utilize and update state via child components. This gives us the option to re-render these different components/UI elements based off the original state and the ability to change the value/functionality within a child component individually.