ReactJS Interview Questions and Answers

React is a JavaScript library that aims to simplify development of visual interfaces.Developed at Facebook and released to the world in 2013, it drives some of the most widely used code in the world, powering Facebook and Instagram among many, many other software companies.

Its primary goal is to make it easy to reason about an interface and its state at any point in time, by dividing the UI into a collection of components.React is used to build single-page web applications, along with many other libraries and frameworks that were available before React came into life.

1.What is React?

Ans:

React is an open-source frontend JavaScript library which is used for building user interfaces especially for single page applications. It is used for handling view layers for web and mobile apps. React was created by Jordan Walke, a software engineer working for Facebook. React was first deployed on Facebook’s News Feed in 2011 and on Instagram in 2012.

2.What are the major features of React?

Ans:

The major features of React are:

• It uses Virtual DOM in place of Real DOM
• It applies server-side rendering
• It follows the unidirectional flow of data
• It is data binding

3.What is JSX?

Ans:

JSX is a XML-like syntax extension to ECMAScript (the acronym stands for JavaScript XML). Basically it just provides syntactic sugar for the React.createElement() function, giving us expressiveness of JavaScript along with HTML like template syntax.

4.What is the difference between Element and Component?

Ans:

An Element is a plain object describing what you want to appear on the screen in terms of the DOM nodes or other components. Elements can contain other Elements in their props. Creating a React element is cheap. Once an element is created, it is never mutated.
Whereas a component can be declared in several different ways. It can be a class with a render() method. Alternatively, in simple cases, it can be defined as a function. In either case, it takes props as an input, and returns a JSX tree as the output:

5.How to create components in React?

Ans:

There are two possible ways to create a component.

Function Components: This is the simplest way to create a component. Those are pure JavaScript functions that accept props object as first parameter and return React elements:

6.When to use a Class Component over a Function Component?

Ans:

If the component needs state or lifecycle methods then use class components otherwise use the function component. However, from React 16.8 with the addition of Hooks, you could use state , lifecycle methods and other features that were only available in class component right in your function component.

7.What are pure components?

Ans:

React.PureComponent is exactly the same as React.Component except that it handles the shouldComponentUpdate() method for you. When props or state changes, PureComponent will do a shallow comparison on both props and state. Components 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 shouldComponentUpdate is called.

8.What is state in React?

Ans:

State of a component is an object that holds some information that may change over the lifetime of the component. We should always try to make our state as simple as possible and minimize the number of stateful components.

9.What are props in React?

Ans:

Props are inputs to components. They are single values or objects containing a set of values that are passed to components on creation using a naming convention similar to HTML-tag attributes. They are data passed down from a parent component to a child component.
The primary purpose of props in React is to provide following component functionality:

• Pass custom data to your component.
• Trigger state changes.
•  Use via this.props.reactProp inside component render() method.

10.What is the difference between state and props?

Ans:

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 components. Props get passed to the component similar to function parameters whereas state is managed within the component similar to variables declared within a function.

11.Why do we use render() in React?

Ans:

In React, each component must have a render() function. It returns a single React element, which is, in fact, the representation of the native DOM component.

When there is a need for more than one HTML element to be rendered, we group them in one enclosing tag, which can be,or some other tag. There is a need for the render() function to return the same result each time it is invoked i.e. it needs to be kept pure.

12. How does the React Router differ from conventional routing?

Ans:

• Changes in the URL – A HTTP request is sent to a server for receiving a corresponding HTML page in conventional routing. React routing necessitates only for a change in the History attribute.
• Navigation – In conventional routing, the user actually navigates across different web pages for each individual view. In React routing, however, the users feel like they are navigating across distinct webpages while in actuality they aren’t.
• Pages – Whereas in React routing only a single HTML page is involved, each view corresponds to a new file in conventional routing.

13.How will you distinguish Redux from Flux?

Ans:

