React Interview Questions & Answers
1. What is React? How is it different from other JS frameworks? :star:
Answer
React is a Component-Based JavaScript library for building user interfaces. Opposed to a full framework like [Angular](https://angular.io/) React does not ship with routing, state management and data fetching by default, these functionalities have been left to third parties. This makes react really flexible since you are able to choose the best tool for your project’s needs.
2. What are the lifecycle methods of a React component? :star:
Answer
Every component has several `lifecycle methods` that can be overridden to run code at particular times in the process. [Here](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/) is a helpful diagram to better visualize the order in which each `lifecycle method` is used.
Click [here](https://reactjs.org/docs/react-component.html#the-component-lifecycle) for more information about each `lifecycle method`
3. What is React Router? :star:
Answer
[React Router](https://github.com/ReactTraining/react-router) is the standard routing library for React. React Router helps you add new screens and flows to your application incredibly quickly, all while keeping the URL in sync with what's being displayed on the page.
4. Explain the Virtual DOM, and a pragmatic overview of how React renders it to the DOM. :star:
Answer
In React, for every DOM object, there is a corresponding "virtual DOM object." A virtual DOM object is a representation of a DOM object, like a lightweight copy.
When you render a JSX element, every single virtual DOM object gets updated. This sounds incredibly inefficient, but the cost is insignificant because the virtual DOM can update so quickly.
Once the virtual DOM has updated, then React compares the virtual DOM with a virtual DOM snapshot that was taken right before the update.
By comparing the new virtual DOM with a pre-update version, React figures out exactly which virtual DOM objects have changed. This process is called "diffing."
Once React knows which virtual DOM objects have changed, then React updates those objects, and only those objects, on the real DOM
5. Explain the purpose of render() in React. :star:
Answer
The purpose is to render a React element into the DOM in the supplied container and return a reference to the component (or returns null for stateless components).
If the React element was previously rendered into container, this will perform an update on it and only mutate the DOM as necessary to reflect the latest React element.
`ReactDOM.render(element, container[, callback])`
Click [here](https://reactjs.org/docs/react-dom.html#render) for more info on the `render()` method
6. What is arrow function in React? :star:
Answer
The fat arrow => is used to define anonymous functions. There are two important differences in the behavior of these functions, compared to functions defined with function.
First, the binding for the keyword this is the same outside and inside the fat arrow function. This is different than functions declared with function, which can bind this to another object upon invocation. Maintaining the this binding is very convenient for operations like mapping: this.items.map(x => this.doSomethingWith(x)).
Second, fat arrow functions don't have an arguments object defined. You can achieve the same thing using the spread syntax: (...args) => doSomething(args[0], args[1]).
7. Why would you use React.Children.map(props.children, () => ) instead of props.children.map(() => )? :star:
Answer
Since this.props.children can have one element, multiple elements, or none at all, its value is respectively a single child node, an array of child nodes or undefined. Sometimes, we want to transform our children before rendering them — for example, to add additional props to every child. If we wanted to do that, we'd have to take the possible types of this.props.children into account. For example, if there is only one child, we can't map it.
8. how events are handled in React? :star:
Answer
React creates its own event system which is fully compatible with W3C object model. All browser’native events are wrapped by instances of Synthetic Event. It provides a cross-browser interface to a native event. That means you do not need to worry about incompatible event names and fields. Besides, React event system is implemented through event delegation and also has a pool of event objects to reduce memory overhead.
9. What is JSX in React? :star:
Answer
JSX can best be thought of as a markup syntax that very closely resembles HTML.It is more or less like the combination of Javascript + XML. JSX makes writing React components, the building blocks of React UI, easier by making the syntax developers use for generating these strings of HTML almost identical to the HTML they will inject into the web page.JSX is one of best ReactJS features. Web developers will always go for an easy way out, which is why this is a great choice for many.
10. List some features of ReactJS? :star:
Answer
1. Lightweight DOM For Better Performance
2. Easy Learning Curve
3. A desired interface can be created in a relatively easy manner.
4. Components Support And Little Dependencies
11. What are refs and keys used for in React? :star:
Answer
The ref is used to return a reference to your element. Refs can be useful when you need DOM measurements or to add methods to your components.
React keys are useful when working with dynamically created components or when your rendered lists are altered by users. Setting the key value will keep your components uniquely identified by the React after the change.
12. What are Higher Order Components(HOC)? :star:
Answer
Higher Order Component is an advanced way of reusing the component logic. Basically, it’s a pattern derived from React’s compositional nature.
HOC are custom components which wrap another component within it. They can accept any dynamically provided child component but they won’t modify or copy any behavior from their input components. We can say that HOC are ‘pure’ components.
13. What are HOCs used for? :star:
Answer
HOCs are used for many tasks, some being:
* Code reuse, logic and bootstrap abstraction
* State abstraction and manipulation
* Props manipulation
14. If global context can now be accessed directly with this.context why we still need HoC?
Answer
Encapsulation / detaching components from containers / keeping components stand-alone without 3rd party dependencies