React Js Interview Questions You Should Be Prepared to Answers Top 55

1: What is ReactJS?
Answer: This is the question that you are most likely to get asked straight off the bat.

What an employer would usually want to do here is to check you’re thinking process. It’s quite obvious whenever a person is trying to come up with his own definition of something, and when he’s simply reciting a text that he had memorized earlier.

Needless to say, the second option isn’t the better one. Anyone can memorize a given text – that’s isn’t one bit impressive. If you are able to explain difficult topics in an easily understandable manner, however – that’s something else! It shows that you have put in the time and the energy to actually study the subject, not just mindlessly memorize it.

2. What do you understand by refs in React?
Refs is the shorthand for References to React. It is an attribute which helps to store a reference to a particular React element or component, which will be returned by the components render configuration function. It is used to return references to a particular element or component returned by render(). They come in handy when we need DOM measurements or to add methods to the components.

3. What are the three principles that Redux follows?
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.

The 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 the state is the minimal representation of data, the action is the minimal representation of the change to that data.

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. Store – React Interview Questions -SVR

4. What is the difference between state and props?
Both props and state are plain JavaScript objects. While both of them hold information that influences the output of render, they are different in their functionality with respect to the component. Props get passed to the component similar to function parameters whereas the state is managed within the component similar to variables declared within a function.

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 a container component?
Containers are components which usually provide data and logic and are not concerned with rendering the view. Containers are in most cases connected components and get the data from the state and pass down actions bound to dispatch.

7. What is React Router?
React Router is a powerful routing library built on top of React, which helps in adding new screens and flows to the application. This keeps the URL in sync with data that’s being displayed on the web page. It maintains a standardized structure and behavior and is used for developing single-page web applications. React Router has a simple API.

8. What is the significance of Store in Redux?
A store is a JavaScript object which can hold the application’s state and provide a few helper methods to access the state, dispatch actions and register listeners. The entire state/ object tree of an application is saved in a single store. As a result of this, Redux is very simple and predictable. We can pass middleware to the store to handle the processing of data as well as to keep a log of various actions that change the state of stores. All the actions return a new state via reducers. 

9. What is conditional rendering?
 In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application. This is called Conditional Rendering. In React it works the same way conditions work in JavaScript. Use JavaScript operators like if or the conditional operator to create elements representing the current state, and let React update the UI to match them.

10. How does ReactJS utilize ‘keys’?
React uses keys to differentiate between simple virtual DOM elements and those who are unique. Furthermore, keys help React recycle existing DOM elements so that the library would run and render smoother.

11. What is a Higher Order Component? Put examples?
Higher-Order Component is an advanced way of reusing the component logic. Basically, it’s a pattern that is 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. You can say that HOC is ‘pure’ components. (Interview Questions and Answers)

12. How To Use Forms In Reactjs?
In React’s virtual DOM, HTML Input element presents an interesting problem. With the other DOM environment, we can render the input or textarea and thus allows the browser to maintains its state that is (its value). we can then get and set the value implicitly with the DOM API.

In HTML, form elements such as itself maintain their own state and update its state based on the input provided by the user. In React, components’ mutable state is handled by the state property and is only updated by setState()

13. What Are the Differentiate between stateful and stateless components?
Stateful Components:

1. The Stateful Components have stored the information about the component’s state and have the authority to change state.

2. The Stateless components notify them about the requirement of the state change and send to props.

Stateless Component:

1. The Stateless components are used to calculates the internal state and do not have the authority to change state.

2. The Stateless components receive the props from the Stateful components and treat them as callback functions.

14. How Virtual-DOM is more efficient than Dirty checking?
In React, each of our components has a state. This state is like an observable. Essentially, React knows when to re-render the scene because it is able to observe when this data changes. Dirty checking is slower than observables because we must poll the data at a regular interval and check all of the values in the data structure recursively. By comparison, setting a value on the state will signal to a listener that some state has changed, so React can simply listen for change events on the state and queue up re-rendering.

The virtual DOM is used for efficient re-rendering of the DOM. This isn’t really related to dirty checking your data. We could re-render using a virtual DOM with or without dirty checking. In fact, the diff algorithm is a dirty checker itself.

We aim to re-render the virtual tree only when the state changes. So using an observable to check if the state has changed is an efficient way to prevent unnecessary re-renders, which would cause lots of unnecessary tree diffs. If nothing has changed, we do nothing.

