React Interview Questions

1. What is React?
o React is a JavaScript library used for building user interfaces, particularly
single-page applications. It allows developers to create reusable UI
components that manage their own state and render efficiently when data
changes.

2. What is the difference between a function component and a class component in

React?
o Function components are simpler and are written as JavaScript functions.
They can use hooks for state and lifecycle features. Class components, on the
other hand, are ES6 classes that extend React.Component and use methods
like render() and lifecycle methods.

3. What are React Hooks?

o React hooks are functions that allow you to use state and lifecycle features in
function components. Common hooks include:
 useState(): For managing state in a function component.
 useEffect(): For side effects like data fetching, subscriptions, etc.
 useContext(): To access context data.
 useReducer(): For more complex state management.

4. What is the Virtual DOM in React?

o The Virtual DOM is an in-memory representation of the real DOM elements.
React uses it to optimize UI updates by first rendering changes in the virtual
DOM and then updating the real DOM only for the changed elements.

5. What are React props and state?

o Props: Short for "properties," props are used to pass data from a parent
component to a child component. Props are immutable.
o State: State is a data structure that represents the component’s local state. It
can be changed over time, and when it changes, the component re-renders.

6. What is the purpose of useEffect hook in React?

o useEffect is used for handling side effects like data fetching, subscriptions,
and DOM manipulation in function components. It runs after the render, and
you can control when it runs using dependency arrays.

7. What is the difference between controlled and uncontrolled components in

React?
o Controlled components: These are React components where form elements
(like input, textarea, etc.) are controlled by React state. The state is the single
source of truth.
o Uncontrolled components: These are form elements that maintain their own
internal state and don't require React state management. You can interact with
the DOM directly using refs.
8. What is React Context?
o React Context is a way to share state across the component tree without
passing props down manually at every level. It's useful for global data like
theme, authentication, or language preferences.

9. What is the key prop in React and why is it important?

o The key prop is used to uniquely identify elements in a list or collection of
elements. It helps React optimize re-renders by efficiently comparing the
virtual DOM and determining which items have changed, been added, or been
removed.

10. What is Redux and how does it work with React?

o Redux is a state management library that can be used with React to manage
global state. It uses a central store to manage the state of an application, and
actions and reducers are used to modify that state. Redux follows the
principles of Flux architecture.

11. What is JSX and why is it used in React?

o JSX is a syntax extension that allows you to write HTML-like code within
JavaScript. It provides a more intuitive way to define UI elements and
improves the readability of React components.

12. What are Pure Components in React?

o Pure components in React are components that only re-render when their
props or state have changed. They implement a shallow comparison of props
and state, making them more efficient than regular components.

13. What are error boundaries in React?

o Error boundaries are React components that catch JavaScript errors anywhere
in their child component tree, log the errors, and display a fallback UI. They
prevent crashes by isolating errors in specific parts of the component tree.

Advanced Questions

1. What is the difference between componentDidMount and useEffect?

o componentDidMount is a lifecycle method used in class components that is
called after the component is mounted. useEffect in function components is
equivalent and can be configured to run once, on every render, or on specific
dependencies.

2. Explain reconciliation in React.

o Reconciliation is the process through which React updates the DOM. It
compares the new virtual DOM with the previous version and makes changes
only to the DOM elements that need to be updated, improving performance.
3. What is React Suspense and how does it help with code splitting?
o React Suspense is a feature that allows you to defer the loading of components
or data until they are ready. It is useful for implementing code splitting, where
chunks of code are only loaded when required, improving the application's
load time.

4. What is the purpose of React.memo?

o React.memo is a higher-order component that prevents re-renders of function
components if their props haven't changed. It's useful for optimizing
performance in functional components.

5. What is the difference between useCallback and useMemo?

useCallback is used to memoize functions, preventing their recreation on every render.

useMemo is used to memoize the result of a function, preventing unnecessary recalculations
on every render.

JSX Based Question

 What is JSX?

 JSX stands for JavaScript XML. It is a syntax extension for JavaScript, commonly
used with React. JSX allows you to write HTML elements within JavaScript code.
React uses it to describe the UI structure.

 How does JSX work behind the scenes?

 JSX is not natively understood by browsers. When you write JSX, it is transformed
