Introduction
React Re-rendering means React checks a component again when its state, props, context, or another subscribed value changes. Re-rendering does not always mean that the entire DOM is recreated. React compares the new result with the previous one and updates only what is necessary. Understanding re-rendering helps developers write better React applications and avoid unnecessary performance problems. In this chapter, we will solve practical questions about React re-rendering. React js Re-rendering practice questions with solutions help to build concepts.
1. What is Re-rendering in React?
Answer:
Re-rendering means React calls a component again to calculate what its UI should look like based on the latest state, props, or other inputs.
For example:
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<h2>Count: {count}</h2>
<button onClick={() => setCount(count + 1)}>
Increase
</button>
</div>
);
}
export default Counter;
When count changes, React re-renders the Counter component and updates the UI where necessary.
Re-rendering does not mean that React completely rebuilds the browser DOM every time.
2. What Causes a Component to Re-render?
Answer:
Common causes include:
- Its state is updated.
- Its parent component renders again.
- Its props change.
- A context value it uses changes.
- A subscribed external store or other reactive source changes.
Example:
import { useState } from "react";
function App() {
const [count, setCount] = useState(0);
return (
<div>
<h2>{count}</h2>
<button onClick={() => setCount(count + 1)}>
Increase
</button>
</div>
);
}
Here, updating count causes App to render again.
3. Does a Parent Re-render Cause a Child to Re-render?
Answer:
Normally, when a parent component renders, React also evaluates its child components as part of the rendering process.
Example:
function Child() {
console.log("Child rendered");
return <h2>Hello</h2>;
}
function Parent() {
const [count, setCount] = useState(0);
console.log("Parent rendered");
return (
<div>
<button onClick={() => setCount(count + 1)}>
Increase
</button>
<Child />
</div>
);
}
When count changes, Parent renders again and Child may also be rendered again.
However, React.memo can allow React to skip re-rendering a child when its props have not changed.
const Child = React.memo(function Child() {
console.log("Child rendered");
return <h2>Hello</h2>;
});
So, parent re-rendering and child re-rendering are related, but memoization can change this behavior.
4. Does Updating State Cause Re-rendering?
Answer:
Yes, updating state can cause the component that owns that state to render again.
Example:
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
console.log("Counter rendered");
return (
<div>
<h2>{count}</h2>
<button onClick={() => setCount(count + 1)}>
Increase
</button>
</div>
);
}
When the button is clicked:
setCount(count + 1);
React schedules the state update and renders the component with the new state.
Remember that React state updates are scheduled, so you should not assume that the state variable changes immediately within the same function call.
5. What Happens If We Set State to the Same Value?
Answer:
React can skip an update when the new state value is the same as the current value according to Object.is.
Example:
import { useState } from "react";
function App() {
const [count, setCount] = useState(10);
return (
<div>
<h2>{count}</h2>
<button onClick={() => setCount(10)}>
Set 10
</button>
</div>
);
}
If the current state is already:
10
and we call:
setCount(10);
React can skip the resulting update because the value has not changed.
For objects and arrays, reference identity matters.
const user = { name: "Rahul" };
Creating another object with the same contents does not make it the same reference:
const newUser = { name: "Rahul" };
console.log(Object.is(user, newUser)); // false
This is important when working with React state and memoized components.
6. Can Changing Props Cause a Component to Re-render?
Answer:
Yes. When a parent passes different props to a child, React may render the child with the new values.
Example:
function Child({ name }) {
console.log("Child rendered");
return <h2>Hello {name}</h2>;
}
function Parent() {
const [name, setName] = useState("Rahul");
return (
<div>
<button onClick={() => setName("Aman")}>
Change Name
</button>
<Child name={name} />
</div>
);
}
Initially:
Hello Rahul
After clicking the button:
Hello Aman
The child receives a new name prop and renders with the updated value.
7. How Does React.memo Help With Re-rendering?
Answer:
React.memo can skip re-rendering a component when its props are unchanged.
Example:
import { memo, useState } from "react";
const Child = memo(function Child({ name }) {
console.log("Child rendered");
return <h2>{name}</h2>;
});
function Parent() {
const [count, setCount] = useState(0);
return (
<div>
<button onClick={() => setCount(count + 1)}>
Count: {count}
</button>
<Child name="Rahul" />
</div>
);
}
Here, the parent state changes, but the name prop remains the same.
Because the child is wrapped with memo, React can skip the child render when its props are unchanged.
However, React.memo is a performance optimization, not something that should automatically be added to every component.
8. How Does Context Affect Re-rendering?
Answer:
A component that uses a context subscribes to that context. When the context value it reads changes, the component can re-render.
Example:
import { createContext, useContext, useState } from "react";
const UserContext = createContext(null);
function Profile() {
const user = useContext(UserContext);
return <h2>{user.name}</h2>;
}
function App() {
const [user, setUser] = useState({
name: "Rahul"
});
return (
<UserContext.Provider value={user}>
<Profile />
<button
onClick={() => setUser({ name: "Aman" })}
>
Change User
</button>
</UserContext.Provider>
);
}
When the context value changes:
setUser({ name: "Aman" });
the component consuming that context can re-render.
Context is useful for avoiding prop drilling, but changing context values can also affect the components that consume them.
9. Why Can Object or Function Props Cause Extra Re-rendering?
Answer:
Objects, arrays, and functions are compared by reference.
Consider:
import { memo, useState } from "react";
const Child = memo(function Child({ user }) {
console.log("Child rendered");
return <h2>{user.name}</h2>;
});
function Parent() {
const [count, setCount] = useState(0);
const user = {
name: "Rahul"
};
return (
<div>
<button onClick={() => setCount(count + 1)}>
Increase
</button>
<Child user={user} />
</div>
);
}
Every time Parent renders, this creates a new object:
const user = {
name: "Rahul"
};
Even though the contents are the same, the object reference is different.
Therefore, React.memo may not skip the child render.
A similar issue can happen with functions:
<Child onClick={() => console.log("Hello")} />
A new function is created during each render.
When necessary, useMemo or useCallback can help stabilize object or function references, but they should be used based on an actual performance need.
10. Create a Practical Example to Understand Parent and Child Re-rendering
Answer:
The following example uses React.memo and useCallback to demonstrate how unnecessary child rendering can sometimes be avoided.
import { memo, useCallback, useState } from "react";
const Child = memo(function Child({ onMessage }) {
console.log("Child rendered");
return (
<div>
<h3>Child Component</h3>
<button onClick={onMessage}>
Show Message
</button>
</div>
);
});
function Parent() {
const [count, setCount] = useState(0);
const handleMessage = useCallback(() => {
alert("Hello from Parent");
}, []);
console.log("Parent rendered");
return (
<div>
<h2>Count: {count}</h2>
<button onClick={() => setCount(count + 1)}>
Increase
</button>
<Child onMessage={handleMessage} />
</div>
);
}
export default Parent;
How this works:
- Clicking Increase updates the parent’s
count. - The
Parentcomponent renders again. handleMessagekeeps the same function reference because ofuseCallback.Childis wrapped withReact.memo.- Since the child’s
onMessageprop has not changed, React can skip rendering the child.
This is a common pattern when a frequently-rendering parent passes callbacks to memoized child components.
However, optimization should be measured and applied where it provides a real benefit.
Key Takeaways
- Re-rendering means React evaluates a component again to determine the latest UI.
- State updates can cause a component to re-render.
- Parent rendering can cause child components to be evaluated again.
- Changed props can cause a child to render with new values.
React.memocan skip a child render when its props are unchanged.- Objects, arrays, and functions are compared by reference.
useCallbackcan stabilize function references.useMemocan stabilize calculated values when appropriate.- Context updates can cause consuming components to re-render.
- Same state values can allow React to skip an update using
Object.is. - Re-rendering does not mean React recreates the entire browser DOM.
- Performance optimizations should be based on actual bottlenecks.
FAQs
1. What is React re-rendering?
React re-rendering means React evaluates a component again after relevant data such as state, props, context, or another subscribed value changes. React Re-render is used for state, props and etc.
2. Does every state update cause a re-render?
A state update can cause a render, but React may skip an update when the new state is considered equal to the current state.
3. Does a parent re-render always mean every child must re-render?
Not necessarily. Without memoization, child components may be rendered again as part of the parent’s rendering. React.memo can allow React to skip a child when its props are unchanged.
4. Does React re-render the entire DOM?
No. React calculates the new UI and updates the necessary parts of the DOM rather than blindly recreating the entire DOM.
5. Why does React.memo sometimes not prevent re-rendering?
If props such as objects, arrays, or functions receive new references, React.memo can consider those props changed even when their contents look the same.
6. Can useCallback stop all re-rendering?
No. useCallback mainly helps keep a function reference stable between renders. It does not automatically prevent all component re-rendering.
7. How can I find unnecessary re-renders in React?
Use tools such as React DevTools Profiler and browser performance tools to measure rendering behavior. Then optimize the components where an actual performance problem exists.
Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.