15. List down the components of Redux?

Redux is composed of the following components:

Action:  It’s an object that describes what happened.

Reducer: It is a place to determine how the state will change.

Store: State/ Object tree of the entire application is saved in the Store.

View:  Simply displays the data provided by the Store.

16. How ReactJS framework is different as compared to others?
Basically, ReactJS is a limited library that builds UI parts, it is essentially not quite the same as a considerable measure of other JavaScript structures. One common example is AngularJS approaches building an app simply by expanding HTML markup and infusing different develop such as controller at runtime. Therefore, AngularJS is exceptionally obstinate about the more noteworthy engineering of your application. 

17. How is ReactJs different from AngularJS?
The first difference between both of them is their code dependency. ReactJS depends less on the code whereas AngularJS needs a lot of coding to be done. The packaging on React is quite strong as compared to the AngularJS. Another difference is React is equipped with Virtual Dom while the Angular has a Regular DOM. ReactJS is all about the components whereas AngularJS focus mainly on the Models, View as well as on Controllers. AngularJS was developed by Google while the ReactJS is the outcome of facebook. These are some of the common differences between the two.

18. Do you think ReactJS has any limitations? If so, tell a few?
 Yes, there are a few drawbacks which are associated with this platform. The leading drawback of the ReactJS is the size of its library. It is very complex and creates a lot of confusion among the developers. Also, there are lots of developers all over the world which really don’t like the JSX and inline templating. In addition to this, there is another major limitation of ReactJS and i.e. only cover one layer of the app and i.e.View. Thus to manage the development, developers have to depend on several other technologies which consume time.

19. How do you tell React to build in Production mode and what will that do?
Ordinarily you’d utilize Webpack’s DefinePlugin strategy to set NODE_ENV to production. This will strip out things like prototype approval and additional notices. Over that, it’s likewise a smart thought to minify your code in light of the fact that React utilizes Uglify’s dead-code end to strip out advancement just code and remarks, which will radically diminish the measure of your package.

20. In which life cycle event do you make AJAX requests and why?
AJAX solicitations ought to go in the component Did Mount life cycle event.

There are a couple of reasons behind this,

Fiber, the following usage of React’s reconciliation algorithm, will be able to begin and quit rendering as required for execution benefits. One of the exchange offs of this is component Will Mount, the other life cycle event where it may bode well to influence an AJAX to ask for will be “non-deterministic”. This means React may begin calling component Will Mount at different circumstances at whenever point it senses that it needs to. This would clearly be a bad formula for AJAX requests.

You can’t ensure the AJAX request won’t resolve before the component mounts. In the event that it did, that would imply that you’d be attempting to setState on an unmounted component, which won’t work, as well as React will holler at you for. Doing AJAX in componentDidMount will ensure that there’s a component to update.

21. What exactly you can do if the expression contains more than one line?
In such a situation, enclosing the multi-line JSX expression is an option. If you are a first time user, it may seem awkward but later you can understand everything very easily. Many times it becomes necessary to avoid multi-lines to perform the task reliably and for getting the results as expected.

22. What’re the Challenges with React Native?

  • Working across separate iOS and Android codebases are challenging.
  • “When we were building the app, Facebook used this model, and all our build automation and developer processes were set up around it. However, it doesn’t work well for a product that, for the most part, has a single shared JavaScript codebase,” wrote Daniel Witte and Philipp von Weitershausen, engineers at Facebook in a blog yesterday.
  • Developers who often struggle to figure out where the master code exists and whether bugs have been fixed in all platforms may want to hold out for when Facebook opens up its unified repository. It is moving all of its code from Git to Mercurial and will be one of the largest codebases of its kind.
  • Google is another web giant that understands the power of open-source, recently committing to OpenStack and creating an entirely open-source container management project, Kubernetes. The project seems at odds with its own Google cloud business, but again, it knows that the benefits outweigh any loss of Google cloud customers.

23. Are there any disadvantages to using React Native for mobile development?
Having played around with it for a few weeks, I’ve found React Native to be fairly buggy. I don’t think it’s anywhere near production-ready. A lot of features are currently still missing, for example, pin annotations for maps. Being that it’s open-source, there’s nothing stopping you from building the feature yourself, but if you’re trying to get something created quickly / for production, you’re better off using developing directly for iOS or Android. 

