1. What is React?

React is an open-source JavaScript library created by Facebook for building user interfaces, especially single-page applications. It's component-based, declarative, and uses a Virtual DOM for efficient rendering. React focuses solely on the view layer, making it flexible to integrate with other technologies and libraries.

2. What is JSX?

JSX (JavaScript XML) is a syntax extension for JavaScript that looks similar to HTML. It allows you to write HTML-like code in your JavaScript files, making it easier to visualize the UI you're building.

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

This JSX gets compiled to regular JavaScript:

const element = React.createElement('h1', null, 'Hello, world!');

3. What is the Virtual DOM and how does it work?

The Virtual DOM is a lightweight, in-memory representation of the real DOM. React's reconciliation process works as follows:

• Creates a virtual representation of the UI in memory
• When state changes, creates a new Virtual DOM and compares it with the previous one (diffing)
• Calculates the most efficient way to update the browser's DOM
• Performs only the necessary updates to the real DOM

This minimizes expensive DOM operations, making React applications fast and responsive.

4. What are the key features of React?

• JSX — HTML-like syntax in JavaScript
• Components — Reusable, self-contained pieces of UI
• Virtual DOM — Efficient rendering optimization
• One-way data binding — Predictable data flow
• High performance — Optimized reconciliation algorithm
• SEO friendly — Server-side rendering capability

5. What is the difference between React and Angular?

6. What are the types of React components?

Functional Components — JavaScript functions that accept props and return React elements:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Class Components — ES6 classes that extend React.Component:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Since React 16.8 with Hooks, functional components can handle state and lifecycle, making them the preferred approach.

7. What are Pure Components?

Pure Components are components that only re-render when their props or state actually change. They implement a shallow comparison of props and state in shouldComponentUpdate.

class MyComponent extends React.PureComponent {
  render() {
    return <div>{this.props.value}</div>;
  }
}

// Functional equivalent
const MyComponent = React.memo(({ value }) => {
  return <div>{value}</div>;
});

8. What is a higher-order component (HOC)?

A Higher-Order Component is a function that takes a component and returns a new component with additional props or behavior. It's a pattern for reusing component logic.

function withLoading(Component) {
  return function WithLoadingComponent({ isLoading, ...props }) {
    if (isLoading) return <div>Loading...</div>;
    return <Component {...props} />;
  };
}

const EnhancedComponent = withLoading(MyComponent);

9. What are Props in React?

Props (short for "properties") are how components receive data from their parent. They are read-only and help make components reusable.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// Usage
<Welcome name="Sara" />

10. What is the difference between props and state?

11. What is prop drilling?

Prop drilling is the process of passing props through multiple layers of components to reach a deeply nested component that needs the data. This can make code hard to maintain.

Solutions:

• Context API for global state
• State management libraries (Redux, Zustand)
• Component composition

12. What are React Hooks?

Introduced in React 16.8, Hooks allow you to use state and other React features in functional components without writing a class. They provide a more direct API to React concepts.

Basic Hooks:

• useState — Adds state to functional components
• useEffect — Performs side effects
• useContext — Subscribes to React context

13. What is the useState hook?

useState is a Hook that lets you add state to functional components. It returns an array with the current state value and a function to update it.

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

14. What is the useEffect hook?

useEffect lets you perform side effects in functional components. It combines the functionality of componentDidMount, componentDidUpdate, and componentWillUnmount.

useEffect(() => {
  // Side effect code here
  document.title = `You clicked ${count} times`;

  // Cleanup function (optional)
  return () => {
    document.title = 'React App';
  };
}, [count]); // Only re-run if count changes

15. What is the difference between useMemo and useCallback?

16. What are the rules of hooks?

• Only call Hooks at the top level — Don't call Hooks inside loops, conditions, or nested functions
• Only call Hooks from React functions — Call Hooks from React functional components or custom Hooks, not regular JavaScript functions

17. What are the lifecycle methods in React?

Class components have lifecycle methods divided into three phases:

Mounting:

• constructor()
• componentDidMount()

Updating:

• shouldComponentUpdate()
• componentDidUpdate()

Unmounting:

• componentWillUnmount()

With Hooks, useEffect replaces most lifecycle methods.

18. How do you replicate componentDidMount with useEffect?

useEffect(() => {
  // This runs once after the component mounts
  console.log('Component mounted');
}, []); // Empty dependency array

19. What is a synthetic event in React?

Synthetic events are React's cross-browser wrapper around the browser's native events. They have the same interface as native events but work identically across all browsers.

function handleClick(e) {
  e.preventDefault(); // e is a synthetic event
  console.log('The link was clicked.');
}

20. How is event handling different in React compared to HTML?

• React events are named using camelCase: onClick not onclick
• Pass functions as event handlers: onClick={handleClick} not onclick="handleClick()"
• Cannot return false to prevent default — must call e.preventDefault()

21. What is Redux?

Redux is a predictable state container for JavaScript applications. It centralizes application state and logic, making state changes predictable and traceable through a unidirectional data flow.

Core concepts:

• Store — Single source of truth for application state
• Actions — Plain objects describing what happened
• Reducers — Pure functions that specify how state changes

22. What is the Context API?

The Context API provides a way to share data that can be considered "global" for a tree of React components, without having to pass props down manually at every level.

const ThemeContext = React.createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Themed Button</button>;
}

23. What are error boundaries?

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI. They catch errors during rendering, in lifecycle methods, and in constructors.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.log(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

24. What is code-splitting in React?

Code-splitting is a technique to split your bundle into smaller chunks that can be loaded on demand. React supports code-splitting through dynamic import() and React.lazy.

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </Suspense>
  );
}

25. What is React Suspense?

Suspense lets components "wait" for something before rendering. Currently, Suspense only supports lazy loading components with React.lazy, but it will support data fetching and other async operations in the future.