Understanding State Variables and the useState Hook in React for Dynamic UIs

While learning React you might come across the terms such as state variables, useState hook and you had no idea about what state variables are in react and how it is used that you have landed on the right place.

State management is a crucial part of building dynamic and interactive user interfaces. The state variables allow you to store and update data that can be displayed on the UI. React provides a mechanism to manage the state through the useState hook.

In this blog post, we will dive deeper into the useState hook, its advantages over local variables, and how it can be used to create dynamic UIs in React. We will also look at some examples of how to use the useState hook to manage the state in functional components. So, if you are new to React or looking to expand your knowledge on state management in React, keep reading!

• Local variables vs State Variables

• useState Hook

Local variables vs State Variables

If we have local variables in react then why do we need to use state variables?

I am sure you came across this doubt at some point in learning React, well now you will know the answer.

We use state variables in react because react has no idea what's happening to your local variables. So, react won't re-render any updates happening on that variable.

Every time we want our variable in sync with the UI, we use state variables because React keeps track of state variables.

Whenever that variable is updated, the whole component rerenders, i.e. React destroys the component and re-creates it again. This is called Reconciliation and Diff Algorithm in React which happens behind the scene.

hmm...now you might ask that we use state variables to keep track of the changes done to that variable but what if we want a constant variable that won't have to change or be updated in our code then what should we use?

In such cases as above when the value of the variable doesn't change you can use normal local variables.

useState Hook:

We use useState hook in React to create state variables:

The useState hook is one of the most important and commonly used hooks in React. It allows you to add a state to functional components. This means you can now have functional components that can have dynamic behavior and respond to user interactions.

useState(); function returns an array and the first element of this array is the variable name and the second element is a set function to update the variable.

The hook is imported from the react vis named import.

Here's an example:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

In this example, useState hook is imported in from the React library. The new state variable is count and the set function is setCount, which will be used to update the count variable. In the useState hook, we have passed the initial '0' for the count variable. But, it's not mandatory to pass the initial value, you can just keep the brackets empty if you don't want any initial value.

Conclusion

In this blog post, we have discussed the concept of state variables in React and the useState hook, which is used to manage state in functional components. We have also explored the difference between local variables and state variables and the advantages of using state variables over local variables. The blog also provides an example of how to use the useState hook to create a dynamic app in React. This blog post is perfect for beginners who are new to React and looking to understand how state management works in React.

click to learn more about diff algorithm, reconciliation, and why React is fast.

KEEP LEARNING AND BUILDING!!