In this blog, I will share how to manage a state using React hooks inside Reactjs applications which can be used to track the state inside multiple components to render the UI in the browser.

First, we will understand what are react hooks and what is state management in ReactJS.

Hooks:

Hooks are nothing but functions that give access to the state and other life cycle methods (Mounting, Updating and Unmounting) within functional components.

Hooks can be created as custom functions depending on the project requirements. The most commonly used hooks are useState, useEffect and useRef. To understand state management, I will describe useState with a few practical examples.

Let's understand what exactly is state management and how it is used in reactjs applications.

State Management:

First, let's understand why we need a state to store the data.

We are using functional components in React applications. Functional components are nothing but plain Javascript functions. We cannot store the data in the local state as the function will be evaluated each time when we render the UI. To maintain the state inside of the functional component, we need useState() hook.

A state is nothing but an object that holds some data in class-based components. In functional components, It can store any type of value. Whenever the state changes, the component will re-render in the UI.

useState always returns an array, where the first element is the state variable and the second element is a function to update the value of the state variable.

Declaring a state in react:

useState needs to be imported from react as :

Import {useState} from 'react';

const[state, setState] = useState(0);

Updating a state in react:

Let's take an example to update the value of a text box -

const [textmessage, setTextmessage] = useState(''");

return

(

<div> <input type="text"

value={textmessage}

placeholder="Enter a message"

onChange={e => setTextmessage(e.target.value)}

/>

<p> {textmessage} </p>

</div>

)

Rules for using useState Hook:

1. Hooks can only be called at the top level i.e., we cannot call the use state Hook inside of a loop or a condition. When the useState gets executed, first it reads the current state value and then the variable value is changed and it points to the next hook.

2. React always return an array with the initialState and function to update the value of the variable.

3. Whenever we need to update the state, react will send the update state operation to a queue. Then the component state changes and it re-renders the UI by calling the component.

4. If we use the value which is present in the current State variable, it won't trigger the re-rendering of UI.

Conclusion

useState is a hook to use state variables with functional components. It returns an array with initialState and a function to update the value of the state variable.

In conclusion, by using useState with react hooks, we can write less code with more flexibility for tracking a state when compared to class-based components.

In the next blog, we will understand how to use useState with more complex data types such as arrays, objects and functions.

You can follow me on LinkedIn for more insights and tips!