Google News
logo
ReactJS Interview Questions
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.
React Router is a routing library built on top of React, which is used to create routes in a React application. 
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.
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.
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.
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.
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} />
    }
  }
}
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)
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.
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>
}