React js State Practice Questions with Solutions

Introduction

State is one of the most important concepts in React. It allows a component to store information that can change over time. For example, a counter value, user input, selected option, or login status can be managed using state. When state changes, React can update the component’s UI to show the latest value. In this chapter, you will practice the basics of React State through 10 solved questions. React js State Practice questions with solutions help to understand the concepts.

1. What is State in React?

State is data that a React component can store and manage. Unlike normal variables, state is designed to work with React’s rendering system.

For example, a counter can store its current value in state.

import { useState } from "react";

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

  return <h2>Count: {count}</h2>;
}

export default Counter;

Here:

• count stores the current state value.
• setCount is used to update the state.
• 0 is the initial state value.

Answer: State is data managed by a React component that can change over time and cause the UI to update.

2. Why is State used in React?

State is used when a component needs to remember information that can change.

For example:

• Counter value
• Input field value
• Selected item
• Show/hide status
• Login status
• Shopping cart items

Example:

import { useState } from "react";

function Message() {
  const [message, setMessage] = useState("Hello");

  return <h2>{message}</h2>;
}

export default Message;

The component remembers the value "Hello" through state.

Answer: State is used to store changing data and keep the component’s UI synchronized with that data.

3. How do you create State in a React function component?

Modern React uses the useState Hook to create state in function components.

import { useState } from "react";

function App() {
  const [name, setName] = useState("Rahul");

  return <h2>Hello {name}</h2>;
}

export default App;

The syntax is:

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

In this example:

const [name, setName] = useState("Rahul");

• name → current state value
• setName → state update function
• "Rahul" → initial value

Answer: Use the useState Hook to create state in a React function component.

4. What is an initial state value?

The initial state value is the value given to useState() when the state is created.

Example:

import { useState } from "react";

function App() {
  const [age, setAge] = useState(20);

  return <h2>Age: {age}</h2>;
}

export default App;

Here:

useState(20)

means the initial value of age is 20.

The initial state can also be a string:

const [name, setName] = useState("Aman");

A boolean:

const [isLoggedIn, setIsLoggedIn] = useState(false);

Or an array:

const [items, setItems] = useState([]);

Answer: The initial state is the starting value provided to useState().

5. How do you update State in React?

State should be updated using its corresponding setter function.

Example:

import { useState } from "react";

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

  return (
    <div>
      <h2>{count}</h2>

      <button onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </div>
  );
}

export default Counter;

When the button is clicked:

setCount(count + 1);

updates the state.

Answer: Use the setter function returned by useState() to update state.

6. What happens when State changes?

When state changes, React schedules the component to render again so the UI can reflect the new state value.

Example:

import { useState } from "react";

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

  return (
    <div>
      <h2>Count: {count}</h2>

      <button onClick={() => setCount(count + 1)}>
        Add
      </button>
    </div>
  );
}

export default Counter;

Initially:

Count: 0

After clicking the button:

Count: 1

Clicking again:

Count: 2

React updates the displayed value based on the new state.

Answer: A state update causes React to render the component again when needed so the UI can display the updated state.

7. Can a component have multiple State values?

Yes. A component can have multiple state values.

import { useState } from "react";

function Student() {
  const [name, setName] = useState("Riya");
  const [age, setAge] = useState(20);
  const [course, setCourse] = useState("React.js");

  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
      <p>Course: {course}</p>
    </div>
  );
}

export default Student;

Here, the component has three separate state values:

• name
• age
• course

Each state has its own setter function.

Answer: Yes. A component can have multiple independent state values.

8. What is the difference between State and a normal variable?

Consider a normal variable:

function Counter() {
  let count = 0;

  return (
    <button onClick={() => count++}>
      {count}
    </button>
  );
}

Changing count does not tell React that the UI needs to update.

With state:

import { useState } from "react";

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

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

export default Counter;

React knows that the state has changed and can update the UI.

Answer: A normal variable does not provide React’s state-update and rendering behavior. State is managed by React and is intended for data that affects the component’s UI.

9. Can State store different types of data?

Yes. State can store many JavaScript data types.

String:

const [name, setName] = useState("Rahul");

Number:

const [age, setAge] = useState(21);

Boolean:

const [isVisible, setIsVisible] = useState(true);

Array:

const [items, setItems] = useState([]);

Object:

const [student, setStudent] = useState({
  name: "Priya",
  age: 20
});

Answer: Yes. React state can hold strings, numbers, booleans, arrays, objects, and other JavaScript values.

10. Build a practical Counter using React State.

Create a counter that can increase, decrease, and reset its value.

import { useState } from "react";

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

  const increase = () => {
    setCount(count + 1);
  };

  const decrease = () => {
    setCount(count - 1);
  };

  const reset = () => {
    setCount(0);
  };

  return (
    <div>
      <h2>Counter: {count}</h2>

      <button onClick={increase}>
        Increase
      </button>

      <button onClick={decrease}>
        Decrease
      </button>

      <button onClick={reset}>
        Reset
      </button>
    </div>
  );
}

export default Counter;

How it works

The initial value is:

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

The Increase button adds 1:

setCount(count + 1);

The Decrease button subtracts 1:

setCount(count - 1);

The Reset button returns the state to 0:

setCount(0);

This is a simple example of how React State can be used to manage changing data and update the UI.

Answer: useState allows the counter value to be stored and updated while React keeps the displayed value synchronized with the state.

Key Takeaways

• State stores data that can change over time.
• React function components commonly use useState to manage state.
• useState() accepts an initial value.
• The first value returned by useState is the current state.
• The second value is the setter function used to update the state.
• State can store strings, numbers, booleans, arrays, objects, and other values.
• A component can have multiple state values.
• State should be updated using its setter function.
• Changing state can cause the component to render again.
• State is useful for counters, forms, toggles, lists, user interactions, and many other dynamic UI features.

FAQs

1. What is State in React?

State is data managed by a React component that can change over time and affect the component’s UI.

2. Why is State important in React?

State allows components to remember changing information and display updated data in the UI.

3. What is useState() in React?

useState() is a React Hook used to add and manage state in function components.

4. Can React State store an array?

Yes. React State can store arrays.

const [items, setItems] = useState([]);

5. Can React State store an object?

Yes. State can store JavaScript objects.

const [user, setUser] = useState({
  name: "Rahul",
  age: 21
});

6. Can we change State directly?

State should not be directly modified. Use the setter function returned by useState() to update it.

For example:

setCount(count + 1);

7. Does changing State update the UI?

Yes. When state is updated, React can render the component again so that the UI reflects the latest state.

5. SEO Package

SEO Title: React State Practice Questions

Meta Description: React State Practice Questions with 10 solved examples to learn useState, state updates, and dynamic React components.

SEO Slug: react-state-practice-questions

Focus Keywords: React State, React State Practice Questions, React useState, State in React, React.js Practice Questions, React State Examples, React Components, Learn React State

Tags: React.js, React State, useState, React Practice Questions, React Components, JavaScript, React Hooks, React.js Tutorial

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Rishabh Kumar