ReactJS Interview questions

ReactJS interview question and answers
ReactJS interview question and answers



What is ReactJS ?

ReactJS is a Javascript library developed by Facebook in 2011. It’s open source and is used for developing single page web and mobile applications. It’s documentation is available on the website It’s component driven i.e. you can create components using React which are reusable. It’s main advantage is that it’s fast and reliable and well suited to build scalable web applications.


Highlight some advantages of ReactJS ?

  • SEO-friendly: ReactJS is highly search engine friendly. It has bunch of packages which help you create search engine friendly URLs and tags with meta information.
  • JSX: ReactJS uses JSX (Javascript XML) for creating markup or page templates. Using JSX gives more flexibility to the page content and it can be more dynamic and manipulated easily.
  • React Native: It contains a native library which supports native mobile application development for android and iOS.
  • Data-Binding: ReactJs uses one-way data binding and application architecture controls the flow of data via a dispatcher.
  • Testability: ReactJS application is very easy to test. Its views are very easy to configure and can be treated as the application. ReactJS apps can be tested using frameworks like Enzyme and cypress.
  • Performance: ReactJS uses virtual DOM where it does all the DOM manipulations which mantains a copy of the real DOM. It runs a diffing algorithm which takes a diff between the two and only updates the real DOM with areas that have changed since the last render/update cycle.


What are props and state in React ?

Props is shorthand for properties which contain attributes of a component (data and/or functions) and are passed from parent to child components. A state is snapshot of the datastore of the react application. It is used to update the component when some event like, timer, API call, user generated input, occurs.


What are refs in React ?

Refs are used to identify and query HTML DOM elements in react. Most common use case is for animation when we want to identify an element and do some manipulations around it for animation and special effects.


What are the key differences between react and angular ?

React vs Angular

1. ARCHITECTURE Opinionated only about the view of  MVC Follows complete MVC
2. RENDERING Server-side as well as client side rendering Client-side rendering
3. DOM Uses virtual DOM Uses shadow DOM
4. DATA BINDING One-way data binding Two-way data binding
5. DEBUGGING Compile time debugging Runtime debugging
6. AUTHOR Facebook Google


What are the important lifecycle methods in react ?

  1. componentWillMount()
  2. componentDidMount()
  3. componentWillRecieveProps()
  4. shouldComponentUpdate()
  5. componentWillUpdate()


How to share data between components in react ?

By using props we can share data between components. Props are passed from parent to child. If the child wants to access data or call parent functions, pass a callback from parent to child which will be called from parent with the relevant data we want to share.


What are higher order components in react ?

Higher order components or HOC is a way of reusing component logic in react. HOC components accept a component and return another component as output. They can accept any dynamically provided child component but they won’t modify or copy any behavior from their input components. You can say that HOC are ‘pure’ components.


What pure components in react ?

Pure components are the simplest and fastest components which can be written. They can replace any component which only has a render(). These components enhance the simplicity of the code and performance of the application.


Explain redux and it’s principles ?

Redux is one of the hottest libraries for front-end development in today’s marketplace. It is a predictable state container for JavaScript applications and is used for the entire applications state management. Applications developed with Redux are easy to test and can run in different environments showing consistent behavior.

  1. Single source of truth: The state of the entire application is stored in an object/ state tree within a single store. The single state tree makes it easier to keep track of changes over time and debug or inspect the application.
  2. State is read-only: The only way to change the state is to trigger an action. An action is a plain JS object describing the change. Just like state is the minimal representation of data, the action is the minimal representation of the change to that data. 
  3. Changes are made with pure functions: In order to specify how the state tree is transformed by actions, you need pure functions. Pure functions are those whose return value depends solely on the values of their arguments.


What are the components of redux?

  1. Action – It’s an object that describes what happened.
  2. Reducer –  It is a place to determine how the state will change.
  3. Store – State/ Object tree of the entire application is saved in the Store.
  4. View – Simply displays the data provided by the Store.