Learning React 18: Getting started with State

We have been creating React components for a while now. One thing you may have noticed is that our React components only contained static data. However, you will also need to manage dynamic data on a regular basis when working with React.

We learned about props in the previous tutorial and how they pass data from main components to a child. On the other hand, the state is used to manage information or data within the components. Unlike props, status data can be changed over the life of the component.

Update of rendered elements

Let’s create a random number generator that gives us a new random number above a minimum value every two seconds. The code for the component would look like this:

Our RandomGenerator component returns two header elements enclosed within a container div. We are using props to specify the lower bound for our random number. We use setInterval() to set a new value randomNumber every two seconds.

You would probably expect this to produce a new random number to display on the webpage every two seconds. However, this does not actually happen. The element we generated from the component represents only what it would look like at a single specific point in time when it was generated.

A solution to our problem would be to re-render the element every two seconds using the following code.

As you can see in the demo, this technique works and we get a new random number at regular intervals.

Using state to update components

A problem with the code we wrote above is that our component is no longer independent. We should create encapsulated components that manage their own state and update the DOM as and when required. Also, it re-renders the entire component when the random number is generated when it should only update the header of the random number.

In this section, we will update our component to use state so that we don’t have to make a render call from outside the component to get our number.

We have created our component as a function here. In previous versions of React, to use state, you would have to convert the function component to a class. However, we can now use hooks to achieve the same functionality.

Hooks are special functions that allow you to use React features such as state within function components. There are many hooks in React, but we will only discuss them useState hook here.

Calling useState() it allows us to preserve some variables even after exiting the function. In our example, we are tracking the value of the variable randomNumber. The only topic we move on to useState() is the initial state or value of our variable. It then returns a pair of values ​​that have the current state and the function that updates the state.

We call ours setNumber() function inside setTimeout after every two seconds to get a new random number. There are a few things to note here.

It might seem counterintuitive that we are using const for our variable randomNumber here even if it is changing in value. The trick here is that the variable isn’t actually changing in value within a single function call. Every time we call setNumber() to update the value of the variable, make a call to RandomGenerator() to re-render the component. The variable randomNumber it will remain constant during each of these cycles, which is why we used it const. Also note that we are not using any assignment operator inside setNumber() to set a new value randomNumber.

You may also wonder why we didn’t use it setInterval() instead of setTimeout(). The reason is using it setInterval() will result in the creation of a new interval at each update. Using setTimeout() allows us to update once every two seconds.

Final thoughts

I hope this tutorial helped you understand how we can use state to manage dynamic data within our components in React. To practice, try updating the example above so that it keeps track of the sum of all the random numbers we’re generating.

Source link

By LocalBizWebsiteDesign

Leave a Reply

Your email address will not be published. Required fields are marked *