React Hooks is actually a collection of functions by React. We can use functional components therefore we can convert the component to functional component. You can use React hooks feature Because React 16.8 or higher projects now are able to use hooks. Let’s have a closer look at the following example to understand the useState hooks better.

Example

In our example, We just need to create a constant name app and this will be a function that gets props and then handle a function body in Person.js. This is a normal functional component but now you can use this React Hook feature or one of the React Hooks like in the function.

import React, { useState } from 'react';

Importing { useState } from React Library

We don’t need to import {component} from React library anymore. Because we don’t extend with class methods, instead of import React, {Component} we can use {useState}.

useState is the most important React hook. It’s allow us to manage state in a functional component. you can call like normal function and you can just pass your previous initial state in the example above, we don’t need render method just return JSX useState returns an array with exactly two elements and always two elements. First element we get back will always be our current state

(useState({})-> 

Initially an object and whenever we change it or update it. Second element in state array will be always be a function that allows us to update this state such that React is aware of it and will re-render this component in line. We can also use modern JS features called array destructuring which works.

This allows you to pull element out of the array you can get back from right side of the equal sign of this function call as following.

(const [] = useState()

First element you can give const [] element any name if you want const.

[personsState]

Second element will be function that allows you to set that state, so i will name it setPersonsState

Person State will give you access to person object and personsState will replace as following.

{this.state.persons[1].name}

setPersonsState allows us to set a new state and thus we can re-add that switchHandler to our component.

Question

How do we add a method to the functional component?

You can have functions inside the functions. We can add a new This is perfectly fine for JS code. You can have function definition inside of function In JS & React. It looks strange that you don’t use that so often. But React hooks the way you use is fine like this. Now you have a functional component that can manage state and that can have other functions does the something like onClick, Which we previously called this.switchHandler, this keyword is no longer available so we are not inside of class anymore. We can just pass as following.

onClick={switchHandler} instead onClick={this.switchHandler} referring to content here const switchHandler = () => {

No parentheses because we don’t wanna execute it immediately. Only this execute the function , when you are using React Hooks the function here as following.

const [personsState, setPersonState]

Second element is array (setPersonState) does not merge whatever you pass in old state.

(setPersonsState) instead its replaces to old state. This is very important. When you ever update a state like this, you have to manually make sure you include all old state data.

This is a normal functional component that We don’t need this.setState anymore because this function doesn’t exist anymore we passed instead setPersonState. Now we just [setPersonState] and we passed our new state object.

import React, { useState } from 'react';

Here for example manually adding the other state property and then you have to access the person’s state here. This will just make sure that we copy in the old and untouched other state you can also change this as well. This is a more elegant way to do it. Just copy the useState and pass a value inside. When we click the switched name we update persons and we still have another value because that state is not touched by our call to setPersonsState which only interacts with the first useState result.

According to Reactjs.org about Hooks

Hooks are:

Completely opt-in. You can try Hooks in a few components without rewriting any existing code. But you don’t have to learn or use Hooks right now if you don’t want to.

100% backwards-compatible. Hooks don’t contain any breaking changes.

Available now. Hooks are now available with the release of v16.8.0.

There are no plans to remove classes from React. You can read more about the gradual adoption strategy for Hooks in the bottom section of this page.

Hooks don’t replace your knowledge of React concepts. Instead, Hooks provide a more direct API to the React concepts you already know: props, state, context, refs, and lifecycle. As we will show later, Hooks also offer a new powerful way to combine them.

Summary

React hooks is all about these use something functions with useState being most important, that allows you to add functionally to functional components. As you see in the example useState allow us add state management to functional components if you are using React Hooks only you don’t’ need class based componentWe will use class base components.

Software Engineer | Ruby on Rails | JavaScript | HTML5 | CSS | PostgreSQL | React | Redux