1. 1. Components – React components subscribe to the store in flux whereas in redux, container components utilize connect
2. 2. Dispatcher – There is no dispatcher in redux. On the other hand, flux has a singleton dispatcher
3. 3. Number of Stores – While flux has several stores, there is only a single store for redux
4. 4. State – It is mutable for flux but immutable for redux
5. 5. Store – Influx, the store contains state as well as change logic. Contrary to this, the store in redux is separate from the change logic
6. 6. Store Type – All stores in flux are disconnected and flat. This is not the case with redux, where there is a single store with hierarchical reducers

14.What are the distinct features of React?

Ans:

The distinct features of React include the following.

• It uses Virtual DOM in place of Real DOM
• It applies server-side rendering
• It follows the unidirectional flow of data
• It is data binding

15.What are the advantages of React?

Ans:

There are varied advantages of React which include:

1. 1. It improves the performance of the application.
2. 2. It can be used for the client-side and the customer side.
3. 3. It increases the readability of code using JSX.
4. 4. It is easy to integrate with various other frameworks, including Angular, Meteor, etc.
5. 5. User Interface becomes more comfortable with React.

16. Are there any limitations to React?

Ans:

There are several limitations of React which include:

• It acts as a library and not as a framework.
• The contents of the library are so large that it consumes a considerable amount of time to understand.
• It is difficult to understand for the novice.
• The coding process becomes more complicated when inline templating and JSX are applied.

17. Define Synthetic Events in React?

Ans:

The Synthetic Events in React are the objects in React, which acts as a cross-browser wrapper around the browser’s native event. The main purpose is to combine the different browsers on the API so that the event shows various properties.

18.Define Refs in React?

Ans:

Refs stands for References to React. It helps in storing a reference to a particular react element or component that can be returned by the component render configuration function.

19. When are Refs mostly used?

Ans:

Refs are mostly used in the following cases:

• When there is a need to manage focus, select the text, or apply media playback.
• To initiate imperative animations.
• To join with the third-party DOM libraries.

20.What is a store in Redux?

Ans:

A store in Redux is a JavaScript object that can hold applications state and provide help to access them and apply dispatch actions along with register listeners.

21.Why do we need a Router to React?

Ans:

We need a Router to React so that we could define the multiple routes whenever the user types a particular URL. This way, the application of a particular router can be made when the URL matches the path defined inside the router.

22. What is middleware in ReactJS ?

Ans:

• Middleware is software that lies between an operating system and the applications running on it.
• In ReactJS the middleware sits in between the dispatch and reducers. We can alter our dispatched actions before they get to the reducers or execute some code during the dispatch.

23.what is Dispatch ?

Ans:

• Dispatch is a function of the Redux store.
• dispatch() is the method used to dispatch actions and trigger state changes to the store.
• You call store.dispatch to dispatch an action. This is the only way to trigger a state change. By default, a connected component receives props.dispatch and can dispatch actions itself.

24. What’s the difference between a controlled and an uncontrolled component?

Ans:

In an HTML document, many form elements (e.g. <select>, <textarea>, <input>) maintain their own state. An uncontrolled component treats the DOM as the source of truth for the state of these inputs. In a controlled component, the internal state is used to keep track of the element value. When the value of the input changes, React re-renders the input.

Uncontrolled components can be useful when integrating with non-React code (e.g if you need to support some kind of jQuery form plugin).

25.What are React hooks?

Ans:

Hooks are React’s attempt to bring the advantages of class-based components (i.e. internal state and lifecycle methods) to functional components.

26.What are the advantages of React hooks?

Ans:

There are several stated benefits of introducing hooks to React:

• Removing the need for class-based components, lifecycle hooks, and this keyword shenanigans
• Making it easier to reuse logic, by abstracting common functionality into custom hooks
• More readable, testable code by being able to separate out logic from the components themselves.

27. What is the difference between Virtual DOM and Real DOM?

Ans:

Virtual DOM	Real DOM
Changes can be made easily	Changes can be expensive
Minimal memory wastage	High demand for memory and more wastage
JSX element is updated if the element exists	Creates a new DOM every time an element gets updated
Cannot update HTML directly	Able to directly manipulate HTML
Faster updates	Slow updates

