19 Jun Top 25 ReactJS Interview Questions and Answers

The top 25 ReactJS Interview Questions and Answers are given here. The level of questions is suitable for beginners as well advanced React developers.

Let’s begin!

Ques 1. When do we use data-prefix in React?

1. To pass date from one component to another
2. To add custom attributes
3. To add JavaScript expression
4. To initiate the component’s properties

Ques 2. How props are sent into the component in React?

1. Props are sent into the component as attributes
2. Props are sent into the component as objects
3. Send using super()
4. Send props as a JavaScript Expression

Ques 3. The component’s name in React always begins with:

1. Lowercase letter
2. Uppercase letter

Ques 4. How to specify string literals as attributes in React?

1. const element = <div tabIndex=’20’></div>;
2. const element = <div tabIndex=”20″></div>;
3. setState({tabIndex: “20”})
4. setState({tabIndex: ‘20’})

Ques 5.  Is it a good approach to insert some of the components in separate files?

1. TRUE: It helps in code re-usability.
2. FALSE: It won’t be of much use later on.

Ques 6. Will this re-render the component in React?

1. TRUE
2. False

Explanation:
To re-render a component in React, use setState():

Ques 7.  Which method is used to update the state of the component?

1. render()
2. componentDidUpdate()
3. setState() method
4. componentWillUpdate()

Ques 8. What are the phases in the React Lifecycle of Components?

1. Phase I: Mount, Phase2: Receive Props, Phase 3: Unmount
2. Phase I: Mount, Phase2: Render, Phase3: Update, Phase: Unmount
3. Phase I: Mount, Phase2: Update, Phase 3: Unmount
4. Phase I: Mount, Phase2: Update, Phase 3: Unmount

Ques 9. JSX converts

1. HTML tags into react elements
2. JavaScript into HTML
3. XML into react elements
4. JavaScript into react elements

Ques 10. With JSX, expressions can be written inside __ ?

1. angle brackets <>
2. double quotes
3. single quotes
4. curly braces { }

Ques 11. Consider the following program and predict the output:

1. ) Rank 1 of cricketer amit
2. ) Rank 1 of cricketer david

The answer is (1) since the getDerivedStateFromProps method gets called right before the render method and display amit.

Ques 12.  For integration with other JavaScript frameworks, what is used in React?

1. componentDidMount
2. componentWillMount
3. componentWillUpdate
4. componentWillReceiveProps

Ques 13. If JSX is not necessary to use, then why it is still considered in React? Select any of the options supporting the statement:

1. Useful since it converts HTML tags into react elements
2. Performs optimization and is also type safe
3. We can use custom attributes
4. Since JavaScript expressions can be used inside of JSX

Ques 14. Are React Props read-only?

1. TRUE
2. FALSE

Ques 15. While sending a variable to a component in React, where it should be placed? Select the immediate answer.

1. Inside angle brackets
2. Wrap it in HTML
3. Pass it through document.getElementById()
4. Inside curly brackets

Ques 16. The _______ method is called when a component gets updated

1. shouldComponentUpdate()
2. render() method
3. getDerivedStateFromProps()
4. constructor()

Ques 17. A component doesn’t get updated when there is a change in the component’s state or props?

1. TRUE
2. FALSE

Explanation:
Under React Lifecycle, the 1^st phase is Mounting and the 2^nd is Updating. A component gets updated whenever there is a change in the component’s state or props. Following are the methods that is called when a component is updated: getDerivedStateFromProps(), shouldComponentUpdate(), render(), getSnapshotBeforeUpdate(), componentDidUpdate(), etc.

Ques 18. Consider the following program?

The output is as follows:

Is the above program sending a variable to a component correctly?

1. TRUE
2. FALSE

Ques 19. Predict the output of the following code.

1. ) 2525
2. ) 50

The answer is (2) since expressions are written inside curly braces { } with JSX.

Ques 20. Is the below code using JSX in React?

1. TRUE
2. FALSE

Explanation:

No, the above code isn’t using JSX. Following is the above code with JSX:

Ques 21. Consider the below code snippet. Is this the correct way to display a component in the “root” element?

1. TRUE
2. FALSE

Ques 22. A constructor() function, if present in the component, gets called when the component gets ________?

1. Updated
2. Initiated
3. Unmounted
4. All of the above

Ques 23. Why does a component require a render() method?

1. To return HTML
2. To set state
3. To call another component
4. All of the above

Ques 24. Why we cannot define setState() inside render() function?

1. The changes won’t get added to the original state
2. Since it updates the state manually.
3. setState() replaces the state
4. It will lead to an infinite loop since defining it will call the render again.

Ques 25. React batch multiple _____ calls into a single update for performance

1. bind
2. render()
3. setState()
4. forceUpdate()

---

If you find the ReactJS Interview Questions & Answers, spread the word and share the link and our website Studyopedia with others.

---

For Videos, Join Our YouTube Channel: Join Now

---

Read More:

• 100 Android Interview Questions and Answers
• Java Interview Questions and Answers
• Java Basics Interview Questions
• Java Quiz
• Android Quiz
• jQuery Quiz
• HTML5 Quiz
• CSS3 Quiz