React | Interview Questions and Answers

1. What is React?

React is a JavaScript library for building user interfaces. It allows developers to create reusable UI components and manage the state of an application efficiently.

2. Explain JSX in React.

JSX (JavaScript XML) is a syntax extension for JavaScript used in React. It allows developers to write HTML elements and components in a syntax similar to XML or HTML. JSX gets compiled into JavaScript code that React can understand.

Example:

const element = <h1>Hello, React!</h1>;

3. What is the significance of virtual DOM in React?

The virtual DOM (Document Object Model) is a lightweight copy of the actual DOM. React uses the virtual DOM to improve performance by minimizing the number of direct manipulations to the actual DOM. It calculates the difference between the virtual DOM and the real DOM, and only updates the parts that have changed, reducing the overall computational cost.

4. Describe the component lifecycle in React.

React components go through various lifecycle phases, including mounting, updating, and unmounting. The main lifecycle methods are:

• componentDidMount: Invoked after a component is rendered for the first time.
• componentDidUpdate: Called after a component is updated (re-rendered) due to changes in props or state.
• componentWillUnmount: Invoked before a component is unmounted and destroyed.

5. What is state in React?

State is a JavaScript object that represents the current condition of a component. It influences the rendering of the component, and when the state changes, React re-renders the component. State should be treated as immutable to ensure predictable behavior.

6. Explain the difference between props and state.

• Props (Properties): Passed from parent components to child components. Props are immutable, and the child components cannot modify them.

• State: Represents the internal state of a component. It is mutable and can be changed using setState().

7. What is the purpose of the setState method in React?

The setState method is used to update the state of a React component. When setState is called, React re-renders the component, and any child components affected by the state change.

Example:

this.setState({ count: this.state.count + 1 });

8. How does React Router work?

React Router is a library for handling navigation in a React application. It uses a component-based approach, where different components are rendered based on the current URL. The <BrowserRouter> or <HashRouter> components are typically used to wrap the application and provide navigation functionality.

9. What is a Higher-Order Component (HOC) in React?

A Higher-Order Component is a function that takes a component and returns a new component with additional props, state, or behavior. HOCs are used for code reuse, logic abstraction, and adding features to components.

Example:

const withLogger = (WrappedComponent) => {
  return class WithLogger extends React.Component {
    // ... additional logic

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};

10. How does React handle forms?

In React, forms are controlled components. The form elements, such as <input>, <textarea>, and <select>, maintain their state in the component’s state. The state is updated through the onChange event, and the component is re-rendered accordingly.

Example:

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { inputValue: '' };
  }

  handleChange = (event) => {
    this.setState({ inputValue: event.target.value });
  }

  render() {
    return (
      <form>
        <input type="text" value={this.state.inputValue} onChange={this.handleChange} />
      </form>
    );
  }
}

What Next?

These are just a few examples of React interview questions. Depending on the level of expertise required, interview questions may vary from basic to advanced topics. Good luck with your React interviews!