50+ Advanced React Interview Questions and Answers 2024

```jsx
{condition ? <ComponentA /> : <ComponentB />}
```

6. Why do we need to be careful when spreading props on DOM elements?

Ans - When spreading props on DOM elements in React, it's essential to be careful about passing non-standard HTML attributes. React doesn't warn or validate custom attributes, and these attributes might not be recognized by the browser or may have unexpected behavior. It's advisable to use standard HTML attributes and pass custom data through `data-*` attributes.

7. How do you use decorators in React?

Ans - Decorators are a feature in JavaScript that can be used with React classes. You can decorate your class components, which is the same as passing the component into a function. Decorators are flexible and readable way of modifying component functionality. To use decorators, you need to enable the "decorators" proposal in your build setup (e.g., Babel). Decorators can be applied to class declarations or class methods. For example:

```jsx
@myDecorator
class MyComponent extends React

8. How do you memoize a component?

Ans - Memoization in React refers to the optimization technique of preventing unnecessary renders for functional components. You can use the `React.memo` higher-order component to memoize a functional component. Here's an example:

```jsx
import React from 'react';

const MemoizedComponent = React.memo((props) => {
// component logic
});

export default MemoizedComponent;
```

9. How do you implement Server-Side Rendering or SSR?

Ans - Server-Side Rendering (SSR) in React involves rendering React components on the server before sending the HTML to the client. Key steps include configuring a server (e.g., Node.js with Express), using a rendering library (e.g., ReactDOMServer), and setting up routes to handle SSR. Libraries like Next.js simplify the process by providing SSR out of the box.

10. How to enable production mode in React?

Ans - To enable production mode in React, you typically set the `NODE_ENV` environment variable to `'production'` before building your application. For example:

```bash
NODE_ENV=production npm start
```

11. What is CRA and its benefits?

Ans - CRA stands for Create React App. It is a toolchain provided by the React team to set up a new React project quickly with zero build configuration. Benefits of CRA include easy project setup, pre-configured build tools, optimized production builds, and a smooth development experience.

12. What is the lifecycle methods order in mounting?

Ans - The order of lifecycle methods during mounting in React is as follows:
1. `constructor`
2. `static getDerivedStateFromProps`
3. `render`
4. `componentDidMount`

13. What are the lifecycle methods going to be deprecated in React v16?

Ans - In React v16, the `componentWillMount`, `componentWillReceiveProps`, and `componentWillUpdate` lifecycle methods are considered legacy and may be deprecated in the future. Developers are encouraged to use `componentDidMount`, `componentDidUpdate`, and `getDerivedStateFromProps` instead.

14. What is the purpose of `getDerivedStateFromProps()` lifecycle method?

Ans - `getDerivedStateFromProps` is a static method in React used for derived state. It is called before every render, providing an opportunity to update the component's state based on changes in props. It returns an object to update the state or `null` to indicate no state update is necessary.

15. What is the purpose of `getSnapshotBeforeUpdate()` lifecycle method?

Ans - `getSnapshotBeforeUpdate` is a lifecycle method called before the most recently rendered output is committed to the DOM. It receives the previous props and state, and it allows you to capture information about the DOM before it potentially changes. The value returned from this method will be passed as a third parameter to `componentDidUpdate`.

16. Do Hooks replace render props and higher-order components?

Ans - Yes, Hooks provide an alternative to render props and higher-order components for sharing stateful logic in functional components. Hooks, such as `useState` and `useEffect`, allow functional components to manage state and side effects, reducing the need for render props and higher-order components in many cases.

17. What is a switching component?

Ans - A switching component is a component that conditionally renders different content based on a specified condition or state. This can be achieved using conditional statements, such as `if` or the ternary operator, to determine which content to display.

18. Why do we need to pass a function to `setState()`?

Ans - In React, `setState` is asynchronous, and it takes a function as an argument to ensure that the state update is based on the current state. This is important because multiple calls to `setState` may be batched for performance reasons, and using a function guarantees the correct order of state updates.

19. What are React Mixins?

Ans - React Mixins are a way to reuse component logic in multiple components by providing a way to share code between components. However, mixins are considered an anti-pattern in React, and their use has been discouraged. Instead, other patterns like higher-order components and custom hooks are recommended for code reuse.

20. Why is `isMounted()` an anti-pattern and what is the proper solution?

Ans - `isMounted()` is considered an anti-pattern because it can lead to race conditions and unreliable checks for component mount status. A proper solution is to use the `componentWillUnmount` lifecycle method to set a flag indicating whether the component is mounted. Modern React patterns, such as using hooks, often eliminate the need for such checks.

21. Are custom DOM attributes supported in React v16?

Ans - Yes, custom DOM attributes are supported in React v16. React allows you to pass custom attributes to HTML elements using the `data-*` convention. These attributes are prefixed with

"data-" and can be accessed in the component using the `props` object.

22. What is the difference between `constructor` and `getInitialState`?

Ans - In modern React, there is no `getInitialState` method. Instead, the `constructor` is used to initialize the component's state. If you need to set an initial state in a class component, you do it inside the constructor using `this.state = { /* initial state */ };`.

23. Can you force a component to re-render without calling `setState`?

Ans  - Yes, you can force a component to re-render without calling `setState` by using the `forceUpdate` method. However, using `forceUpdate` is discouraged in most cases, and it's recommended to manage component state and triggering updates through `setState` for a more controlled and predictable behavior.

24. What is the difference between `super()` and `super(props)` in React using ES6 classes?

Ans - In a React component's constructor, `super()` and `super(props)` both call the constructor of the parent class (usually `React.Component`). The difference lies in whether the `props` are passed to the parent class's constructor.
- `super()`: Calls the constructor of the parent class without passing any arguments. This is used when the parent class's constructor does not rely on the `props` parameter.
- `super(props)`: Calls the constructor of the parent class and passes the `props` as an argument. This is used when the parent class's constructor expects to receive `props`.
Example:

```jsx
class MyComponent extends React.Component {
constructor(props) {
// Using super() or super(props) depends on the parent class's constructor
super(props);
// Component-specific initialization
}
}
```

25. How do you access props in attribute quotes?

Ans - You can access props in attribute quotes by using curly braces `{}`. Here's an example:

```jsx
const MyComponent = (props) => {
return (
<div className={props.isActive ? 'active' : 'inactive'}>
Content
</div>
);
};
```

26. What is React PropType array with shape?

Ans - The `PropTypes.arrayOf` and `PropTypes.shape` can be combined to define an array of objects with a specific shape. Here's an example:

```jsx
import PropTypes from 'prop-types';

const MyComponent = ({ items }) => {
// Component logic
};

MyComponent.propTypes = {
items: PropTypes.arrayOf(PropTypes.shape({
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired,
})).isRequired,
};
```

27. How to conditionally apply class attributes?

Ans - You can conditionally apply class attributes using the ternary operator or logical AND (`&&`) in JSX. Here are examples of both approaches:

```jsx
// Using ternary operator
<div className={isError ? 'error' : 'normal'}>Content</div>

// Using logical AND
<div className={isError && 'error'}>Content</div>
```

28. How to combine multiple inline style objects?

Ans - You can combine multiple inline style objects in React using the spread operator (`...`). Here's an example:

```jsx
const MyComponent = () => {
const style1 = { color: 'red' };
const style2 = { fontSize: '16px' };
const combinedStyles = { ...style1, ...style2 };
return <div style={combinedStyles}>Content</div>;
};
```

29. How to re-render the view when the browser is resized?

Ans - You can use the `resize` event and the `useState` hook to trigger a re-render when the browser is resized. Here's an example:

```jsx
import React, { useEffect, useState } from 'react';

const ResizeAwareComponent = () => {
const [windowSize, setWindowSize] = useState({ width: window.innerWidth, height: window.innerHeight });

useEffect(() => {
const handleResize = () => {
setWindowSize({ width: window.innerWidth, height: window.innerHeight });
};

window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);

return (
<div>
Window Width: {windowSize.width}, Height: {windowSize.height}
</div>
);
};
```

30. What is the difference between `setState` and `replaceState` methods?

Ans - `setState`: Updates the component's state by merging the new state with the current state. It is asynchronous and schedules a re-render of the component.
`replaceState`: Replaces the entire state of the component with the provided state. It is also asynchronous and schedules a re-render.
In modern React, `replaceState` is not commonly used, and `setState` is preferred for updating the state.

31. How to listen to state changes?

Ans - You can use the `useEffect` hook to listen to state changes. Inside the `useEffect` callback, you can perform actions whenever the specified state variables change. Here's an example:

```jsx
import React, { useState, useEffect } from 'react';

const MyComponent = () => {
const [count, setCount] = useState(0);

useEffect(() => {
// This function will be called whenever 'count' changes
console.log('State changed:', count);
}, [count]);

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

32. What is the recommended approach for removing an array element in React state?

Ans - The recommended approach for removing an array element from React state is to use the `filter` method to create a new array without the element to be removed. Here's an example:

```jsx
const removeItem = (indexToRemove) => {
setArray((prevArray) => prevArray.filter((_, index) => index !== indexToRemove));
};
```
In this example, `setArray` is a function that updates the state, and `filter` is used to create a new array that excludes the element at the specified index.

33. Is it possible to use React without rendering HTML?

Ans - No, React is specifically designed for building user interfaces, and its core functionality revolves around rendering components to the DOM (Document Object Model). While React can be used in various environments, such as server-side rendering or mobile app development, it always involves rendering UI components, which ultimately generate HTML.

34. How to pretty print JSON with React?

Ans - To pretty print JSON in React, you can use the `JSON.stringify` method with the third parameter as the number of spaces to use for indentation. Here's an example:

```jsx
const MyComponent = () => {
const data = { name: 'John', age: 25 };

return (
<pre>
{JSON.stringify(data, null, 2)}
</pre>
);
};
```
The `2` in `JSON.stringify(data, null, 2)` specifies that the output should be indented with two spaces.

35. Why you can't update props in React?

Ans - In React, props are passed from parent components to child components, and they are meant to be immutable. The idea is that a parent component passes data down to its child components, and those child components should not modify the received props directly.
React enforces a one-way data flow, and props are intended to be read-only within the receiving component. If you need to modify data, it should be done at the component that owns the state.

36. How to focus an input element on page load?

Ans - You can focus an input element on page load by using the `ref` attribute and the `focus` method. Here's an example:

```jsx
import React, { useRef, useEffect } from 'react';

const MyComponent = () => {
const inputRef = useRef(null);

useEffect(() => {
// Focus the input element on mount
inputRef.current.focus();
}, []);

return <input ref={inputRef} />;
};
```
In this example, the `useEffect` hook with an empty dependency array ensures that the focus is set only once when the component mounts.

37. What are the possible ways of updating objects in state?

Ans - There are several ways to update objects in state in React:
1. Using the spread operator:
```jsx
setMyObject({ ...myObject, key: 'new value' });
```
2. Using `Object.assign`:
```jsx
setMyObject(Object.assign({}, myObject, { key: 'new value' }));
```
3. Using the functional form of `setState`:
```jsx
setMyObject((prevObject) => ({ ...prevObject, key: 'new value' }));
```
The third approach is preferred when the new state depends on the previous state, especially in asynchronous scenarios.

38. How can we find the version of React at runtime in the browser?

You can find the version of React at runtime in the browser by checking the `React.version` property. Here's an example:

```jsx
const reactVersion = React.version;
console.log('React version:', reactVersion);
```
This can be useful for logging or conditionally applying logic based on the React version being used in your application. Note that this property is available if you have React included in your project.

39. What are the approaches to include polyfills in your create-react-app?

Ans - To include polyfills in a Create React App (CRA), you can use the `react-app-polyfill` package. Follow these steps:
1. Install the package:
```bash
npm install react-app-polyfill
```
2. Import the polyfill at the top of your application's entry point (usually `index.js` or `index.tsx`):
```jsx
import 'react-app-polyfill/ie11'; // For IE11 support
import 'react-app-polyfill/stable';
```
This approach allows you to add polyfills for specific browsers or features, improving compatibility.

40. How to use HTTPS instead of HTTP in create-react-app?

Ans - By default, Create React App serves your application over HTTP during development. To use HTTPS instead, you can run the following command:

```bash
HTTPS=true npm start
```
This command sets the `HTTPS` environment variable to `true` before starting the development server, enabling HTTPS.

41. How to avoid using relative path imports in create-react-app?

Ans - In Create React App, you can set up absolute imports by creating a `jsconfig.json` file in the root of your project and configuring the `baseUrl` option. For example:

```json
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src/**/*"]
}
```
With this setup, you can import modules using absolute paths:

```jsx
import MyComponent from 'components/MyComponent';
```

42. How to add Google Analytics for react-router?

Ans - To add Google Analytics for React Router, you can use the `react-ga` library. Follow these steps:
1. Install the `react-ga` package:
```bash
npm install react-ga
```
2. Import and initialize `react-ga` in your application's entry point (e.g., `index.js` or `index.tsx`):
```jsx
import ReactGA from 'react-ga';

ReactGA.initialize('Your-GA-Tracking-ID');
```
3. Use `ReactGA.pageview` to track page views in your route components:
```jsx
import React, { useEffect } from 'react';
import ReactGA from 'react-ga';

const MyComponent = () => {
useEffect(() => {
ReactGA.pageview(window.location.pathname + window.location.search);
}, []);

return (
// Component content
);
};
export default MyComponent;
```

43. How to update a component every second?

Ans - You can use the `setInterval` function within the `useEffect` hook to update a component every second. Here's an example using functional components and hooks:

```jsx
import React, { useState, useEffect } from 'react';

const MyComponent = () => {
const [count, setCount] = useState(0);

useEffect(() => {
const intervalId = setInterval(() => {
setCount((prevCount) => prevCount + 1);
}, 1000);

return () => clearInterval(intervalId);
}, []);

return <div>{count}</div>;
};
export default MyComponent;
```

44. How do you apply vendor prefixes to inline styles in React?

Ans - Instead of manually applying vendor prefixes, you can use the `autoprefixer` feature provided by the `postcss` tool. Create React App already includes this setup by default, so you don't need to worry about it.
When you use inline styles with React, the styles are automatically transformed and prefixed during the build process.

45. What are the exceptions on React component naming?

React component names must begin with a capital letter. There are two exceptions to this rule:
1. Built-in Components: Components like `div` or `span` must be lowercase.
2. React Fragments: You can use a lowercase name for React fragments, which is a common pattern:

```jsx
const MyComponent = () => (
<>
{/* Fragment contents */}
</>
);
```

46. Why is a component constructor called only once?

Ans - The constructor of a React component is called only once during the component's lifecycle when the component is being initialized. It is responsible for setting up the initial state and binding event handlers. Subsequent renders of the component do not invoke the constructor again.

47. How to programmatically trigger click event in React?

Ans - You can programmatically trigger a click event in React using the `ref` attribute and the `click` method. Here's an example:

```jsx
import React, { useRef } from 'react';

const MyComponent = () => {
const buttonRef = useRef(null);

const handleClick = () => {
console.log('Button clicked');
};

// Trigger click programmatically
const triggerClick = () => {
buttonRef.current.click();
};

return (
<div>
<button ref={buttonRef} onClick={handleClick}>

Click me
</button>
<button onClick={triggerClick}>
Trigger Click
</button>
</div>
);
};
export default MyComponent;
```

48. Is it possible to use async/await in plain React?

Ans - Yes, it is possible to use `async/await` in React, but you typically use it within lifecycle methods or functional components with the help of the `useEffect` hook. Here's an example:

```jsx
import React, { useEffect, useState } from 'react';

const MyComponent = () => {
const [data, setData] = useState(null);

useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch('https://api.example.com/data');
const result = await response.json();
setData(result);
} catch (error) {
console.error('Error fetching data:', error);
}
};

fetchData();
}, []);

return (
<div>
{/* Render data */}
</div>
);
};
export default MyComponent;
```

49. What are the popular packages for animation?

Ans - Some popular packages for animation in React include:
- react-spring: A spring-physics-based animation library.
- framer-motion: A declarative animation library for React.
- react-transition-group: A set of components for managing component states during transitions.
- react-animate-on-scroll: An animation library for scrolling animations.
- react-reveal: A library for simple fade and zoom effects during component mount.

50. What is the benefit of styles modules?

Ans - Styles modules, commonly known as CSS modules in React, provide local scope for styles. This helps in avoiding naming conflicts and allows encapsulation of styles within a component. Each component can have its own unique styles without worrying about global styles affecting it.

For example:
```jsx
// styles.module.css
.button {
background-color: red;
}
```

```jsx
// ButtonComponent.js
import React from 'react';
import styles from './styles.module.css';

const ButtonComponent = () => {
return <button className={styles.button}>Click me</button>;
};

export default ButtonComponent;
```

51. What are the popular React-specific linters?

Ans - Popular React-specific linters include:
- eslint-plugin-react: ESLint plugin for React.
- eslint-plugin-react-hooks: ESLint plugin for React hooks.
- eslint-config-react-app: ESLint configuration used by Create React App.
- prettier: Code formatter often used in combination with ESLint.
These tools help maintain a consistent and high-quality codebase in React applications.

52. How to make an AJAX call, and in which component lifecycle methods should I make an AJAX call?

Ans - You can make AJAX calls (e.g., fetching data from an API) using the `fetch` API or libraries like Axios. The common lifecycle methods for making AJAX calls in a class component are `componentDidMount` or `componentDidUpdate`.

Example using `fetch` in a functional component with `useEffect`:
```jsx
import React, { useState, useEffect } from 'react';

const MyComponent = () => {
const [data, setData] = useState(null);

useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch('https://api.example.com/data');
const result = await response.json();
setData(result);
} catch (error) {
console.error('Error fetching data:', error);
}
};

fetchData();
}, []); // Empty dependency array ensures it runs once on mount

return (
<div>
{/* Render data */}
</div>
);
};
export default MyComponent;
```

53. What are render props?

Ans - Render props is a pattern in React where a component receives a function as a prop and uses that function to render its content. This allows for greater component composition and code reuse. Here's a simple example:

```jsx
import React from 'react';

const RenderPropsComponent = ({ render }) => {
return <div>{render('Hello from Render Props!')}</div>;
};

const App = () => {
return (
<RenderPropsComponent
render={(content) => (
<div>
<h1>{content}</h1>
</div>
)}
/>
);
};
export default App;
```
In this example, the `RenderPropsComponent` takes a `render` function as a prop and uses it to render content. The `App` component provides a function to be rendered by `RenderPropsComponent`.