24. How is the state changed in Redux?
The only way to change the state is to emit an action, an object describing what happened. This ensures that neither the views nor the network callbacks will ever write directly to the state. Instead, they express an intent to transform the state. Because all changes are centralized and happen one by one in a strict order, there are no subtle race conditions to watch out for. As actions are just plain objects, they can be logged, serialized, stored, and later replayed for debugging or testing purposes.pened. This ensures that neither the views nor the network callbacks will ever write directly to the state. Instead, they express an intent to transform the state. Because all changes are centralized and happen one by one in a strict order, there are no subtle race conditions to watch out for. As actions are just plain objects, they can be logged, serialized, stored, and later replayed for debugging or testing purposes.

It is necessary because components are not the DOM element but they are constructors. If they are not capitalized, they can cause various issues and can confuse developers with several elements. At the same time, the problem of integration of some elements and commands can be there.

25. What is the difference between React Native and React?

  • React is a JavaScript library, supporting both front end web and being run on the server, for building user interfaces and web applications.
  • On the other hand, React Native is a mobile framework that compiles to native app components, allowing us to build native mobile applications (iOS, Android, and Windows) in JavaScript that allows us to use ReactJS to build our components, and implements ReactJS under the hood.
  • With React Native it is possible to mimic the behavior of the native app in JavaScript and at the end, we will get platform-specific code as the output. We may even mix the native code with the JavaScript if we need to optimize our application further.

26. What is data mutation and how to prevent it?
This is a bit tricky question as there are multiple correct answers and approaches. What we look for is understanding that arrays and objects can be passed around and since they are references, we are changing the original array or object. This leads to side effects and often unwanted behavior. The preferred way is never to mutate objects or arrays and when modifying, always create and return a new copy. We can take advantage of the spread operator, object.assign or libraries like ImmutableJS. Mentioning array. slice vs splice is a plus.

27. What are selectors? Why would you use reselect or a memoization library?
Selectors are functions which accept the state and return a portion of it while applying calculations, transformations, mappings, filtering, etc. This way the logic of how to retrieve data for a specific view is encapsulated in a selector. Since many of the mentioned operations are expensive, when calling the selector again without state change, you want to skip the expensive operations as they will return the same results and hence the usage of reselecting. Reselect will return the results from the Cashe in case arguments didn’t change.

28. How To Use Events In Reactjs?
React identifies every event so that it must have common and consistent behavior across all the browsers. Normally, in normal JavaScript or other frameworks, the onchange event is triggered after we have typed something into a Textfield and then “exited out of it”. In ReactJS we cannot do it in this way.

29. What is the second argument that can optionally be passed to setState and what is its purpose?
A callback work which will be conjured when setState has completed and the part is re-rendered.

Something that is not talked about a great deal is that setState is asynchronous, which is the reason it takes in a moment callback function. Ordinarily it’s best to utilize another lifecycle strategy instead of depending on this callback function, however, it’s great to know it exists.

30. Why browsers cannot read JSX?
Actually, JSX is not considered as a proper JavaScript. Browsers cannot read them simply. There is always a need to compile the files that contain JavaScript Code. This is usually done with the help of JSX compiler which performs its task prior to file entering the browser. Also, compiling is not possible in every case. It depends on a lot of factors such as the source or nature of file or data. 

31. What are state and props and its difference?
Both props and state are plain JavaScript objects. While both of them hold information that influences the output of render, they are different in their functionality with respect to the component. Props get passed to the component similar to function parameters whereas the state is managed within the component similar to variables declared within a function. 

32. How did Facebook write React Native for Android?

  • The first cross-platform React Native app – ads manager – was developed by the London-based dev team, who were in the US to announce the Android release yesterday evening. Ads manager lets businesses that advertise on the social network manage their accounts and create new adverts.
  • React Native has only recently been proven in production and building a new app based on the framework carried some risk.
  • Three product engineers familiar with React set about to create an app for Android and predicted problems with the logic necessary to understand differing time zones, date formats, currencies and ad formats across the world.
  • This business logic was already written in JavaScript, and the team knew it wouldn’t be efficient to build it all again in Objective-C to do it again in Java for Android.
  • Now this project has been released on Github, developers can use a single workflow to develop for iOS and Android. This means you can use the same editor and propagate it to both the iOS simulator and Android emulator at the same time.
  • Airbnb, Box, Facebook, GitHub, Google, Instagram, LinkedIn, Microsoft, Pinterest, Pixar Animation Studios, Twitter, Uber, and WhatsApp all use React code.