into JavaScript by tools like Babel. For example, the JSX element <h1>Hello,
World!</h1> is compiled to React.createElement('h1', null, 'Hello,
World!').

 Is it mandatory to use JSX in React?

 No, JSX is not mandatory in React. You can use plain JavaScript with
React.createElement() to create elements, but JSX is more concise and readable,
which is why it's commonly used.

 What are the advantages of using JSX in React?

 JSX allows you to write HTML-like syntax directly in JavaScript, which improves
readability and productivity. It also helps avoid errors since the JavaScript logic and
markup are closely related. Moreover, JSX makes it easier to visualize the structure of
a component.
 Can you pass variables or expressions inside JSX?

 Yes, you can pass JavaScript expressions inside JSX by wrapping them in curly
braces {}. For example: <h1>{name}</h1>, where name is a JavaScript variable.

 What are some common errors when working with JSX?

 Common issues include:

o Missing parentheses: JSX expressions must be wrapped in parentheses when
returning multiple lines.
o Self-closing tags: Tags like <img /> and <input /> must be self-closed in
JSX.
o Invalid attributes: In JSX, attributes like class must be written as
className due to JavaScript keyword restrictions.

 What is the difference between class and className in JSX?

 In JSX, class is replaced with className to avoid conflicts with the JavaScript
class keyword.

 Can you use conditional rendering inside JSX?

 Yes, you can use conditional rendering inside JSX with ternary operators or logical &&
operator. For example:

{isLoggedIn ? <LogoutButton /> : <LoginButton />}

 How do you inject a style in JSX?

o You can add inline styles in JSX using an object with camelCase property
names. For example:

jsx
Copy code
<div style={{ color: 'red', fontSize: '20px' }}>Hello</div>

 What is the role of React Fragments in JSX?

o React Fragments allow you to group a list of children without adding extra
nodes to the DOM. You can use them with <React.Fragment> or the
shorthand <>...</>.

return (
<>
<h1>Hello</h1>
<p>Welcome to React</p>
</>
);
Components Based Question

1. What is a React component?

o A React component is a building block of a React application. Components are
JavaScript functions or classes that accept input (called props) and return React
elements that describe what should appear on the screen. Components can be
functional or class-based.

2. What is the difference between function components and class components in

React?
o Function Components:
 Simpler syntax.
 Can use hooks like useState, useEffect, etc.
 Do not have lifecycle methods but can achieve similar behavior using hooks.
o Class Components:
 Requires ES6 class syntax.
 Can have lifecycle methods like componentDidMount, componentDidUpdate,
and componentWillUnmount.
 Can have state using this.state and this.setState().

3. What are props in React components?

o props (short for properties) are inputs to React components. They are passed from
parent to child components and are read-only. Props are used to customize a
component's behavior or appearance.

4. What is state in React components?

o state is an object that stores a component's dynamic data. Unlike props, state can
change over time, and when the state changes, the component re-renders to reflect the
new state. In class components, state is initialized using this.state, and in function
components, state is managed using the useState hook.

5. What is the difference between props and state in React?

o Props: Immutable, passed from parent to child, used to customize a component's
appearance or behavior.
o State: Mutable, managed within a component, and used to store dynamic data that
may change over time.

6. What is JSX and how does it relate to React components?

o JSX (JavaScript XML) is a syntax extension that allows writing HTML-like code
within JavaScript. It is commonly used in React components to describe the UI. JSX
is transformed into React createElement calls behind the scenes.

7. Can you explain the concept of "rendering" in React?

o "Rendering" in React refers to the process of generating and updating the UI based on
changes to state or props. When a component's state or props change, React re-
renders the component to update the DOM accordingly.

8. What is the render() method in React class components?

o In class components, the render() method is required and returns the JSX that defines
the UI of the component. It is called automatically by React when the component's
state or props change.
Intermediate React Component Questions

9. What is a stateless component?

o A stateless component is a component that does not manage its own state. It only
accepts props and renders UI based on those props. Function components are typically
stateless, though they can use hooks for state.

10. What is a functional component in React?

o A functional component is a JavaScript function that returns JSX. In modern React,
functional components can use hooks (like useState, useEffect, etc.) to manage state
and lifecycle events.

11. What is a class component in React?

o A class component is a JavaScript class that extends React.Component and includes
lifecycle methods like componentDidMount, componentDidUpdate, and
componentWillUnmount. It can manage its own state via this.state.

12. What is the significance of key prop in a list of components?

o The key prop helps React identify which items have changed, been added, or been
removed. This helps in efficiently re-rendering only the changed items in a list,
improving performance.

13. What are higher-order components (HOCs)?

o A Higher-Order Component (HOC) is a function that takes a component and returns a
new component with additional props or behavior. It's a pattern used for code reuse.
For example, withRouter is an HOC in React Router that injects routing props into a
component.

14. What is component lifecycle in React?

o Component lifecycle refers to the series of methods that are called at different stages
of a component's existence in React, including:
 Mounting: constructor, render, componentDidMount.
 Updating: componentDidUpdate, shouldComponentUpdate.
 Unmounting: componentWillUnmount.
 In functional components, you can simulate lifecycle behavior using the
useEffect hook.

15. What is the difference between componentDidMount() and componentDidUpdate()?

o componentDidMount() is called once after the component is initially rendered and
mounted in the DOM. It’s typically used for tasks like data fetching.
o componentDidUpdate() is called after any update to the component, either from props
or state changes. It’s used for reacting to changes in props or state.

Advanced React Component Questions

16. What is the purpose of React.memo()?

o React.memo() is a higher-order component that memoizes a functional component. It
prevents re-renders of the component if its props have not changed. It’s used to
optimize performance by avoiding unnecessary renders of child components.
17. What are controlled and uncontrolled components in React?
o Controlled components: These are components where the form element values (e.g.,
input, select, textarea) are controlled by React state. The value is set via state and
updated using onChange event handlers.
o Uncontrolled components: These are components where the form element values
are handled by the DOM itself. You can access their values using refs but don’t need
to store them in React state.

18. What is React Context, and how can it be used in components?

o React Context is a way to share state across the component tree without passing props
manually at every level. It is useful for global data (like authentication, theme,
language). Components consume context data using useContext in function
components or Context.Consumer in class components.

19. What is the difference between useEffect and componentDidMount?

o useEffect() is a hook that works in function components and can be used for side
effects like data fetching, DOM manipulation, and more. It runs after every render by
default, but you can control when it runs using the dependency array.
o componentDidMount() is a lifecycle method in class components, called once after the
initial render when the component is mounted. It’s commonly used for similar tasks
like data fetching.

20. What is the purpose of shouldComponentUpdate() in class components?

o shouldComponentUpdate() is a lifecycle method in class components that determines
whether a component should re-render when there are changes in props or state. It can
be used to optimize performance by preventing unnecessary re-renders.

21. What is a "pure" component in React?

o A PureComponent is a class component that implements shouldComponentUpdate()
with a shallow prop and state comparison. It prevents re-renders if the props and state
haven't changed, offering performance optimization for components that always
render the same output for the same input.

22. What is the useCallback hook used for in function components?

o useCallback is a hook that returns a memoized version of a callback function. It is
useful to prevent unnecessary re-creations of functions on every render, which can
help with performance in certain scenarios, such as passing functions as props to
child components.

23. How does React handle component re-renders?

o React determines whether a component needs to re-render based on changes to its
state or props. If there’s a change, React schedules a re-render and performs a diffing
process to update the DOM efficiently (via the Virtual DOM). React will only re-
render components whose state or props have changed.

24. What is the difference between useEffect with an empty dependency array and
componentDidMount?
o useEffect with an empty dependency array ([]) behaves similarly to
componentDidMount in class components. It runs only once after the first render,
making it ideal for performing setup tasks such as data fetching.
25. What are Render Props in React?
o Render Props is a pattern for sharing code between React components using a prop
that is a function. The function returns JSX that will be rendered. It allows
components to share their logic without explicitly inheriting from one another.

jsx
Copy code
<SomeComponent render={(data) => <div>{data}</div>} />

Bonus: Miscellaneous React Component Questions

 How can you optimize React components for performance?

o Use React.memo to prevent unnecessary re-renders of function components.
o Use shouldComponentUpdate or PureComponent to optimize class components.
o Use React.lazy and Suspense for code splitting.
o Avoid unnecessary anonymous functions in props.
o Implement useCallback and useMemo hooks for memoizing functions and values.