State re-render behavior in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What happens in React when you update a component's state using useState?

React schedules a re-render of that component. The component function runs again, and React updates the UI to reflect the new state.

intermediate

Does React re-render a component if the state value is set to the same value it already has?

No. React compares the new state with the current state using Object.is. If they are the same, React skips the re-render to improve performance.

beginner

Why should you avoid directly mutating state in React?

Direct mutation does not change the state reference, so React may not detect a change and skip re-rendering. Always use the state setter function to update state immutably.

intermediate

How does React batch multiple state updates inside event handlers?

React groups multiple state updates in event handlers into one re-render to improve performance, so the component only re-renders once after all updates.

beginner

What is the role of useEffect in relation to state changes and re-rendering?

useEffect runs after the component renders. It can react to state changes to perform side effects like fetching data or updating the DOM outside React.

What triggers a React component to re-render?

A Updating the component's state using the setter function

B Changing a variable outside the component

C Calling a function inside the component without state change

D Updating a CSS file

Only updating the component's state with the setter function triggers React to re-render that component.

If you call the state setter with the same value as current state, what happens?

A React skips the re-render

B React re-renders the component anyway

C React throws an error

D React resets the state to initial value

React compares the new and current state and skips re-render if they are the same to optimize performance.

Why is it important to avoid mutating state directly?

A It causes React to re-render twice

B React may not detect the change and skip re-render

C It makes the app slower

D It causes syntax errors

Direct mutation does not change the state reference, so React may not detect the change and skip re-rendering.

How does React handle multiple state updates inside an event handler?

A It re-renders after each update

B It ignores all but the last update

C It crashes the app

D It batches updates and re-renders once

React batches multiple state updates inside event handlers to re-render only once for better performance.

When does useEffect run in relation to state changes?

A Before the component renders

B During the render

C After the component renders

D Only on initial load

useEffect runs after the component renders and can respond to state changes to perform side effects.

Explain how React decides when to re-render a component after a state update.

Think about how React checks if the state really changed before re-rendering.

Describe how React batches multiple state updates and why this is useful.

Imagine updating your shopping list several times quickly and React only updating the screen once.