Scribd
Upload
2 views37 pages

React 1

The document explains the useState and useEffect hooks in React, detailing how useState allows functional components to manage state and how useEffect enables side effects after rendering. It covers the mechanics of state management, rendering processes, and the significance of dependency arrays in useEffect. Additionally, it includes a series of interview questions ranging from beginner to advanced levels related to React state management.

Uploaded by

xeroxxwala
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views37 pages

React 1

The document explains the useState and useEffect hooks in React, detailing how useState allows functional components to manage state and how useEffect enables side effects after rendering. It covers the mechanics of state management, rendering processes, and the significance of dependency arrays in useEffect. Additionally, it includes a series of interview questions ranging from beginner to advanced levels related to React state management.

Uploaded by

xeroxxwala
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 37

Understanding useState and useEffect

What is useState?

🟢 useState is a React Hook that allows functional components to have state.

✅ Think of it like a variable in JavaScript, but when it changes, React re-renders


the component.
Explanation:

● useState is a function that lets us add state in a functional component.

● The [count, setCount] syntax means we are declaring a state variable (count) and a function
(setCount) to update it.

● Initially, count = 0, because useState(0) sets its initial value.

● When we click the button, setCount(count + 1) updates the state, and React re-renders the
component to show the new value.

● Relation to JavaScript: Just like we store values in variables using let count = 0;, here we
store it in React’s state, but React remembers its value between re-renders.
How Does useState Work?

✅ useState(initialValue) returns an array with two elements:


1⃣ The current state value
2⃣ A function to update the state
const [count, setCount] = useState(0);
count → Stores the current state value (initially 0).
setCount → Function that updates count.
What Does "Render" Mean in React?

In React, render means displaying the UI on the screen. Every time React
renders(load) a component, it converts JSX into actual HTML elements and
updates the DOM.
1⃣ What Happens During a Render?

When a component renders:

1. JSX is converted to HTML (React translates JSX into real DOM elements).

2. Virtual DOM updates (React keeps a copy of the UI in memory).


2⃣ Example: Rendering a Component

🔹 When the App component renders, React:

1. Converts <h1>Hello, World!</h1> into a real HTML element.

2. Inserts it into the real DOM.

3. Displays it on the screen.


3⃣ What Triggers a Re-Render?

A component re-renders when:

1. State changes (useState updates).

2. Props change (parent passes new data).

3. The component’s parent re-renders.


4⃣ Difference Between Initial Render & Re-Render
1⃣ What is "State" in React?

A state in React is a built-in memory of a component that stores values that can
change over time.

It is like a variable, but smarter because:

✅ It remembers its value between renders.


✅ It triggers re-rendering of the component when updated.
2⃣ How Do We Use State in React?
In React, we use the useState hook to create a state.
const [count, setCount] = useState(0);
useState(0):
● Initializes count with a value of 0.
● count is the current value of state.
● setCount is a function to update count.
Whenever setCount(newValue) is called:
● React updates the state.
● React re-renders the component to show the new value.
4⃣ What is "State Management"?

🔹 State management means controlling how and where data is stored, updated
and shared in an app.

It ensures:

✔ The right data is available in the right places.

✔ The UI updates automatically when the data changes.


Understanding useEffect in React

useEffect is a React Hook that lets you perform side effects in function
components. Side effects include:

● Fetching data from an API


● Subscribing to events
● Updating the DOM
● Managing timers (setTimeout, setInterval)
Syntax of useEffect

useEffect(() => {

// Code to run after render

return () => {

// Cleanup code (optional)

};

}, [dependencies]);
● First argument: A function that runs after the component renders.
● Second argument (dependencies array): Controls when the effect runs.
useEffect is a React Hook that lets you perform side effects in a function
component.

But what is a side effect?


In normal programming, a function should only do one thing—take an input and
return an output.
function add(a, b) {
return a + b;
}
👉 This function is pure because it only returns a value and does not affect anything
else.
But sometimes, a function needs to affect the outside world—this is called a side effect.
🔹 What is a Side Effect in React?
A side effect is any operation that affects something outside of the function's scope.

For example:

● Fetching data from an API (network request)


● Updating the DOM manually (changing title, adding event listeners)
● Using timers (setTimeout, setInterval)
● Subscribing to an event (e.g., window resize)

In programming, a side effect is an extra action that happens outside of the function itself.
First, What Happens When a Component Loads?

When a React component loads (renders for the first time):

1⃣ The component function runs (e.g., App() runs).

2⃣ It returns the JSX, which React renders on the screen.

3⃣ React remembers the state (useState values).

4⃣ If useEffect is present, React runs it AFTER rendering.


How useEffect Runs When a Component Loads

Yes, useEffect is called automatically after the component loads, but unlike state
(useState), it does NOT run during rendering.

What Does "Automatically Run" Mean in useEffect?

When we say "automatically run," it means that useEffect executes after React
renders the component. However, how many times it runs depends on the
dependency array inside useEffect.
Case 1: useEffect Without a Dependency Array (Runs on Every Render)
What Happens?

● When the page loads → useEffect runs (✅ useEffect ran! in console).

● When you click "Increase" button → useEffect runs again after every render.

● It keeps running on every update.


🔹 Case 2: useEffect With an Empty Dependency Array ([]) (Runs Only Once)

🔹 How often does it run?

👉 Only ONCE, when the component first loads.


What Happens?

● When the page loads → useEffect runs (✅ useEffect ran once! in console).

● After that, it NEVER runs again, even if the component updates.

Use Case: Fetching API data only once when the page loads.
🔹 Case 3: useEffect With a Dependency ([count]) (Runs Only When count Changes)

How often does it run?

👉 Only when count changes.


When the page loads → useEffect runs once (✅ useEffect ran because count
changed: 0).

Click "Increase" button → useEffect runs again every time count updates.

If other state changes, but count stays the same, useEffect does NOT run.
React State Interview Questions (Beginner to Advanced)

🔹 Beginner-Level Questions

1⃣ What is state in React, and how is it different from props?


2⃣ How do you update state in a functional component?
3⃣ What happens when state updates in React?
4⃣ Can we modify state directly in React? Why or why not?
5⃣ What is the initial value of state when using useState()?
6⃣ What will happen if we don't use setState but directly modify a variable inside a
component?
🔹 Intermediate-Level Questions

7⃣ What is the difference between local state and global state?


8⃣ How does React batch multiple state updates?
9⃣ What happens if we use setState inside a useEffect without dependencies?
🔟 Explain how React re-renders components when state changes.
1⃣1⃣ Can we use the same state in multiple components? If yes, how?
Advanced-Level Questions

1⃣2⃣ How does React optimize state updates with the Virtual DOM?
1⃣3⃣ What are uncontrolled and controlled components, and how does state play a
role in them?
1⃣4⃣ How do you handle deeply nested state updates in React?
1⃣5⃣ What is a state reducer, and how is it different from useState?
1⃣6⃣ What are common performance issues related to state updates, and how can
we optimize them?

You might also like