28.What is the meaning of the component-based architecture of React?

Ans:

In React, components are foundations used to build user interfaces for applications. With the component-based system in place, all of the individual entities become completely reusable and independent of each other. This means that rendering the application is easy and not dependent on the other components of the UI.

29.What is the use of an arrow function in React?

Ans:

An arrow function is used to write an expression in React. It allows users to manually bind components easily. The functionality of arrow functions can be very useful when you are working with higher-order functions particularly.

30.What is a higher-order component in React?

Ans:

Higher-order components (HOCs) are a widely used technique in React for applying concepts that involve the component reusability logic. They are not a native part of the React API and allow users to easily reuse the code and bootstrap abstraction.

HOCs are also used to allow simple sharing of behaviors across all of the components in React, adding more advances to the efficiency and functioning of the application.

31.How is routing in React different from conventional routing?

Ans:

Differences between the conventional routing and the routing in React can be shown using the following aspects:

• Pages: Each view is considered as a new file in conventional routing while it is considered as a single HTML entity in React.
• Navigation: In conventional routing, users have to move across web pages for viewing. In React, the views are not refreshed as objects are re-issued to create new views.

32.What is the significance of keys in React?

Ans:

Keys in React are used to identify unique VDOM Elements with their corresponding data driving the UI; having them helps React optimize rendering by recycling existing DOM elements. 

33.Explain the positives and negatives of shallow Rendering?

Ans:

Positives:

• It is faster to shallow render a component than to fully render it. When a React project contains a large number of components, this performance difference can have a significant impact on the total time taken for unit tests to execute.
• Shallow rendering prevents testing outside the boundaries of the component being tested—a best practice of unit testing.

Negatives:

• Shallow rendering is less similar to real-world usage of a component as part of an application, so it may not catch certain problems. Take the example of a <House /> component that renders a <LivingRoom /> component. Within a real application, if the <LivingRoom /> component is broken and throws an error, then <House /> would fail to render. However, if the unit tests of <House /> only use shallow rendering, then this issue will not be identified unless <LivingRoom /> is also covered with unit tests.

34.What are React Mixins?

Ans:

Mixins are a way to totally separate components to have a common functionality. Mixins should not be used and can be replaced with higher-order components or decorators.
One of the most commonly used mixins is PureRenderMixin. You might be using it in some components to prevent unnecessary re-renders when the props and state are shallowly equal to the previous props and state:

35.Why is isMounted() an anti-pattern and what is the proper solution?

Ans:

The primary use case for isMounted() is to avoid calling setState() after a component has been unmounted, because it will emit a warning.

Checking isMounted() before calling setState() does eliminate the warning, but it also defeats the purpose of the warning. Using isMounted() is a code smell because the only reason you would check is because you think you might be holding a reference after the component has unmounted.
An optimal solution would be to find places where setState() might be called after a component has unmounted, and fix them. Such situations most commonly occur due to callbacks, when a component is waiting for some data and gets unmounted before the data arrives. Ideally, any callbacks should be canceled in componentWillUnmount(), prior to unmounting.

36.What are the Pointer Events supported in React?

Ans:

Pointer Events provide a unified way of handling all input events. In the old days we had a mouse and respective event listeners to handle them but nowadays we have many devices which don’t correlate to having a mouse, like phones with touch surfaces or pens. We need to remember that these events will only work in browsers that support the Pointer Events specification.
The following event types are now available in React DOM:

• onPointerDown
• onPointerMove
• onPointerUp
• onPointerCancel
• onGotPointerCapture
• onLostPointerCapture
• onPointerEnter
• onPointerLeave
• onPointerOver
• onPointerOut

37.Why should component names start with capital letters?

Ans:

If you are rendering your component using JSX, the name of that component has to begin with a capital letter otherwise React will throw an error as an unrecognized tag. 

This convention is because only HTML elements and SVG tags can begin with a lowercase letter.

You can define a component class whose name starts with lowercase letter, but when it’s imported it should have capital letter. Here lowercase is fine:

