A Comprehensive Guideline to UseState In React Hooks

A Comprehensive Guideline to UseState In React Hooks

Okay. So, in this disquisition, we will have an in-detail look about React Hooks- useState and look at its various directives.

What Does React Hooks mean?

React Hooks are built-in functions that allow us to hook into React state and lifecycle from the functional(stateless) component.

From this, we can assume that using hooks, it is possible to manipulate the state of our functional component. There’s no need for converting our functional component to class component for handling react state.

Oops, there’s one more thing which should be kept in mind while working with React Hooks: Hooks can’t be used inside the class component.

Your component should be functional component if you want to access hooks.

Hooks, not only allows us to work with state but also helps us in avoiding various lifecycle methods: componentDidMount, componentDidUpdate, and componentWillUnmount. Alternatively, we’ll use useEffect: React built-in hooks. Okay, this can be said as an overview of React Hooks.

Why React to Hooks?

We all are well aware of the benefits provided by the functional component. But the only thing which used to withhold us was the absence of state and lifecycle. Boom! The obstacle is removed now.

Moreover, it’s difficult to use stateful logic amongst components. If you’re familiar with, react, then ,you might be knowing about render props and high-order component, which tries to solve the problem of attaching reusable behavior to a component. But, while using this, you have to organize your components. And this will make your code more difficult to understand. If you observe this in your React DevTools, you’ll find a “wrapper hell” of components. With Hooks, you can reuse the stateful logic without manipulating your component hierarchy.

Another perk of using Hooks can be said that it simplifies your code and component structure. Those who had worked with React would be familiar with lifecycle and of course the bugs and inconsistencies due to it. Hooks allow you to split one component into different small functional components. Because of this division, the bugs caused due to unwanted interference of unrelated logic amongst various lifecycle will be taken care of.

React Hooks which are mainly in use: UseState: Helps in manipulating state within the functional component.

UseEffect: Helps in working with lifecycle inside the functional component.

UseContext: Acquires the value returned from React.createContext and returns the current context value, which is given by the nearest context provider for that context.

Since useState will be the concern of this article so the main focus will be of using functional component with useState hooks. Okay, let’s dive into it.

Declaring state variable using useState and how does it work?

The line const [weight, setWeight] = useState(45); declares a state variable named weight and a function setWeight which allows you to update preceding state variable, here weight.

And there must be a question about the initial value of the state variable! What value will be assigned to the state before calling the function?

Look at the snippet, and you’ll find your answer. Yes! The value enclosed in curved brackets used while declaring the state variable, is denoted as the initial value of the state variable. Here the initial value, that is the first value before updating the state using the function, of weight is 45.

So, are we clear? Okay. Good! Let’s We have 45 as our initial value. After that, when we want to update the value of weight, we will use setWeight(50) - any desired value can be proceed.

passed. Easy and less complicated! isn’t it?

It’s not even mandatory that the state variable has to be an object. Although it can be, there’s no compulsion.

——————————————————————————————————————————————————————————————————————————— There’s one thing you should follow while working with useState: Declare your state variables and function related to it at the top of your functional component. Don’t call hooks inside loops, conditions or nested functions.

——————————————————————————————————————————————————————————————————————————— Now, heading towards what does useState returns us?

It returns a pair of values: the current state variable and a function that updates that particular variable.

Basic example using useState.

Here, state variable name buttonValue and function which update buttonValue is setButtonValue. As we learned before, the value within the curved bracket is said to be the initial value. Thus, Click me! Is displayed on the button. As soon as the button is clicked, setButtonValue is called.

Remember, button already had its initial value. But, now it will be updated due to the function call. Now, the value displayed on the button will be Thanks for clicking!

On clicking further, the value won’t be changed obviously as there is no updation in the value of the state variable.

React will maintain this state variable between re-renders.

If required, you can also call the function as a regular function rather than using an inline arrow function.

Now, get your hands on React Hooks and start exploring a new version of React.js.To know more about reactjs development services get in touch with our experts at solutions@bacancytechnology.com

Click to connect with best in class React.JS Developers