React Interview Questions and Answers [ Part 2 ]

Advance React Interview Questions and Answers
This video contains the common react interview questions that may be asked on your next front-end interview.

Next recommended video to watch - https://youtu.be/npcNFM9SQTg (40+ Front-End Interview Questions)

Timestamps:
0:00 Introduction
0:07 What are React Hook?
0:48 How to pass data between components?
1:13 What are some limitations of React?
1:42 What is props drilling and how can you avoid it?
2:09 What is the use of dangerouslySetInnerHTML?
2:33 Name a few techniques to optimize React app performance?
3:53 What is reconciliation?
4:16 What are Higher Order Component?
4:40 What is children prop?
4:48 How to pass parameter to an event handler or callback?
5:16 Why do we need to pass a function to setState?
5:43 Outro - Please like and subscribe to help me reach others and support this channel

What are React Hooks?
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
* useEffect
* useContext

* Additional Hooks
* useReducer
* useCallback
* useMemo
* useRef
* useImperativeHandle
* useLayoutEffect
* useDebugValue

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.

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
* use React’s Context API also use state management libraries

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 r 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.

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


What is the use of dangerouslySetInnerHTML?
This property is React’s replacement for using innerHTML in the browser. 
This property can be used to render raw HTML in a component.

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.
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

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.

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.

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

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.

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.

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.

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:

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

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.

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