useState

Pro Programmer

3 min read

·

Jun 22, 2025

--

Listen

Share

📌 Definition:

useState is a React Hook that lets you add state (data that changes) to functional components.

Before hooks, only class components could have state. But now, with useState, even simple function components can be dynamic.

🧠 Why Use It?

Without useState, your components can't "remember" anything. Imagine a button that increases a number when clicked — without state, it can't track the number.

👉 Think of useState as the component’s memory — it lets you store and update data in response to user actions.

🛠️ How to Use useState (with Syntax Examples)

✅ Basic Syntax:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

🧾 Explanation:

• useState(0) — the 0 is the initial value of count.
• count — the current value.
• setCount — a function that updates count.

So every time the button is clicked, we call setCount(count + 1), which tells React to re-render the component with the new value.

🧩 Real Project Use Cases

Here are some everyday examples where useState is helpful:

1. Toggle a dark/light mode => Stores if the theme is dark or light
2. Show/hide a modal => Keeps track of whether the modal is open
3. Form input handling => Stores the input value typed by the user
4. Accordion menu => Tracks which section is expanded/collapsed
5. Shopping cart items => Stores selected items and quantities

❓ Interview Questions About useState

Be prepared to answer:

1. What is useState and how does it work?

✅ Answer:

useState is a React Hook that allows you to add state (data that changes over time) to functional components.

It returns a pair:

• the current state value, and
• a function to update that state.

🧾 Example:

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

• count is the current value (starts at 0)
• setCount is the function to change it

When you call setCount(5), React re-renders the component with the new value.

2. How do you update state based on the previous value?

✅ Answer:

If the new state depends on the previous state, use a function inside setState like this:

setCount(prev => prev + 1);

This ensures you’re always working with the latest value, especially if updates happen quickly or multiple times in a row.

3. Can you store arrays or objects in state?

✅ Answer:

Yes, useState can store any data type — strings, numbers, booleans, arrays, or objects.

But when updating arrays or objects, you need to create a new copy (React does not detect changes in-place).

🧾 Example with Object:

const [user, setUser] = useState({ name: 'Ali', age: 25 });

// Updating age only
setUser(prev => ({ ...prev, age: 26 }));

🧾 Example with Array:

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

// Add new item
setItems(prev => [...prev, 'Banana']);

4. Does updating state re-render the component?

✅ Answer:

Yes. When you update state using the setter function (setCount, setUser, etc.), React will re-render the component so the UI reflects the new value.

However, if you call the setter with the same value as before, React won’t re-render (it optimizes this).

5. What happens if you call setState multiple times in a row?

✅ Answer:

React may batch multiple state updates, especially during event handlers.

If you do this:

setCount(count + 1);
setCount(count + 1);

You’ll only get an increase of 1, not 2, because both lines use the same old value.

✅ Correct way:

setCount(prev => prev + 1);
setCount(prev => prev + 1); // This increases by 2

6. What’s the difference between useState and useRef?

| Feature          | `useState`                 | `useRef`                           
| ---------------- | -------------------------- | ---------------------------------- 
| Triggers render? | ✅ Yes                     | ❌ No                               
| Use case         | Dynamic UI updates         | Storing mutable values or DOM refs 
| Example          | Counter, form input values | Focus a textbox, store timer ID    

7. What is the setter function returned by useState doing?

✅ Answer:

The setter function (like setCount) tells React:

1. Update the state, and
2. Re-render the component with the new value.

It does not update the value immediately — React schedules it and updates the component in the next render cycle.

🔚 Summary Tips for Interviews

✅ Use real examples when answering
✅ Always mention “re-render” behavior
✅ Mention how updates are asynchronous
✅ Explain the correct way to handle complex values (arrays/objects)
✅ Show that you understand React’s behavior, not just syntax