What will be the output of the following code? JavaScript class Example extends React.Component { constructor() { super(); this.state = { count: 0 }; } increment = () => { this.setState({ count: this.state.count + 1 }); }; render() { console.log(this.state.count); return <button onClick={this.increment}>Increment</button>; } }

It will log the incremented state each time the button is clicked.

It will log the initial state 0 on every render.

It will cause an error since the state cannot be updated in the render method.

Given the following class component, what will happen when the button is clicked? JavaScript class Counter extends React.Component { constructor() { super(); this.state = { count: 0 }; } increment = () => { this.setState({ count: this.state.count + 1 }); } render() { return ( <div> <p>{this.state.count}</p> <button onClick={this.increment}>Increment</button> </div> ); } }

The counter will display 0, and clicking the button will increment the count

The counter will not render anything.

The component will crash when the button is clicked.

Tutorials
Courses
Go Premium

Class Components and Lifecycle Methods

Here we will cover the Class Components and LifeCycle Methods of React

Last Updated :

Discuss

Comments

Question 1

Which lifecycle method is called before the component is mounted to the DOM?

componentDidMount()
componentWillMount()
constructor()
render()

Discuss it

Question 2

Which of the following is true about class components?

Class components cannot use state
Class components must use the render method
Class components do not support lifecycle methods
Class components are faster than functional components

Discuss it

Question 3

What will happen in this class component?

class Demo extends React.Component {

constructor(props) {

super(props);

this.state = { count: 0 };

this.setState({ count: 1 });

}

render() {

return <div>{this.state.count}</div>;

}

The component renders 1
The component renders 0
Infinite re-render loop
Error: Cannot call setState in constructor

Discuss it

Question 4

Which lifecycle method is called immediately after a component is mounted?

componentWillUnmount
componentDidUpdate
componentDidMount
getSnapshotBeforeUpdate

Discuss it

Question 5

What does componentDidUpdate lifecycle method do?

It is called when the component is unmounted
It is called when the component receives new props or state
It is called before the component mounts
It is called only once after the component is first created

Discuss it

Question 6

Which lifecycle method is called before a component is removed from the DOM?

componentWillUnmount
componentDidMount
componentDidUpdate
getSnapshotBeforeUpdate

Discuss it

Question 7

In class components, how can you initialize the state?

By using this.setState() in the constructor
By declaring state directly inside the component
By using the render method
By using the componentDidMount method

Discuss it

Question 8

What will be the output of the following code?

JavaScript

class Example extends React.Component {
    constructor() {
        super();
        this.state = { count: 0 };
    }

    increment = () => {
        this.setState({ count: this.state.count + 1 });
    };

    render() {
        console.log(this.state.count);
        return <button onClick={this.increment}>Increment</button>;
    }
}

It will log the initial state 0 on every render.
It will log the incremented state each time the button is clicked.
It will cause an error since the state cannot be updated in the render method.
It will display undefined

Discuss it

Question 9

Given the following class component, what will happen when the button is clicked?

JavaScript

class Counter extends React.Component {
    constructor() {
        super();
        this.state = { count: 0 };
    }

    increment = () => {
        this.setState({ count: this.state.count + 1 });
    }

    render() {
        return (
            <div>
                <p>{this.state.count}</p>
                <button onClick={this.increment}>Increment</button>
            </div>
        );
    }
}

The counter will display NaN
The counter will display 0, and clicking the button will increment the count
The counter will not render anything.
The component will crash when the button is clicked.

Discuss it

Question 10

What does the following code do in a class component?

JavaScript

componentDidUpdate(prevProps, prevState) {
    console.log('Component updated');
}

It logs a message only when the component is first mounted
It logs a message when the component is about to mount
It logs a message every time the component updates
It logs a message when the component is unmounted

Discuss it

Tags:

Web Technologies

ReactJS

React Native

There are 10 questions to complete.

Take a part in the ongoing discussion