export default myComponent
While when imported in another file it should start with capital letter:
import MyComponent from ‘./MyComponent’

38.What are the exceptions on React component naming?

Ans:

The component names should start with an uppercase letter but there are few exceptions to this convention. The lowercase tag names with a dot (property accessors) are still considered as valid component names.

39.Are custom DOM attributes supported in React v16?

Ans:

Yes. In the past, React used to ignore unknown DOM attributes. If you wrote JSX with an attribute that React doesn’t recognize, React would just skip it.

40.What is the difference between constructor and getInitialState?

Ans:

You should initialize state in the constructor when using ES6 classes, and getInitialState() method when using React.createClass().

Using ES6 classes:

Using React.createClass():

41.Can you force a component to rerender without calling setState?

Ans:

By default, when your component’s state or props change, your component will re-render. If your render() method depends on some other data, you can tell React that the component needs re-rendering by calling forceUpdate().
component.forceUpdate(callback)
It is recommended to avoid all uses of forceUpdate() and only read from this.props and this.state in render().

42.What is the difference between super() and super(props) in React using ES6 classes?

Ans:

When you want to access this.props in constructor() then you should pass props to super() method.

Using super(props):

Using super():

Outside constructor() both will display the same value for this.props.

43.How to loop inside JSX?

Ans:

You can simply use Array.prototype.map with ES6 arrow function syntax.

44.How do you access props in attribute quotes?

Ans:

React (or JSX) doesn’t support variable interpolation inside an attribute value. The below representation won’t work:

But you can put any JS expression inside curly braces as the entire attribute value. So the below expression works:

Using template strings will also work:

45.What is a React proptype array with shape?

Ans:

If you want to pass an array of objects to a component with a particular shape then use

46.How to conditionally apply class attributes?

Ans:

You shouldn’t use curly braces inside quotes because it is going to be evaluated as a string.

Instead you need to move curly braces outside (don’t forget to include spaces between class names):

Template strings will also work:

47.What is the difference between React and ReactDOM?

Ans:

The react package contains React.createElement(), React.Component, React.Children, and other helpers related to elements and component classes. You can think of these as the isomorphic or universal helpers that you need to build components. The react-dom package contains ReactDOM.render(), and in react-dom/server we have server-side rendering support with ReactDOMServer.renderToString() and ReactDOMServer.renderToStaticMarkup().

48.Why ReactDOM is separated from React?

Ans:

The React team worked on extracting all DOM-related features into a separate library called ReactDOM. React v0.14 is the first release in which the libraries are split. By looking at some of the packages, react-native, react-art, react-canvas, and react-three, it has become clear that the beauty and essence of React has nothing to do with browsers or the DOM.
To build more environments that React can render to, React team planned to split the main React package into two: react and react-dom. This paves the way to writing components that can be shared between the web version of React and React Native.

49.How to use the React label element?

Ans:

If you try to render a <label> element bound to a text input using the standard for attribute, then it produces HTML missing that attribute and prints a warning to the console.

Since for is a reserved keyword in JavaScript, use htmlFor instead.

50.How to combine multiple inline style objects?

Ans:

You can use spread operator in regular React:

If you’re using React Native then you can use the array notation:

51.What is the difference between setState() and replaceState() methods?

Ans:

When you use setState() the current and previous states are merged. replaceState() throws out the current state, and replaces it with only what you provide. Usually setState() is used unless you really need to remove all previous keys for some reason. You can also set state to false/null in setState() instead of using replaceState().

52.Why is a component constructor called only once?

Ans:

React’s reconciliation algorithm assumes that without any information to the contrary, if a custom component appears in the same place on subsequent renders, it’s the same component as before, so reuses the previous instance rather than creating a new one.

53.Is it possible to use async/await in plain React?

Ans:

If you want to use async/await in React, you will need Babel and transform-async-to-generator plugin. React Native ships with Babel and a set of transforms.

54.What are the main features of React Intl?

Ans:

Below are the main features of React Intl,