33. Are all React components usable in React Native?

  • Web React components use DOM elements to display (ex. div, h1, table, etc) but these are not supported by React Native. You’ll need to find libraries/components made specifically for React Native.
  • I doubt there are components that support both, thus it should be fairly easy to figure out if it’s made for React Native or not. As of now, if the creator does not specifically say that they made to React Native, it probably does not work on React Native.

34. Difference between React Native and NativeScript, which one do you prefer and why?

  • React JS for the web is fantastic. But when it comes to React Native – I felt I was boxed or caged to Reacts way of creating the views and constructing the screen thereafter.
  • With NativeScript that’s not the case. The UI definition follows XML syntax. I know XML so easy to follow. When it comes to application logic – it allows ES5, TypeScript – again which I already know so I can reuse my skill. You use a subset of CSS to style your app. Again the big plus point here – if you know CSS3, NS allows you to use most of the basic rule sets to style your app. Basically, NS is all about open standards – you don’t have to learn anything new. you use what you already know.

35. What is the concept of a “single source of truth” in Redux?
The state of your whole application is stored in an object tree within a single store. This makes it easy to create universal apps, as the state from the server can be serialized and hybridized into the client with no extra coding effort. A single state tree also makes it easier to debug or introspect an application; it also enables persisting the app’s state in development, for a faster development cycle.

36. What is the significance of keys in React?
Keys are used for identifying unique Virtual DOM Elements with their corresponding data driving the UI. They help React to optimize the rendering by recycling all the existing elements in the DOM. These keys must be a unique number or string, using which React JS just reorders the elements instead of re-rendering them. This leads to an increase in the application’s performance. (Angular Js Training Online)

37. What do you understand by “Single source of truth”?
Redux uses ‘Store’ for storing the application’s entire state at one place. So all the component’s state is stored in the Store and they receive updates from the Store itself. The single state tree makes it easier to keep track of changes over time and debug or inspect the application.

38. Why is switch keyword used in React Router v4?
Although a is used to encapsulate multiple routes inside the Router. The ‘switch’ keyword is used when you want to display only a single route to be rendered amongst the several defined routes. The tag when in use matches the typed URL with the defined routes in sequential order. When the first match is found, it renders the specified route. Thereby bypassing the remaining routes. 

39. What is used to change the state of a React component?
setState() and forceUpdate(). Both forceUpdate() and setState() are called within a React Component. Both of these functions tell React to re-render the component.

40. What are Stateless Components in React?
Stateless components are also known as the functional component in React. When a component is “stateless”, it never mutates the state. With the same inputs, it will always produce the same output. It means it has no knowledge of the past, current or future state changes.

41. Why do we need a Router to React?
A Router is used to define multiple routes and when a user types a specific URL, if this URL matches the path of any ‘route’ defined inside the router, then the user is redirected to that particular route. So basically, we need to add a Router library to our app that allows creating multiple routes with each leading to us a unique view.

42. How the parent and child components exchange information?
This task is generally performed with the help of functions. Actually, there are several functions which are provided to both parent and child components. They simply make use of them through props. Their communication should be accurate and reliable. The need of same can be there anytime and therefore functions are considered for this task. They always make sure that information can be exchanged easily and in an efficient manner among the parent and child components.

43. What do you understand with the term polling?
 The server needs to be monitored for updates with respect to time. The primary aim in most of the cases is to check whether novel comments are there or not. This process is basically considered as pooling. It checks for the updates approximately every 5 seconds. It is possible to change this time period easily. Pooling help keeping an eye on the users and always make sure that no negative information is present on the servers. Actually, it can create issues related to several things and thus pooling is considered.

44. What’s the difference between an Element and a Component in React?

  • Basically, a React component describes what you need to see on the screen. Not all that basically, a React element is a protest portrayal of some UI.
  • A React component is a function or a class which alternatively acknowledges input and returns a React component (ordinarily by means of JSX which gets transpiled to a createElement invocation).

45. How many outermost elements can be there in a JSX expression?
 It must have one JSX element present so that the task can be accomplished easily. Having more than one expression is not an issue but probably it will slow down the process. There are also chances of confusion with more than one expression if you are new to this technology.

46. How DOM and Virtual Dom object are different from one another?
Virtual DOM is not capable to affect the HTML directly. As compared to a regular DOM, Virtual is quite faster and can perform its task reliably. In addition to this, Virtual Dome is capable to automate itself. Also, Virtual DOM is capable to handle more tasks without facing any of the issues. 

