Top react interview questions

reactinterviewquestions

In todays tutorial we are going to cover interview questions for react,react native and redux
reactinterviewquestions
So here goes…

Q1. How do you pass data from parent to child classes in react?
Ans: The interviewer essentially wants to know whether you are familiar with concept of states and props.
So we can pass data from parent to child classes in react using props and update child classes from parent classes.
Ex.

Q2.How do you modularize code in react?
Ans: We can modularize code in react or in javascript using module.exports property.
Ex:Child component can be written in separate js file as:

It can then be called in main js as:

Q3.What are some changes in react using es2015/es6 syntax?
Instead of using the React.createClass method to define a component, we can define ES6 class that extends React.Component:

Changes have been made in lifecycle methods as well:

Property initialization and initial state variables are defined in a different manner now:

Expect some follow up questions like this

Q4.Use of arrow notation in react?
Ans:It allows to do bind the context of components properly since auto-binding is not available by default in es6.
Ex:

Q5.Use of destructuring and spread attributes in react?
We might want to pass down most of a parent component’s props to a child component, but not all of them. In combining ES6+ destructuring with JSX spread attributes, this becomes possible in the following manner:

Q6. Explain lifecycle methods of reactjs?

  • componentWillMount is executed just before rendering both on client and server-side
  • componentDidMount is executed after first render only on the client side. This is where AJAX requests and DOM or state updates should occur. It is preferable to use modules like axios or superagent for handling ajax requests
  • componentWillReceiveProps is invoked as soon as the props are received from parent class before another render is called.
  • shouldComponentUpdate returns true or false value  based on certain conditions. This will determine if component will be updated or not. This is set to true by default. If you are sure that component doesn’t need to render after state or props are updated, you can return false value.It can be used performance optimization to prevent unwanted renders.
  • componentWillUpdate is called just before rendering.
  • componentDidUpdate is called just after rendering.
  • componentWillUnmount is called after the component is unmounted from the dom. You can free allocated variables and datastructures in this method to free up memory.
reactlifecyclemethods
reactlifecyclemethods

Image source:Google Images

Share post-
About Saurabh Mhatre 70 Articles
Currently working in web and hybrid application development