Which of the following scenarios will trigger a re-render in React? JavaScript const App = () => { const [count, setCount] = React.useState(0); const handleClick = () => setCount(count + 1); return ( <div> <button onClick={handleClick}>Increment</button> <p>{count}</p> </div> ); };

When the setCount function is called.

Both when the state changes and when setCount is called.

What will be the output of the following React code snippet? JavaScript const MyComponent = () => { const [count, setCount] = React.useState(0); return <button onClick={() => setCount(count + 1)}>{count}</button>; };

A button that increments count every time it is clicked

A static button showing count as 0

A button that displays "undefined"

Full Stack Dev CourseExplore

Working of React

Last Updated :

Discuss

Comments

Question 1

How does React update the UI when a state change occurs?

A
It reloads the whole page
B
It re-renders the components affected by the state change
C
It triggers a complete re-render of the application
D
It does not update the UI on state change

Question 2

During reconciliation, how does React decide if a component should be updated, replaced, or left unchanged?

A
By comparing props only
B
By checking the component's state
C
By comparing old and new virtual DOM using keys and element types
D
By using the real DOM

Question 3

What happens if you try to return multiple JSX elements without a parent wrapper?

A
React wraps them in a div
B
Compilation error
C
Only the last element renders
D
React ignores extra elements

Question 4

What happens when you call this.setState() in React?

A
The component is immediately re-rendered
B
React schedules an update to the component’s state
C
It only updates the virtual DOM
D
It reloads the whole application

Question 5

Which of the following JSX expressions is valid?

A
<button disabled={false && "true"}>Click me</button>
B
<button disabled={false && true}>Click me</button>
C
<button disabled={true && "false"}>Click me</button>
D
<button disabled={"false && true"}>Click me</button>

Question 6

Why should you use stable key values in lists during reconciliation?

A
To improve SEO
B
To allow CSS styling
C
To avoid unnecessary re-renders and DOM manipulations
D
To enable default props

Question 7

How does React’s reconciliation process minimize the number of renders?

A
By using state only when absolutely necessary
B
By updating only the parts of the DOM that have changed
C
By delaying all state changes until after rendering
D
By not allowing multiple state changes in one render cycle

Question 8

Which of the following scenarios will trigger a re-render in React?

JavaScript

const App = () => {
    const [count, setCount] = React.useState(0);
    const handleClick = () => setCount(count + 1);

    return (
        <div>
            <button onClick={handleClick}>Increment</button>
            <p>{count}</p>
        </div>
    );
};

A
When the state count changes.
B
When the setCount function is called.
C
Both when the state changes and when setCount is called.
D
Only when setCount is called.

Question 9

What does the Virtual DOM do when a state changes?

A
It updates the real DOM directly
B
It creates a new tree and compares it to the old one
C
It triggers a re-render of all components
D
It never triggers any DOM changes

Question 10

What will be the output of the following React code snippet?

JavaScript

const MyComponent = () => {
    const [count, setCount] = React.useState(0);
    return <button onClick={() => setCount(count + 1)}>{count}</button>;
};

A
A button that increments count every time it is clicked
B
A static button showing count as 0
C
A button that displays "undefined"
D
The button will never render

Tags:

Web Technologies

ReactJS

React Quiz

There are 10 questions to complete.

Take a part in the ongoing discussion