JavaScript React Interview Questions: A Comprehensive Guide

React is a widely-used JavaScript library for building dynamic user interfaces. Whether you’re preparing for your first React interview or looking to brush up on your skills, this guide will help you tackle common questions and concepts.

1. Introduction to React

What is React?

React, developed by Facebook, is a JavaScript library for creating user interfaces. It follows a component-based architecture, allowing developers to build reusable UI components.

Why Use React?

• Component-Based: Breaks UI into reusable components.
• Declarative: Describes what the UI should look like, not how to change it.
• Virtual DOM: Optimizes rendering performance.

2. Core Concepts

JSX

JSX (JavaScript XML) allows you to write HTML in JavaScript. It’s not mandatory but makes code more readable.

Example: Functional Component with JSX

function HelloWorld() {
  return <h1>Hello, World!</h1>;
}

Components

React has two types of components: Functional and Class Components.

Functional Component

const Greeting = () => {
  return <p>Hello!</p>;
};

Class Component

import React from 'react';

class Greeting extends React.Component {
  render() {
    return <p>Hello!</p>;
  }
}

State and Props

• State: Managed within a component using useState.
• Props: Passed from parent to child components.

Example: Using State

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

3. State Management

useState

Manages component state. Example above demonstrates its usage.

Context API

For state that needs to be accessed across multiple components.

Example: Creating a Context

import React from 'react';

const UserContext = React.createContext();

export const UserProvider = UserContext.Provider;
export const useUser = () => React.useContext(UserContext);

Redux

A state management library for complex applications.

Example: Redux Action

const increment = () => {
  return {
    type: 'INCREMENT'
  };
};

4. Lifecycle Methods

Mounting

• constructor()
• render()
• componentDidMount()

Updating

• componentWillReceiveProps()
• shouldComponentUpdate()
• componentDidUpdate()

Unmounting

• componentWillUnmount()

Example: componentDidMount

componentDidMount() {
  console.log('Component mounted');
}

5. Best Practices

Use Hooks

Prefer useState, useEffect, etc., over class components for simpler code.

Avoid Unnecessary Re-renders

Use React.memo for functional components and shouldComponentUpdate for class components.

Optimize Performance

Use useCallback for memoizing functions and useMemo for expensive calculations.

6. Frequently Asked Questions

Q: What is the difference between state and props?

• State: Managed within a component.
• Props: Passed from parent to child.

Q: How do you handle form submission in React?

Use controlled components where form data is managed by component state.

Example: Form Handling

function LoginForm() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log({ username, password });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button type="submit">Login</button>
    </form>
  );
}

Q: What is the Virtual DOM?

A lightweight copy of the real DOM that React uses to optimize updates.

Q: How do you optimize React performance?

• Use React.memo or shouldComponentUpdate.
• Use useCallback and useMemo.
• Avoid unnecessary re-renders.

7. Conclusion

Mastering React requires understanding its core concepts, components, and best practices. By practicing these questions and examples, you’ll be well-prepared for your next React interview. Remember, hands-on experience and continuous learning are key to success!

Good luck on your React journey!