Over 10 years we help companies reach their financial and branding goals. Engitech is a values-driven technology agency dedicated.

Gallery

Contacts

411 University St, Seattle, USA

engitech@oceanthemes.net

+1 -800-456-478-23

Getting Started with Effective State Management with React Hooks

— For Beginners

In this Blog, we will mainly focus on the important concept of State and Hooks and how State Management can be achieved using React Hooks.

State Management with React Hooks

State Management with React Hooks

 Before jumping into State Management, let’s first understand What is a State in React

Introduction to State in React

State in react allows us to change the data in an app. It is an object, in which we give key-value pairs for the different types of data that we want the app to track. 

Over time, a component’s state may change, each time it re-renders. The rendering and behavior of the component are controlled by the changes to the state, which might occur in reaction to user input or system-generated events. 

How do we Define, Use, and Modify the State Object?

Initializing State

First, the state object is initialized in the constructor as follows:

 

this.state = {name: “Alex”}

Changing State

For changing the state, we get a setState function from react that allows us to update the value of the state.

 

setState(updater, [callback])

 

State updation

State Management with React Hooks

Example:

class Keyboard extends React.Component {

 constructor(props) {

   super(props);

 

   // Defining States

   this.state = {

     brand: “A4Tech”,

     color: “Black”,

     model: “KK-3 Keyboard”,

     available: true,

     price: “20$”

   };

 }

 

 // Updating the State

 changeAvailabiliy = () => {

   this.setState({available: !this.state.available});

 }

 render() {

   return (

     <div>

       <h1>Keyboard On Sale!</h1>

 

       /* Using States */

       <p>

         A {this.state.color} colored

         {this.state.brand}-

         {this.state.model}.

       </p>

       <p>Price: {this.state.price}</p>

       <p>{this.state.available ? “Available” : “Unavailable”}</p>

       <button

         type=“button”

         onClick={this.changeAvailabiliy}

       >Change Availability</button>

     </div>

   );

 }

}

So, whenever we want to change any state, we will update the state of that key and the component will re-render with the updated state.

 

Now that we have an understanding of State in React, let’s grab the concepts of React Hooks and how they help us in State Management.

 

Introduction to React Hooks?

The most interesting feature of Hooks introduced by React after v16.8. The good thing about Hooks is that they let us use the state and other features of React in a functional component without even writing a class

 

State Management with React Hooks

React-hocks

React Hook

Now, let’s see 3 important rules for hooks to remember:

  • Hooks can only be called inside React functional components.

  • Hooks can only be called at the top level of a component.

  • Hooks cannot be conditional

don't-break-the-rules

Don’t break the rules  

Don’t break the rules, right? Now let’s grab the process of state management with React Hooks.

 

State Management with React Hooks

React offers multiple Hooks for State Management. We will learn how to set state using the useState and useEffect hooks.

 

react-usestate-v2

React useState and useEffect Hooks.

Using useState Hook

The React useState Hook allows us to track state in a function component. We have another hook used in place of useState hook i.e useReducer hook, but there is a slight difference between both.

The useState hook is effective when we set any value without referencing the current state, whereas useReducer is helpful when we need to reference a prior value or when we have several actions that call for complicated data manipulations.

 

import { useState } from “react”;

Then, we initialize it by calling useState in the function component. It accepts the initial state and returns 2 values: 

  1. The current state.

  2. A function that updates the state. 

import { useState } from “react”;

function myAge() {

 const [age, setAge] = useState(1);

}

 

To read the state, we can now include our state anywhere in the component.

 

function MyAge() {

 const [age, setAge] = useState(1);

 return <h1>I am {age}y Old!</h1>

}

const root = ReactDOM.createRoot(document.getElementById(‘root’));

root.render(<My Age/>);

 

We use state updater function to update our state

 

function MyAge() {

 const [age, setAge] = useState(1);

 return (

   <>

    <h1>I am {age}y Old!</h1>

     <button

       type=”button”

       onClick={() => setAge(21)}

     >21</button>

   </>

 )

}

Using useEffect Hook

We use useEffect Hook to perform side effects in the components. A few examples of these side effects are:

  • directly updating the DOM

  • fetching data

  • timers etc.

Using useState Hook

We use useEffect Hook to perform side effects in the components. A few examples of these side effects are:

  • directly updating the DOM

  • fetching data

  • timers etc.

Method:

useEffect accepts 2 arguments:

  • The 1st argument will accept the function.

  • The 2nd argument is optional for the dependency.

useEffect(<function>, <dependency>)

useEffect runs on every render. We should include the second parameter always if we want to render it with some dependency.

We first need to import it into our component.

import { useState, useEffect } from “react”;

There are 3 ways to use the useEffect hook.

 

 
  • No dependency passed:

When we will pass no parameter in the second argument, then the code inside the useEffect will run on every render.

useEffect(() => {

 //Runs on every render

});

 

  • An empty array:

When we will pass an empty array in the second argument, then the code inside the useEffect will run only on the first render.

useEffect(() => {

 //Runs only on the first render

}, []);

 

  • Props or state values:

When we will pass any dependency in the second argument, then the code inside the useEffect will run on the first render and every state change of that dependency.

useEffect(() => {

 //Runs on the first render

 //And any time any dependency value changes

}, [prop, state]);

 

Example:

import { useState, useEffect } from “react”;

import ReactDOM from “react-dom/client”;

 

function CurrentLevel() {

 const [level, setLevel] = useState(0);

 const [score, setScore] = useState(0);

 

 useEffect(() => {

   setScore(() => level* 2);

 }, [level]); // <– It will effect on every state change of “count”

 

 return (

   <>

     <p>Level: {level}</p>

     <button onClick={() => setLevel((l) => l+ 1)}>+</button>

     <p>Score: {score}</p>

   </>

 );

}

 

const root = ReactDOM.createRoot(document.getElementById(‘root’));

root.render(<Timer />); 

 

In the above example, we used the useState and useEffect hooks in a single function. useState hook keeps the states of level and score, while useEffect hook updates the value of the score on each level change. This is how we can manage States in React.


Conclusion

Congratulations! You have learnt the basics of State Management in React that is one of the important features to understand.States improved the performance of the app and provide ease to the developers while working with the app.

 

thankyou

In the end, I want to say a huge Thanks for reading this blog! You can explore more Hooks such as useReducer, useMemo, and useContext and more ways of state management from their official website — https://reactjs.org/docs/hooks-intro.html.

If you want to connect with us, stay tuned for our recent blogs. You can also contact us at: https://bitsol.tech/contact/

 

Happy Learning!

Recent Posts

Subscribe to get notifications for Latest Blogs