What is useState in React js?
Before we start exploring what useState is, i would like to give you a brief explanation of what React js is.
React js is a front-end library developed by Facebook engineers, this library enables developers to write clean and reusable codes.
Most companies use React js as their front-end choice, due to it`s amazing benefits.
Let`s talk about useState in React js
useState is one of the most important hooks in React js, this hook enables you to update the user interface of your application. When i say user interface i mean what your users sees.
In vanilla javascript, for you to update the user interface, you have to manipulate the DOM directly. This process will require you to target the element either by it`s ID, class name and tag name which is quite stressfull sometimes. This will make you to write much code. Like this
<button>Coding is fun</button>
document.getElementByTagname("button").innerHTML= "coding is nice";
Now let`s see how we can do this with React js and compare the both. Remember, for us to update our user inerface, we have to use the useState hook. For use to use the useState, we must import it from React js into our component. like this
import { useState } from 'react';
The useState hook has two parts, the initial state and the set function. The initial state enables us to give value to our UI, just like the name, it carrys the inital value we want to show our users.
import { useState } from 'react';
const [value, setValue] = useState("Coding is fun");
Now for us to show our user the string " Coding is fun", we must make reference to the inital state part of the useState, like this
<button>{value}</button>
But why am i adding that curly bracket? Remember that in React js we have what we call jsx, which enables us to write HTML like codes. The jsx defines the structure of our application, just like HTML does. jsx stands for javascript XTML, it is different from HTML. So for us to access our javascript code in jsx, in our case it is the initial state of our useState, we must put that code inside a curly bracket.
Now let`s talk about the set function of our useState. The set function enables us to update the string we stored inside our initial state like this
setValue("Coding is nice");
if you noticed, i implemented what we call camel case in javascript, which simply means. Making the first letter of the second word a capital letter, like this
[value, setValue];
Are you still confused about it? Ok let me create a component and a function so that you can understand better.
`
import { useState } from 'react';
const Coding = () => {
const [value, setValue] = useState("Coding is fun");
const changeBtnValue = () => {
setValue("Coding is nice");
};
return (
{value}
);
};
export default Coding;
`
I believe that you can now understand it better. Once a user clicks on that button, it will change the text inside the button from "Coding is fun" to "Coding is nice".
Wait don`t go yet, always use descriptive names when using useState, this will make your code to be more readable and easy to maintain. Happy coding!
Top comments (2)
Amazing content, keep it coming Techie.
Thanks