React Interview Questions and Answers - Part 1

Frequently asked React Interview Questions and Answers for freshers as well as experienced developers.

React Interview Questions

• React Interview Questions and Answers – Part 1 (You are here…)
• React Interview Questions and Answers – Part 2
• React Interview Questions and Answers – Part 3
• React Interview Questions and Answers – Part 4

List of React Interview Questions and Answers

1. What is React?
2. What are the features of React?
3. What are the major advantages of React?
4. What is JSX?
5. How to create components in React?
6. When to use a Class Component and Functional Component?
7. What are Pure Components in React?
8. What is a State in React and how is it used?
9. What are props in React?
10. What is the difference between state and props in React?

1. What is React?

• React is open-source frontend JavaScript library which is used to build user interfaces and handle the view layer for web & mobile applications.
• It follows a component-based approach.
• It was developed by Facebook.

2. What are the features of React?

• It uses Virtual DOM instead of Real DOM considering that Real DOM manipulations are expensive.
• Supports server-side rendering.
• Follows Unidirectional data flow or data binding.

3. What are the major advantages of React?

• Uses reusable/composable UI components to develop the view.
• Increases the application's performance.
• Can be used on the client as well as server side.
• Readability is improved.
• Easy to integrate.
• Easy to write UI test cases.

4. What is JSX?

• JSX stands for JavaScript XML (like a syntax extension to ECMAScript).
• Utilizes the expressiveness of JavaScript with a HTML - like template syntax.
• Makes HTML easy to understand.
• It is Robust.
• Boosts up the JS performance.
• JSX expression must have only one outermost element.

In the following example, the text inside the `<h1>` tag is returned as a JavaScript function to the render function.

class App extends React.Component {
  render() {
    return (
      <h1>{'Hello World!'}</h1>
    )
  }
}

5. How to create components in React?

There are two different types of the component.

• Functional Component: This is the simplest way to create a component. Those are pure JavaScript functions that accept props object as first parameter and return React elements.

function Greeting({ message }) {
  return <h1>{`Hello, ${message}`}</h1>
}

• Class Component: You can also use ES6 class to define a component. The above functional component can be written as.

class Greeting extends React.Component {
  render() {
    return <h1>{`Hello, ${this.props.message}`}</h1>
  }
}

Refer to this link for multiple components: Create React Application using Multiple Components

6. When to use a Class Component and Functional Component?

If the component needs state or lifecycle methods then use the class component, otherwise use the functional component. However, from React 16.8 with the addition of Hooks, you could use state, lifecycle methods and other features that were only available in the class component right in your function component.

7. What are Pure Components in React?

The `React.PureComponent` is exactly the same as `React.Component` except that it handles the `shouldComponentUpdate()` method for you. When props or state change, `PureComponent` will do a shallow comparison on both props and state. Component on the other hand won't compare current props and state to next out of the box. Thus, the component will re-render by default whenever shouldComponentUpdate is called.

8. What is a State in React and how is it used?

• State of a component is an object that holds some information that may change over the lifetime of the component.
• Heart of React components
• Must be kept as simple as possible
• It determines components rendering & behaviour
• We can create interactive & dynamic components using React state.
• Can be accessed via `this.state`.
• Can be updated using `this.setState()`.

Refer to this link: State in React JS

9. What are props in React?

Props mean properties, which is a way of passing data from parent to child. In other words, the props are just a communication channel between components. They are data passed down from a parent component to a child component.

Refer to this link: Props in React JS

10. What is the difference between state and props in React?

Use:
State – Holds information about the components
Props – Allows to pass data from one component to other components as an argument

Mutability:
State – Is mutable
Props – Are immutable

Read-Only:
State – Can be changed
Props – Are read-only

Child components:
State – Child components cannot access
Props – Child component can access

Stateless components:
State – Cannot have state
Props – Can have props

That’s it for today.
Thank you for reading. Happy Coding..!! 🙂