loading...
Cover image for Top 20 Answers to React Interview Questions that Might Save your Life

Top 20 Answers to React Interview Questions that Might Save your Life

courseprobe profile image Course Probe ・8 min read

Tip: Your interviewers will likely start out with a question about yourself and your background to get to know you. Start out by giving them an overview of your current position or activities, then provide the most important and relevant highlights from your background that make you most qualified for the role.
React is a commonly used resource for developers working in the evolving world of business technology. It helps developers build web applications that users can interact with effectively. A strong React developer helps businesses achieve their goals by building seamless applications for end-users using JavaScript. In this article, you’ll learn about React interview questions and example answers that will help you do well at your next technical interview.

What is React?

React is a library of JavaScript components used for putting together the user interface of applications. In other words, it helps developers build the part of the application that users interact with using JavaScript. JavaScript is a coding language commonly used for developing web-based applications.

Below are some of the Most Important React Questions for you to know:

What are the advantages of using React?

It is easy to know how a component is rendered, you just need to look at the render function.

JSX makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged/combined with each other.

You can render React on the server-side. This improves SEO and performance.

It is easy to test.

You can use React with any framework you wish as it is only a view layer.

What is the difference between a Presentational component and a Container component?

Presentational components are concerned with how things look. They generally receive data and callbacks exclusively via props. These components rarely have their own state, but when they do it generally concerns UI state, as opposed to data state.

Container components are more concerned with how things work. These components provide the data and behavior to presentational or other container components. They define actions and provide these as callbacks to the presentational components. They are also often stateful as they serve as data sources.

What are the differences between a class component and functional component?

Class components allows you to use additional features such as local state and lifecycle hooks. Also, to enable your component to have direct access to your store and thus holds state.

When your component just receives props and renders them to the page, this is a ‘stateless component’, for which a pure function can be used. These are also called dumb components or presentational components.

What is the difference between state and props?

State is a data structure that starts with a default value when a Component mounts. It may be mutated across time, mostly as a result of user events.

Props (short for properties) are a Component’s configuration. They are received from above and immutable as far as the Component receiving them is concerned. A Component cannot change its props, but it is responsible for putting together the props of its child Components. Props do not have to just be data — callback functions may be passed in as props.

What are the different lifecycle methods?

componentWillMount (deprecated) - this is most commonly used for App configuration in your root component.

componentDidMount - here you want to do all the setup you couldn’t do without a DOM, and start getting all the data you need. Also if you want to set up eventListeners etc. this lifecycle hook is a good place to do that.

componentWillReceiveProps (deprecated) - this lifecyclye acts on particular prop changes to trigger state transitions.

shouldComponentUpdate - if you’re worried about wasted renders shouldComponentUpdate is a great place to improve performance as it allows you to prevent a rerender if component receives new prop. shouldComponentUpdate should always return a boolean and based on what this is will determine if the component is rerendered or not.

componentWillUpdate (deprecated) - rarely used. It can be used instead of componentWillReceiveProps on a component that also has shouldComponentUpdate (but no access to previous props).
componentDidUpdate - also commonly used to update the DOM in response to prop or state changes.

componentWillUnmount - enables you can cancel any outgoing network requests, or remove all event listeners associated with the component.

React Hooks

Hooks let you use more of React’s features without having to use classes. The first hook that you will most likely encounter is useState. useState is a Hook that lets you add React state to function components.

It returns an array with a getter and a setter. The syntax looks like const [count, setCount] = React.useState(0);. The equivalent when using a class component would be.

this.state = {
  count: 0
};

<button onClick={() => this.setState({ count: this.state.count + 1 })}>
  Increase Count
</button>

The next hook you will most likely encounter is useEffect. The Effect Hook lets you perform side effects in function components. By passing an empty array as the second argument to useEffect is equivalent to using componentDidMount. If you pass a value to the array it will only call the useEffect function when the value in the array updates.

useEffect(() => {
  // do stuff when the component mounts
}, []);

Where in a React component should you make an AJAX request?

componentDidMount is where an AJAX request should be made in a React component. This method will be executed when the component “mounts” (is added to the DOM) for the first time. This method is only executed once during the component’s life. Importantly, you can’t guarantee the AJAX request will have resolved before the component mounts. If it doesn't, that would mean that you’d be trying to setState on an unmounted component, which would not work. Making your AJAX request in componentDidMount will guarantee that there is a component to update.

What are controlled components?

In HTML, form elements such as , , and typically maintain their own state and update it based on user input. When a user submits a form the values from the aforementioned elements are sent with the form. With React it works differently.

