React JS Interview Questions
1 .
What is a higher-order component in React?
A Higher-Order Component (HOC) is a function that takes a component and returns a new component, simple and enables re-usability. They are generally used when multiple components have to use a common logic. 
 
We call them pure components because they can accept any dynamically provided child component but they won't modify or copy any behavior from their input components.
 
const EnhancedComponent = higherOrderComponent(WrappedComponent)

HOC can be used for many use cases:
 
* Code reuse, logic and bootstrap abstraction.
* Render hijacking.
* State abstraction and manipulation.
* Props manipulation.
2 .
What is React Router?
React Router is a routing library built on top of React, which is used to create routes in a React application. 
3 .
Why do we need to React Router?
It maintains consistent structure and behavior and is used to develop single-page web applications. 
Enables multiple views in a single application by defining multiple routes in the React application.
4 .
What is React Fiber?
Fiber is the new reconciliation engine or reimplementation of core algorithm in React v16. The goal of React Fiber is to increase its suitability for areas like animation, layout, gestures, ability to pause, abort, or reuse work and assign priority to different types of updates; and new concurrency primitives.
5 .
What is the main goal of React Fiber?
The goal of React Fiber is to increase its suitability for areas like animation, layout, and gestures. Its headline feature is incremental rendering: the ability to split rendering work into chunks and spread it out over multiple frames.
6 .
What is the difference between createElement and cloneElement?
JSX elements will be transpiled to React.createElement() functions to create React elements which are going to be used for the object representation of UI. Whereas cloneElement is used to clone an element and pass it new props.
7 .
How to create props proxy for HOC component?
You can add/edit props passed to the component using props proxy pattern like this:
function HOC(WrappedComponent) {
  return class Test extends Component {
    render() {
      const newProps = {
        title: 'New Header',
        footer: false,
        showFeatureX: false,
        showFeatureY: true
      }

      return <WrappedComponent {...this.props} {...newProps} />
    }
  }
}
8 .
What is context?
Context provides a way to pass data through the component tree without having to pass props down manually at every level.
 
For example, authenticated user, locale preference, UI theme need to be accessed in the application by many components.
 
const {Provider, Consumer} = React.createContext(defaultValue)
9 .
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.
10 .
Why React uses className over class attribute?
class is a keyword in JavaScript, and JSX is an extension of JavaScript. That's the principal reason why React uses className instead of class. Pass a string as the className prop.
render() {
  return <span className={'menu navigation-menu'}>{'Menu'}</span>
}