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?
- To pass data from parent to child, use props
- To pass data from child to parent, use callbacks
- To pass data among siblings AND anywhere else
- use Reactâs Context API also
- 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
- Components that should not otherwise be aware of the data become unnecessarily complicated
- 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.
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
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.
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-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.
const EnhancedComponent = higherOrderComponent(WrappedComponent);
HOCs are common in third-party React libraries, such as Reduxâs connect and Relayâs createFragmentContainer.
HOC can be used for many use cases:
- Conditionally rendering components.
- Providing components with specific styles.
- Give other components any props.
- 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) => ({
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
Video đ„ Format if you don't feel like reading:
Top comments (4)
is there any other additional questions you would like to add to the list I have above?
1-What are the alternatives to HOC and what are their Advantages?
2-what are the difference and similarities between useRef and useState
Those are definitely two great questions to add on the list. Thanks Raul!
Types of side effects
What are Forward Refs?
What is static typing? Does React Hook work with static typing?
What are Custom Hooks and give an example?