Beginner React Interview Questions – Set 1

1. What is React?

Answer: React is an open-source JavaScript library developed by Facebook for building user interfaces, particularly single-page applications (SPAs), using a component-based architecture.

2. Who developed React?

Answer: React was developed by Facebook in 2013.

3. What is JSX?

Answer: JSX (JavaScript XML) is a syntax extension that allows writing HTML-like code within JavaScript, making it easier to define component structures.

4. Can browsers read JSX directly?

Answer: No, browsers cannot read JSX directly. It must be compiled into JavaScript using tools like Babel.

5. How do you create a React component?

Answer: You can create a React component as a function or a class.

Example (Functional):

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

6. What is the difference between a functional and class component?

Answer:

• Functional Components: Simple JavaScript functions returning JSX.

• Class Components: Use ES6 classes, extend React.Component, and include lifecycle methods and render().

  Functional components are preferred in modern React using hooks.

7. What is the purpose of the render method in a class component?

Answer: The render() method returns the JSX that defines a component’s UI and must be included in class components.

8. What are props in React?

Answer: Props (short for “properties”) are read-only inputs passed from parent to child components to display dynamic data.

9. How do you pass and access props?

Answer:

Pass:

<Welcome name="Alice" />

Access (Functional):

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

10. What is state in React?

Answer: State is an object that stores dynamic data that can change over time. When updated, it triggers a re-render of the component.

11. How do you initialize state in a functional component?

Answer: Using the useState hook.

Example:

import { useState } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  return <div>{count}</div>;
}

12. How do you update state in React?

Answer: Use the setter function provided by useState.

Example:

setCount(count + 1);

13. Why should you not modify state directly?

Answer: Directly modifying state (e.g., count = count + 1) doesn’t trigger a re-render and can cause unexpected behavior.

14. What is the difference between state and props?

Answer:

• State: Mutable and managed within the component.
• Props: Immutable and passed from parent to child.

15. What is the virtual DOM?

Answer: The virtual DOM is a lightweight copy of the real DOM that React uses to efficiently update only the changed parts of the UI.

16. What is the purpose of the key prop in React?

Answer: The key prop uniquely identifies elements in a list, helping React optimize rendering and updates.

17. How do you create a list in React?

Answer:

const fruits = ['Apple', 'Banana', 'Orange'];
function List() {
  return (
    <ul>
      {fruits.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

18. What is a React Fragment?

Answer: Fragments (<></>) allow you to group multiple elements without adding extra nodes to the DOM.

19. What is a controlled component?

Answer: A form element whose value is controlled by React state, ensuring a single source of truth.

20. What is an uncontrolled component?

Answer: A component where form data is handled by the DOM instead of React state.

21. How do you handle events in React?

Answer: Use camelCase event handlers and pass functions.

Example:

function Button() {
  const handleClick = () => alert('Clicked!');
  return <button onClick={handleClick}>Click Me</button>;
}

22. What is useEffect?

Answer: A React hook used to perform side effects (e.g., fetching data, DOM manipulation, or subscriptions) in functional components.

23. Difference between useEffect and lifecycle methods?

Answer: useEffect combines the functionality of lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount.

24. What are React lifecycle methods?

Answer: Special methods in class components that control the behavior of components at different stages — e.g., componentDidMount, componentDidUpdate, componentWillUnmount.

25. What is conditional rendering?

Answer: Displaying UI based on conditions using operators like if, &&, or ? :.

Example:

{isLoggedIn ? <Dashboard /> : <Login />}

26. What is React Router?

Answer: A library used for navigation and routing in React applications, enabling multiple views without full page reloads.

27. How do you create a new React app quickly?

Answer: Use the command:

npx create-react-app my-app

28. What is lifting state up?

Answer: Moving shared state to a common parent component so sibling components can access or modify it through props.

29. How do you prevent unnecessary re-rendering?

Answer:

• Use React.memo() for functional components.
• Use shouldComponentUpdate() in class components.

30. What is prop drilling?

Answer: Passing props through multiple levels of components just to reach a deeply nested one, making code harder to maintain.

31. What is the role of index.js in React?

Answer: It’s the entry point of a React app, where the root component (e.g., <App />) is rendered into the DOM using ReactDOM.render.

32. How do you add comments in JSX?

Answer: Use curly braces with JavaScript comments:

{/* This is a comment */}

33. What is the difference between React and Angular?

Answer:

• React: Library for building UI using virtual DOM.
• Angular: Full-fledged framework using real DOM and TypeScript.