1. 1. Display numbers with separators.
2. 2. Display dates and times correctly.
3. 3. Display dates relative to “now”.
4. 4. Pluralize labels in strings.
5. 5. Support for 150+ languages.
6. 6. Runs in the browser and Node.
7. 7. Built on standards.

55.What is Jest?

Ans:

Jest is a JavaScript unit testing framework created by Facebook based on Jasmine and provides automated mock creation and a jsdom environment. It’s often used for testing components.

56.What are the advantages of Jest over Jasmine?

Ans:

There are couple of advantages compared to Jasmine:

1. 1. Automatically finds tests to execute in your source code.
2. 2. Automatically mocks dependencies when running your tests.
3. 3. Allows you to test asynchronous code synchronously.
4. 4. Runs your tests with a fake DOM implementation (via jsdom) so that your tests can be run on the command line.
5. 5. Runs tests in parallel processes so that they finish sooner.

57.What is the difference between Dumb components and Smart components?

Ans:

Dumb components and smart components are a design pattern in React. Essentially, it boils down to this: smart components handle the business logic and dumb components directly render the UI. Consequently, smart components are stateful and dumb components are stateless and rely solely on props.

58.What are the fundamentals of the Flux architecture?

Ans:

Flux is a design pattern for developing large React applications. This is the continuation of Reactive programming patterns, particularly useful while working with the UI.

Flux consists of a store, which holds the global state of the application. The View then, is a function that takes the state and produces the UI. Ideally, the View must be pure and consistent, i.e. the same state will result in the same UI and UI never changes the state directly. Instead, it sends actions (events) to the Dispatcher. The Dispatcher will receive the actions, make the necessary changes to the State and notify the Views that they now have to re-render. The most popular libraries that implement Flux are Redux and RxJS.

59.What are some ways of managing Global State?

Ans:

Two main approaches to managing global state in React applications is Redux and React Context.

Redux is a third-party library that is not part of React. It lets you define a global state object and query it in your components using selectors. Components, on the other hand, send actions to modify the state. Redux modifies it and rerenders all the components that care for this particular change.

React Context is something that is part of React, unlike Redux. Context also provides you a way of handling global state. Unlike Redux, you can have multiple Contexts, and access them independently. The concert about Context, however, is performance issues when handling a huge number of actions. On the plus side, Context has much less overhead. You must decide which one to use based on the project requirements and scopes.

60.What is Global State and why do we need it?

Ans:

While components have states, these states are local to them. You cannot directly access a component’s state from another component. Sometimes you have some data that needs to be displayed in many different places, such as the user’s name, theme (dark/light mode), locale, and so on.

One way to do that is to define this state somewhere up in the tree and pass it down as props. However, this is hardly possible once you have more than 20+- components. Your code will become an unreadable mess. This is when you need to store global state.

61.What is a function based component in React?

Ans:

Basically Function Based Components are the components which are made by JavaScript Functions.It takes props as argument and returns JSX.

62.What are refs used for in React?

Ans:

Refs are a function in React having the following uses:

• Accessing DOM and React elements that you have created.
• Changing the value of a child component without using props and others.

63.What is meant by pooling?

Ans:

The server needs to be regularly monitored for updates. The aim is to check for the presence of new comments. This process is considered as pooling. It checks for the updates almost every 5 seconds. Pooling helps keep an eye on the users and ensure there is no negative information on servers.

64.Why immutability is important in React?

Ans:

There are generally two approaches to changing data. The first approach is to mutate the data by directly changing the data’s values. The second approach is to replace the data with a new copy which has the desired changes.

65.What can you do if the expression contains more than one line?

Ans:

Enclosing the multiline JSX expression is the best option. Sometimes it becomes necessary to avoid multi-lines in order to perform the task reliably and for getting the expected results.

66. Is it possible to use the word Class in JSX?

Ans:

No. This is because the word Class is an occupied word in JavaScript. If you use the word Class JSX will get translated to JavaScript.

67.Is it possible to display props on a parent component?

Ans:

Yes. This is a complex process, and the best way to do it is by using a spread operator.

68.How to reload the current page in react js?

Ans:

