useState For The Fast Paced Developer

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. — React Docs.

State is a set of values that controls the properties or behaviour of a component. useState is a a react API or a function or a ‘hook’ provided by the react library for managing state in our functional components.

Enough with this technical definition, Seriously, what is this useState hook and how does it work ??

Like previously I told you, useState is a function provided by the react library. So for using it in our code, we first must import it from react.

Let’s store the value of this function in a variable and log it in our console to see what we got.

• So this useState function returned us an array with first value being undefined and second value in itself is a function. The first value is Undefined because useState expects some arguments during the function call. So now if we pass anything, let’s say an integer as useState argument,

• We got the value 5 as the first element of the resulting array. This passed argument is the initial state that we want for our component and this could be anything from number to string to even a function call, anything can be passed inside useState as arguments for setting some initial value.
• Now, the second element of the resulting array, which is a function call is a very special function that we would be using for changing or ‘Mutating’ the argument passed inside the useState or for changing the state of our component.

Demonstration #1 :

In this example we would change the value of a string using the useState hook.

If you are familiar with array destructuring in es6, I have destructured or obtained the elements from that array and assigned them a new variable name.

So, I have passed the variable name as string with the initial value for the state as ‘This is the Initial State’ and named the second element i.e. the function to ‘setString’ ( This is just industry standard naming, you can name it anything you like, but I think it comes from the ‘setState’ function in react class based components).

• We will use a button change the state of our component.

• After clicking the button.

Let’s breakdown what happened here :

1. We passed the initial value of our state, stored in variable string inside of our ‘p’ tag.
2. We add a button to our UI and and give it a label of ‘Change The State’.
3. Inside our button component we passed an onClick function with takes a callback and returns our setString function.

This setString function, if you remember, is our very special function that we would use for mutating the state of our component. And it did exactly that. Inside of our setString function, we passed some argument that we want our state to change into.

— Arguments passed inside this function is the new state that we want our component to render and this too can be anything from an integer or string to even a function returning something.

Next Steps:

Now you’ve been introduced to useState hook! What’s next?

1.Follow me on GitHub where I have added more examples related to useState : https://github.com/Nimish-Prabhakar/Hooks/tree/main/src/hooks/useState

2. Go through the react provided docs for using shooks for state: https://reactjs.org/docs/hooks-state.html

3. Look into other built-in hooks! Here’s a good resource that acts a sandbox for you to test out the built-in hooks: https://react-hooks-cheatsheet.com/