React Interview Questions (Mid - Senior Level)

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 Hooksare 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 valueprop 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 youto 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 compositionas 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 Reacts 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 isprop drillingand 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 dont 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 Reacts replacement for usinginnerHTMLin 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.

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

Second, Use React.memo for Component Memoization
React.memo is ahigher 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 resultskipping the next rendering

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

Note: If React.memohas auseState,useReduceroruseContextHook 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 inReact.memo().

Third, UseReact.Fragmentto Avoid Adding Extra Nodes to the DOM React Fragments do not produce any extra elements in the DOM Fragments child components will be rendered without any wrapping DOM node.

This is a cleaner alternative rather than addingdivs in the code.

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.

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

Fourth, Use Reselect / 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-reselectis a lightweight wrapper aroundReselect to enhance selectors withdeeper memoizationandcache management.

Useful to:

• Retain selector's cachewhen sequentiallycalled with one/few different arguments
• Join similar selectorsinto one
• Share selectorswith props across multiple component instances
• Instantiateselectorson runtime
• Enhancereselectwithcustom 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.

const EnhancedComponent = higherOrderComponent(WrappedComponent);

HOCs are common in third-party React libraries, such as Reduxsconnectand RelayscreateFragmentContainer.

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.

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:

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

You can also pass arguments to a function which is defined as arrow function

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.

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

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

// Correct this.setState((prevState, props) => ({  counter: prevState.counter + props.increment})) 

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

Video Format: