How to start to use Hooks on React? UseState for the start!

Hooks? What the heck?

Hooks are just functions wrote in JavaScript and add to React Library. Simple like that!

React provides a few build-in Hooks like ‘useState’, but you can make your own Hooks! Pretty awesome!

Hooks made your developer life easier because hooks let you use a function instead of Hooks let you always use a function instead of having to consistently switch between functions, classes, higher-order components and render props.

I will show you how to use the simplest one Hook ‘useState’. It is the same as state in a class component. I believe that example let you understand the topic.

First, we need to import the hook from the react, like below

import React, { useState } from ‘react’

Now we need to assign the hook by variable start:

const [start, setStart] = useState(0)

You can see that the start value of the hook is 0.

For comparing, please see below how that part of the code would look like if we will use the state as we did in class component

state = {
start: 0,
}

changeState = () => {
this.setState({ start:1})
}

Hope it helps you understand your first Hook! I explain other Hooks in next posts!

Happy coding!