The component containing the form will keep track of the value of the input in it's state and will re-render the component each time the callback function e.g. onChange is fired as the state will be updated. An input form element whose value is controlled by React in this way is called a "controlled component".

What are refs used for in React?

Refs are used to get reference to a DOM node or an instance of a component in React. Good examples of when to use refs are for managing focus/text selection, triggering imperative animations, or integrating with third-party DOM libraries. You should avoid using string refs and inline ref callbacks. Callback refs are advised by React.

What is a higher order component?

A higher-order component is a function that takes a component and returns a new component. HOC’s allow you to reuse code, logic and bootstrap abstraction. The most common is probably Redux’s connect function. Beyond simply sharing utility libraries and simple composition, HOCs are the best way to share behavior between React Components. If you find yourself writing a lot of code in different places that does the same thing, you may be able to refactor that code into a reusable HOC.

...

ReactJS PDF Documentation

ReactJS PDF Documentation

...

What advantages are there in using arrow functions?

Scope safety: Until arrow functions, every new function defined its own this value (a new object in the case of a constructor, undefined in strict mode function calls, the base object if the function is called as an “object method”, etc.). An arrow function does not create its own this, the this value of the enclosing execution context is used.

Compactness: Arrow functions are easier to read and write.
Clarity: When almost everything is an arrow function, any regular function immediately sticks out for defining the scope. A developer can always look up the next-higher function statement to see what the Object is.

Why is it advised to pass a callback function to setState as opposed to an object?

Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state.

What is the alternative of binding this in the constructor?
You can use property initializers to correctly bind callbacks. This is enabled by default in create react app. you can use an arrow function in the callback. The problem here is that a new callback is created each time the component renders.

How would you prevent a component from rendering?

Returning null from a component’s render method means nothing will be displayed, but it does not affect the firing of the component’s lifecycle methods.

If the amount of times the component re-renders is an issue, there are two options available. Manually implementing a check in the shouldComponentUpdate lifecycle method hook.

shouldComponentUpdate(nextProps, nextState){
  // Do some check here
  return resultOFCheckAsBoolean
}

Or using React.PureComponent instead of React.Component React.PureComponent implements shouldComponentUpdate() with a shallow prop and state comparison. This enables you to avoid re-rendering the component with the same props and state.

When rendering a list what is a key and what is it’s purpose?

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity. The best way to pick a key is to use a string that uniquely identifies a list item among its siblings.

Most often you would use IDs from your data as keys. When you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort. It is not recommend to use indexes for keys if the items can reorder, as that would be slow.

What is the purpose of super(props)?

A child class constructor cannot make use of this until super() has been called. Also, ES2015 class constructors have to call super() if they are subclasses. The reason for passing props to super() is to enable you to access this.props in the constructor.

What is JSX?

JSX is a syntax extension to JavaScript and comes with the full power of JavaScript. JSX produces React “elements”. You can embed any JavaScript expression in JSX by wrapping it in curly braces. After compilation, JSX expressions become regular JavaScript objects. This means that you can use JSX inside of if statements and for loops, assign it to variables, accept it as arguments, and return it from functions:

What is equivalent of the following using React.createElement?

Question:

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
Answer:
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

What is Children?

In JSX expressions that contain both an opening tag and a closing tag, the content between those tags is passed to components automatically as a special prop: props.children.

There are a number of methods available in the React API to work with this prop. These include React.Children.map, React.Children.forEach, React.Children.count, React.Children.only, React.Children.toArray.

What is state in react?

State is similar to props, but it is private and fully controlled by the component. State is essentially an object that holds data and determines how the component renders and behaves.

Why would you eject from create-react-app?

Until you eject you are unable to configure webpack or babel presets.

What components are stateless in React?

This question might catch a developer off guard because React is generally considered as an interface builder that deals in components that have a state. React and the concept of statelessness are not things that are generally considered to go together.
However, there are some stateless components that serve a very basic function, and answering this question accurately means displaying knowledge of those components.

Example: “While most components in React have a state, stateless components are those reusable functions implemented to render DOM based on existing properties that have been provided. This has no need for an internal state because in output, it is nothing more than a pure of function compiled of properties.”

...

Front End Developer Interview Questions

Front End Developer Interview Questions

...

source: react-interview

...

Can you think of additional questions to recommend to a fellow developer going to an interview ?

Discussion

pic
Editor guide
Collapse
madza profile image
Madza

These are nice, thanks for making this list