React Interview Questions – Beginner

Here are 20 React interview questions for beginners, designed to test and enhance your understanding of React basics and concepts.

1. What is React?

React is a JavaScript library for building user interfaces, particularly for single-page applications. It allows developers to create reusable UI components and manage the application state efficiently.

2. What are components in React?

Components are the building blocks of a React application. They are reusable and independent pieces of UI, defined as JavaScript functions or classes. There are two types of components: functional and class components.

3. What is the difference between functional and class components?

  • Functional Components: Stateless, written as JavaScript functions, and use hooks for state and lifecycle management.
  • Class Components: Stateful, written as ES6 classes, and use lifecycle methods like componentDidMount.

4. What is JSX?

JSX stands for JavaScript XML. It is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript, making it easier to create and visualize UI components.

5. What is a virtual DOM?

The virtual DOM is a lightweight copy of the real DOM. React uses it to optimize updates by comparing the virtual DOM with the previous version and applying changes to the real DOM efficiently.

6. How do you create a React application?

You can create a React application using the Create React App CLI tool:

</>
Copy
npx create-react-app my-app

Navigate to the app directory and start the development server:

</>
Copy
cd my-app
npm start

7. What are props in React?

Props (short for properties) are used to pass data from a parent component to a child component. They are immutable and make components dynamic.

8. What is state in React?

State is an object that stores dynamic data in a component. Unlike props, state is mutable and managed within the component. Changes to state trigger re-rendering of the component.

9. How do you use state in a functional component?

State in functional components is managed using the useState hook:

</>
Copy
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>
  );
}

10. What is the difference between state and props?

  • State: Local to a component, mutable, and used to manage dynamic data.
  • Props: Passed from parent to child components, immutable, and used for component communication.

11. What is the use of keys in React?

Keys are unique identifiers for elements in a list. They help React efficiently update and render elements by tracking changes in the list.

12. What is a hook in React?

Hooks are special functions introduced in React 16.8 that allow functional components to use state and lifecycle features. Common hooks include useState, useEffect, and useContext.

13. What is the use of the useEffect hook?

The useEffect hook allows you to perform side effects in functional components, such as fetching data, setting up subscriptions, or updating the DOM.

14. What is the React fragment?

React fragments let you group multiple elements without adding an extra node to the DOM:

</>
Copy
import React from 'react';

function FragmentExample() {
  return (
    <>
      <h1>Title</h1>
      <p>Description</p>
    </>
  );
}

15. What is the purpose of the React context API?

The React Context API provides a way to share data (like theme or authentication) across components without passing props down manually at every level.

16. What is the significance of the default export in React?

The default export allows you to export a single value from a file, which can be imported with any name in another file:

</>
Copy
export default MyComponent;
import MyComponent from './MyComponent';

17. What is the difference between a controlled and uncontrolled component?

  • Controlled Component: The form element’s value is controlled by React state.
  • Uncontrolled Component: The form element’s value is handled by the DOM directly.

18. What is PropTypes in React?

PropTypes is a library used to validate the types of props passed to a component, ensuring proper usage and debugging.

19. What is the use of the memo function in React?

The React.memo function prevents unnecessary re-renders of a functional component by memoizing its output.

20. How do you handle events in React?

React handles events using camelCase syntax and functions:

</>
Copy
function App() {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return <button onClick={handleClick}>Click Me</button>;
}