State in React

Table of Contents

The state is where you store the property values that belong to the component. Changing the state will automatically invoke the render method of React DOM and re-render the component. State is comparable to props, props can use across the components, but it’s specific to the component.

The below diagram shows the State initialization and how to read & update the State value.

Syntax of useState

When React hook is required?

Let’s go through the useEffect function, because we are not going to use class components in our example, we will use a stateless functional component, to make it stateful use React hook method useEffect. This method internally call the React lifecycle method componentDIDMount to make it stateful.

In our later story we will go through the React LifeCycle methods, and then convert the same example using the class component.

Syntax of useEffect

This image provided information about the method useEffect. Read the mentioned arg1 and arg2 details.

Now see the case here, As we know useEffect method starts executed only after the initial rendering of React DOM which means the basic JSX of the component is rendered.

Get Vignesh S’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Inside useEffect an async method as WeatherData which calls an API to get the current weather, then it placed the data where ever is required in the already rendered React DOM. Let's see an example here with and without using State.

Without using State Code Pen

The problem statement is to provide the input as city name to get the current time and the temperature of the city.

API information
Sign Up and get your free API key from here

In the below example, the render method is getting called on one second time interval to render the AppContent component. Once it’s initially rendered, the useEffect method of React Hook gets called which in turn calls the WeatherData callback to trigger a weather API to get the real-time data. Finally, the data provides the city name and the temperature should get placed in the React DOM.

Without Using State

Using State Code Pen

In the previous example, we saw the render method is getting called on one second time interval. Let’s see here to avoid this call using State.

In the below example, the render method is getting called only once to render the AppContent component, during the time the State-related information getting rendered with default data.

Using State

Once it’s initially rendered, the useEffect method of React Hook gets called which in turn calls the WeatherData callback to trigger a weather API to get the real-time data. Also, we moved the setInterval time to the WeatherData method which triggers an API call at every second interval to update the state with the API response data. As we know already, whenever the state changes, the component gets re-rendered.

Output

Hope it will give a basic view of State in React & useEffect method in React Hook. Please write your questions for any doubts or corrections.

Let’s discuss the next feature of ReactJS in the next story.
Next topic: LifeCycle of React Component