Reloading/Refreshing a page using Javascript:

Use Vanilla JS to call the reload method for the specific page using the following code:

window.location.reload(false);

69.How do you reference a DOM element in react?

Ans:

In React, an object this.refs which is found as an instance inside the component can be used to access DOM elements in Reactjs.

70. What are the key benefits of ReactJS development?

Ans:

Key Benefits of ReactJS Development

1. 1. Allows Developers to Reuse the Components
2. 2. It is Much Easier to Learn
3. 3. The Benefit of Having JavaScript Library
4. 4. SEO Friendly
5. 5. It ensures faster rendering
6. 6. The Increase in Community Base
7. 7. The Support of Handy Tools
8. 8. Scope for Testing the Codes etc

71.What are synthetic events?

Ans:

It is a cross-browser wrapper that is around the native event of the same browser. This is the most important question in react interview questions.

72.What are the characteristics of React?

Ans:

• Lightweight DOM For Better Performance
• In React, everything is treated as components.
• React uses JSX (JavaScript eXtension) that allows us to write JavaScript that looks like HTML
• React operates not directly on the browser’s Document Object Model (DOM) immediately, but on a virtual DOM
• ReactJS follows unidirectional data flow or one-way data binding.

73.What do you understand from “In React, everything is a component.”?

Ans:

Building blocks of the UI of a React application are components. These parts divide the entire UI into tiny parts that are autonomous and reusable. Then it becomes independent of each of these parts without affecting the remainder of the UI.

74.What are the different phases of the React component’s lifecycle?

Ans:

There are three different phases of React component’s lifecycle:

1.Initialization : The initialization phase is where we define defaults and initial values for this.props and this.state.

2.Mounting : Mounting is the process that occurs when a component is being inserted into the DOM

3.Updating : This is  the phase when the updating of the component occurs whenever the state  is changed  or component receives a new  prop

4.Unmounting : This is the phase when the component is unmounted from the DOM.

75. List some of the cases where you should use Refs?

Ans:

Following are the cases when refs should be used:

• When you need to manage focus, select text or media playback
• To trigger imperative animations
• Integrate with third-party DOM libraries

76.What do you mean by Higher Order Components (HOC)?

Ans:

A higher-order component in React is a pattern used to share common functionality between components without repeating code.

A higher-order component is actually not a component though, it is a function that takes a component and returns a new component. It transforms a component into another component and adds additional data or functionality

77. What can be done with HOC?

Ans:

HOC can be used for many tasks like:

• Code reuse, logic and bootstrap abstraction
• Render Hijacking
• State abstraction and manipulation
• Props manipulation

78.What were the major problems with MVC framework?

Ans:

Following are some of the major problems with MVC framework:

• MVC doesn’t solve the Code complexity problem. It doesn’t solve the code reuse or no-flexibility problem either.
• It doesn’t guarantee decoupled code.

79.What are the three principles that Redux follows?

Ans:

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.

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. 

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.

80. What do you understand by “Single source of truth”?

Ans:

single source of truth (SSOT) is the practice of structuring information models and associated data schema such that every data element is mastered (or edited) in only one place

Redux uses ‘ Store ‘ to store the entire state of the application at one location. So all the state of the component is stored in the store and the store itself receives updates. The single state tree makes tracking modifications simpler over time and debugging or inspecting the request.

81. List down the components of Redux.

Ans:

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.

82. Explain the role of Reducer.

Ans:

Reducers are simple features that indicate how the state of the application changes in an ACTION reaction. Reduces job by taking the preceding state and action, and then returns a fresh state. It determines what kind of update is required based on the action type, and then returns new values. If there is no work to be accomplished, it returns the prior state as it is.

83.How are Actions defined in Redux?

Ans:

Actions in React must have a type property that indicates the type of ACTION being performed. They must be defined as a String constant and you can add more properties to it as well. In Redux, actions are created using the functions called Action Creators. 

84.Why is switch keyword used in React Router v4?

Ans:

