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.

How can you optimize re-renders in React components to improve performance? JavaScript const MyComponent = React.memo(({ value }) => { return <p>{value}</p>; }); const ParentComponent = () => { const [count, setCount] = React.useState(0); return ( <div> <button onClick={() => setCount(count + 1)}>Increment</button> <MyComponent value={count} /> </div> ); };

React.memo will automatically prevent re-renders if value doesn't change.

React.memo does not optimize re-renders.

React.memo only works on state variables.

Re-renders will not be optimized without using useMemo

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"

Courses
Tutorials
Practice
Contests

Working of React

Here we will cover all the basic concepts of ReactJS to understand how react works behind the scenes.

Last Updated :

Discuss

Comments

Question 1

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

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

Discuss it

Question 2

What is the role of the Virtual DOM in React?

It is used to store data
It is a lightweight copy of the real DOM to optimize performance
It is a server-side representation of the DOM
It interacts directly with the real DOM

Discuss it

Question 3

Which of the following is true about React’s component lifecycle?

It has only a mounting phase
It includes phases like mounting, updating, and unmounting
The lifecycle methods are optional in class components
The component lifecycle works only on state changes

Discuss it

Question 4

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

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

Discuss it

Question 5

What is the main difference between Virtual DOM and Real DOM?

Virtual DOM is a lightweight copy of the real DOM
Real DOM is faster than the virtual DOM
Virtual DOM directly manipulates the UI
Real DOM only works with JavaScript

Discuss it

Question 6

Which of the following best explains why Virtual DOM is faster than Real DOM?

Virtual DOM avoids unnecessary updates by comparing states
Virtual DOM requires no computation for rendering
Real DOM updates directly, causing slower renders
Virtual DOM does not require the browser to update the screen

Discuss it

Question 7

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

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

Discuss it

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>
    );
};

When the state count changes.
When the setCount function is called.
Both when the state changes and when setCount is called.
Only when setCount is called.

Discuss it

Question 9

How can you optimize re-renders in React components to improve performance?

JavaScript

const MyComponent = React.memo(({ value }) => {
    return <p>{value}</p>;
});

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

React.memo will automatically prevent re-renders if value doesn't change.
React.memo does not optimize re-renders.
React.memo only works on state variables.
Re-renders will not be optimized without using useMemo

Discuss it

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 button that increments count every time it is clicked
A static button showing count as 0
A button that displays "undefined"
The button will never render

Discuss it

Tags:

Web Technologies

ReactJS

React Quiz

There are 10 questions to complete.

Take a part in the ongoing discussion