Class Components and Lifecycle Methods

    Last Updated :
    Discuss
    Comments

    Question 1

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

    • componentDidMount()

    • componentWillMount()

    • constructor()

    • render()

    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

    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

    Question 4

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

    • componentWillUnmount

    • componentDidUpdate

    • componentDidMount

    • getSnapshotBeforeUpdate

    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

    Question 6

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

    • componentWillUnmount

    • componentDidMount

    • componentDidUpdate

    • getSnapshotBeforeUpdate

    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

    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

    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.

    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

    There are 10 questions to complete.

    Take a part in the ongoing discussion