Within the Switch component, Route and Redirect components are nested inside. Starting from the top Route/Redirect component in the Switch, to bottom Route/Redirect, each component is evaluated to be true or false based on whether or not the current URL in the browser matches the path/from prop on the Route/Redirect component.Switch is that it will only render the first matched <Route/> child.

85.How is React Router different from conventional routing?

Ans:

React Routing	Conventional Routing
Only single HTML page is involved	Each view corresponds to a new file
Only the History attribute is changed	A HTTP request is sent to a server and corresponding HTML page is received

86.List down the advantages of React Router.

Ans:

Just like how React is based on components, in React Router v4, the API is ‘All About Components’. A Router can be visualized as a single root component (<BrowserRouter>) in which we enclose the specific child routes (<route>).

No need to manually set History value: In React Router v4, all we need to do is wrap our routes within the <BrowserRouter> component.

The packages are split: Three packages one each for Web, Native and Core. This supports the compact size of our application. It is easy to switch over based on a similar coding style.

87.What are the most common approaches for styling a React component?

Ans:

There are a couple of ways you can style a React component, and you should be able to describe how each works. Here are the main ways in which React components are styled:

• CSS Classes: React allows you to use traditional CSS class names to define styles for a component.
• Inline CSS: Inline CSS allows you to scope styles to a particular element on a web page.
• JavaScript Modules: JavaScript modules like styled-jsx and styled components are also used to style components.
• Preprocessors: Preprocessors like Sass and Less are another option to style a component.

88.What tools can you use to make a React application more accessible?

Ans:

There are two main types of tools you can use to help identify accessibility problems in an application. The first is a static analysis tool, such as ESLint, which allows you to analyze your code at a component level.

The second type of tool you may use is a browser accessibility tool like Google Lighthouse, which performs accessibility tests on the level of the application. These plugins allow you to discover larger problems with accessibility because they simulate how a user will interact with a given web application.

89.Why is it used?

Ans:

The Redux library is often used because it adds more structure to your code, thereby making it easier to maintain your codebase. In addition, the developer tools offered by Redux can help with performance tracking such as events and state changes. This data can give you more insight into how your application works, and how it can be made more efficient.

90.How would you debug an issue in React code? What debugging tools have you used?

Ans:

Debugging as a crucial part of the development process. Before you start your next React JS job interview, make sure you have experience with the following industry standard debugging tools (and can explain how you’d use them):

• Linters (eslint, jslint)
• Debuggers (React Developer Tools)

91.What are some testing tools you would use for unit testing in a ReactJS application?

Ans:

Unit testing is a technique to test that isolated segments of code are functioning properly. Some tools for testing ReactJS applications include Enzyme, Jest, react-testing-library, React, unit, Skin-deep, Unexpected-react.

92.What is React Portal?

Ans:

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. For example, it can simplify Modal window rendering or changing information inside <head></head> tags.

93.What is React Fragment?

Ans:

React Fragments are for grouping a list of children without adding extra nodes to the DOM. Because React forces us to return only one object from render, we should wrap children into div or a similar container tag. Sometimes it‘s simpler to return several tags without a container to implement some features.

94.What is React Reconciliation? 

Ans:

Reconciliation is the process that React uses to efficiently update the DOM. It does this by only updating the parts that need it. At a single point in time, the render() function will create a tree of React elements. On the next state or props update, that render() function will return a different tree of React elements. React then needs to figure out how to efficiently update the UI to match the most recent tree. The process of figuring this out is reconciliation.

95.How do you avoid performance issues?

Ans:

To avoid performance issues we should:

• Add ’key‘ prop
• Use PureComponent with React.memo()
• Memoize functions (reselect, for example).

96.What is the ’PropTypes‘ library?

Ans:

PropTypes is the type-checking addition to React Library, which exports a range of validators to make sure the data component received is valid. Using it is a good idea, because it reduces the number of bugs and makes components self-documented.

97.How to add Google Analytics in React?

Ans:

98.How to pass a parameter to an event handler or callback?

Ans:

You can use an arrow function to wrap around an event handler and pass parameters:

This is an equivalent to calling .bind: