React Interview Questions (Mid - Senior Level)
Tags: react, javascript, career, discuss
Published: 2021-12-26 07:36:44

Here are some advance common React interview questions that may be asked on your next interview. Good luck if you are about to interview and I hope this material will help you.


## What are React Hooks?
**React Hooks** are a new addition in React version 16.8. They let you use state and other React features without converting functional components to a class. 

Hooks does the same job with less code and with less code means less chances of producing bugs.

### Basic Hooks
#### useState
- returns a stateful value, and a function to update it.

#### useEffect
- lets us perform side effects in function components

#### useContext
- gives a simple function to access the data via value prop of the Context Provider in any child component

### Additional Hooks
#### useReducer
- state management like redux for managing state in smaller applications rather than having to reach for a third-party state management library

#### useCallback
- memoizes callback functions, so they not recreated on every re-render.

#### useMemo
- stores the results of expensive operations

#### useRef
- lets us perform side effects in function components

#### useImperativeHandle
- Used together with forwardRef which allows you to modify the ref instance that is exposed from parent components

#### useLayoutEffect
- this runs synchronously immediately after React has performed all DOM mutations

#### useDebugValue
- allows you to display additional, helpful information next to your custom Hooks, with optional formatting.

## What is context? 
Context provides a way to pass data through component tree without having to pass props down manually at every level. 

It is designed to share data that can be considered global for a tree of React components.￼

> Note: Apply it sparingly because it makes component reuse more difficult. Consider component composition as it is often a simpler solution than context.

## How to pass data between components?
1. To pass data from parent to child, use props
2. To pass data from child to parent, use callbacks
3. To pass data among siblings AND anywhere else
  1. use React’s Context API also
  2. use state management libraries for mid - big sized applications that are stateful. **Example:** Redux, MobX, and Recoil 

## What are some limitations of React.
*First*, JSX can make the coding complex. It will have a steep learning curve for the beginners

*Second*, React documentation is not user friendly and thorough as it should be.

*Third*, every React project are unique to engineers as they will rely on numerous technologies to incorporate in their projects. 

## What is prop drilling and how can you avoid it?
**Prop Drilling** is the process by which data is passed from one component to deeply nested components. This becomes a problem as other components will contain data that they don’t need. 

Also, It will make the components hard to maintain.

A common approach to avoid prop drilling is to use React context and state management libraries. 

*Few disadvantage of prop drilling*
1. Components that should not otherwise be aware of the data become unnecessarily complicated 
2. Harder to maintain.

## What is the use of dangerouslySetInnerHTML?
This property is React’s replacement for using innerHTML in the browser. It will render raw HTML in a component. 

> One should limit its use because it can expose users to potential cross-site scripting attacks.

## Name a few techniques to optimize React app performance.
*First*, Use React.Suspense and React.Lazy for Lazy Loading Components. This will only load component when it is needed. 

```jsx
import LazyComponent from './LazyComponent';

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

*Second*, Use React.memo for Component Memoization
**React.memo** is a higher order component that will render the component and memoizes the result. Before the next render, if the new props are the same, React reuses the memoized result skipping the next rendering

```jsx
import React from 'react';

const MyComponent = React.memo(props =>  {
  /* render only if the props changed */
});
```

> Note: If React.memo has a _useState_, _useReducer_ or _useContext_ Hook in its implementation, it will still re-render when state or context change.

The more often the component renders with the same props, 
the heavier and the more computationally expensive the output is, the more chances are that component needs to be wrapped in React.memo().

*Third*, Use **React.Fragment** to Avoid Adding Extra Nodes to the DOM React Fragments do not produce any extra elements in the DOM Fragment’s child components will be rendered without any wrapping DOM node. 

This is a cleaner alternative rather than adding divs in the code.

```jsx
function App() {
  return (
    <React.Fragment>
      <h1>Best App</h1>
      <p>Easy as pie!</p>
    </React.Fragment>
  );
}
```

You can also use the short syntax <></> for declaring a Fragment.

```jsx
function App() {
  return (
    <>
      <h1>Best App</h1>
      <p>Easy as pie!</p>
    </>
  );
}
```

Fourth, Use [Reselect](https://github.com/reduxjs/reselect) / [Re-reselect](https://github.com/toomuchdesign/re-reselect) in Redux to Avoid Frequent Re-render.
**Reselect** is a library for building memoized selectors that is commonly used for redux.

*Advantages*
* Selectors can compute derived data, allowing Redux to store the minimal possible state.
* Selectors are efficient. A selector is not recomputed unless one of its arguments changes.
* Selectors are composable. They can be used as input to other selectors.

**Re-reselect** is a lightweight wrapper around Reselect to enhance selectors with deeper memoization and cache management.

*Useful to:*
* Retain selector's cache when sequentially called with one/few different arguments
* Join similar selectors into one
* Share selectors with props across multiple component instances
* Instantiate selectors on runtime
* Enhance reselect with custom caching strategies


Last, Use Production Build
Ensure that application is bundled for production before deploying. 

## What is reconciliation? 
When a component's props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM. This process is called reconciliation. 


## What are Higher-Order Components? 
A **higher-order component** (HOC) is an advanced technique in React for reusing component logic. It is a function that takes a component and returns a new component.

```javascript
const EnhancedComponent = higherOrderComponent(WrappedComponent);
```

HOCs are common in third-party React libraries, such as Redux’s [connect](https://github.com/reduxjs/react-redux/blob/master/docs/api/connect.md#connect) and Relay’s [createFragmentContainer](https://relay.dev/docs/v10.1.3/fragment-container/#createfragmentcontainer).

*HOC can be used for many use cases:* 
1. Conditionally rendering components.
2. Providing components with specific styles.
3. Give other components any props. 
4. Showing a loader while a component waits for data 

## What is children prop? 
It is a prop that allow us to pass components as data to other components, just like any other prop. Component tree between the component's opening tag and closing tag will be passed to that component as children prop. 

```jsx
const MyComponent = ({title, children}) => {
  return (
    <>
      <h1>{title}</h1>
      {children}
    </>
  );
}

import { MyComponent } from './MyComponent';

const App = () => {
  return (
    <MyComponent title=“Simple React App”>
      <h2>Very Kewl Feature</h2>
    </MyComponent>
  );
}
```

## How to pass a parameter to an event handler or callback? 
You can use an arrow function to wrap around an event handler and pass parameters: 

```jsx
<button onClick={() => this.handleClick(id)} /> 
```
 
You can also pass arguments to a function which is defined as arrow function 
```jsx
const handleClick = (id) => () => {
    console.log(`The id is ${id}`)
}; 

<button onClick={this.handleClick(id)} />
```

## Why do we need to pass a function to setState()? 
setState() is an asynchronous operation. React batches state changes for performance reasons. This means state may not change immediately after setState() is called. 

We should not rely on the current state when calling setState() since we can't be sure what that state will be. 

```jsx
// Wrong 
this.setState({
  counter: this.state.counter + 1
})
```

The solution is to pass a function to setState(), with the previous state as an argument. 

```jsx
// Correct 
this.setState((prevState) => ({
  counter: prevState.counter + 1
})) 
```


Feel free to bookmark 🔖 even if you don't need this for now. You may need to refresh/review down the road when it is time for you to look for a new role.

If you want to support me - [Buy Me A Coffee](https://www.buymeacoffee.com/letscode77)

Video 🎥 Format if you don't feel like reading: {% youtube mYnsLOAIOCc %}