47. Why open source?

  • “If we work together in the open, we can advance the state of technology together,” Facebook said in a blog post yesterday evening.
  • Altruism aside, opting to open source code is a tricky decision. Keeping a businesses infrastructure under-wraps has commercial advantages, especially when your technology is your business model.
  • But the developer community is loyal to those who open up. Web engineers across the world are quick to point out a bug in the code for free.
  • Developing open-source projects helps keep Facebook one of the most coveted companies to work for. Developers want a challenge, and a sense of giving back – and Facebook wants a large pool of talented engineers to pick its employees from.
  • Plus, it saves on training. If every engineer Facebook hires already knows how to write in React Native, they have a running start.
  • Facebook has a culture of maturing its development. Over ten years’ it has scaled to serve one billion users, thousands of developers and three major platforms – iOS, Android and Web.
  • It’s a considerable development from when the fledgling startup copied Facebook code on Harvard University’s server for releases and,
  • “poke on it to see if it was still working every day at 10 am,” mobile engineering manager Bryan O’Sullivan joked earlier this year. (react js interview questions)

48. What is the difference between using constructor vs getInitialState in React / React Native?
The two approaches are not interchangeable. You should initialize state in the constructor when using ES6 classes, and define the get Initial State method when using React. create a Class.

49. What is State and why use State?
The state is mutable, In other word you can change the state inside the component. The component state can be changed over time in response to user actions, API responses, and any other. We have class-based components by extending React. Component class to get state features. Define the state initial inside the constructor. State is accessed via this.state(). It will use this.setState() to schedule updates to the component local state. It is only using inside the component.

50. What are synthetic events in React?
In React, when you specify an event in JSX as we did with onClick, you are not directly dealing with regular DOM events. Instead, you are dealing with a React-specific event type known as a SyntheticEvent. Your event handlers don’t get native event arguments of type MouseEvent, KeyboardEvent, etc. They always get event arguments of type SyntheticEvent that wrap your browser’s native event instead.

51. What Are Components In Reactjs?

  • React encourages the idea of reusable components. They are widgets or other parts of a layout (a form, a button, or anything that can be marked up using HTML) that you can reuse multiple times in your web application.
  • ReactJS enables us to create components by invoking the React.createClass() method features a render() method which is responsible for displaying the HTML code.
  • When designing interfaces, we have to break down the individual design elements (buttons, form fields, layout components, etc.) into reusable components with well-defined interfaces. That way, the next time we need to build some UI, we can write much less code. This means faster development time, fewer bugs, and fewer bytes down the wire.

52. What were the major problems with MVC framework?

Following are some of the major problems with MVC framework:

1. DOM manipulation was very expensive

2. Applications were slow and inefficient

3. There was huge memory wastage

4. Because of circular dependencies, the complicated model was created around models and views

53. What is Pure Component? When to use Pure Component over Component?

  • Pure Component is exactly the same as Component except that it handles the should Component Update method for us. When props or state changes, Pure Component will do a shallow comparison on both props and state. Component, on the other hand, won’t compare current props and state to next out of the box. Thus, the component will re-render by default whenever should Component Update is called.
  • When comparing previous props and state to next, a shallow comparison will check that primitives have the same value (eg, 1 equals 1 or that true equals true) and that the references are the same between more complex javascript values like objects and arrays.
  • It is good to prefer Pure Component over Component whenever we never mutate our objects.

54. What Are The Advantages Of Using Reactjs?

Advantages of ReactJS:

  • React uses virtual DOM which is a JavaScript object. This improves application performance as JavaScript virtual DOM is faster than the regular DOM.
  • React can be used on the client and as well as the server-side too.
  • Using React increases readability and makes maintainability easier. Component, Data patterns improves readability and thus makes it easier to maintain larger apps.
  • React can be used with any other framework (Backbone.js, Angular.js) as it is only a view layer.
  • React’s JSX makes it easier to read the code of our component. It’s really very easy to see the layout. How components are interacting, plugged and combined with each other in the app.

55. What are controlled and uncontrolled components?
There are components in the ReactJS that maintain their own internal state. They are basically considered as uncontrolled components. On the other side, the components which don’t maintain any internal state are considered as controlled components in ReactJS. Controlled components can easily be controlled by several methods. Most of the React components are controlled components.

Leave a Comment