useState - don't get Hooked 🪝

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 import the Hook of choice from the React library.

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

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)

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.

It is good practice to name the "setter function" variable after the state variable, using the term "set".
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".

(continuing the code from the example snip above) - let's see the setter function in action!

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.