ReactJS

React is a JavaScript library for building user interfaces. So if you are using ReactJS, then you must go through these interview questions to prepare for a higher role in in Web development.



Q.1 What do you understand by JSX in ReactJS?
JSX refers to the syntax extension defined for JavaScript to be used in ReactJS. JSX is primarily used for UI definition and its look and feel, in ReactJS. With JSX the HTML structure can be present in the file with JavaScript code. JSX is used for production of ReactJS elements.
Q.2 Do web browsers can directly read and process JSX in ReactJS?
As JSX is not HTML or JavaScript hence, web browsers cannot read or process or apply the JSX instructions. Web browsers have rendering and processing engines to process HTML or JavaScript code. Hence, JSX needs to be translated to web browser understandable format of JavaScript object.
Q.3 What is meant by the virtual DOM in ReactJS?
The term DOM expands to Document Object Model which is a logical representation of a HTML document as tree like structure showing the web page or document at the tops and next level elements or group or objects listed below and it goes till the last level where only elements or objects are present. The real DOM is called as virtual DOM in ReactJS as element level changes are done on the specific element in virtual DOM instead or updating the complete DOM.
Q.4 Illustrate an event in ReactJS
Event in ReactJS are essential for providing the dynamic behaviour of the event ReactJS application. An event is a trigger or input either from user or the system for a specific task like mouse click. Camel case is sued for naming ReactJS events.
Q.5 Describe synthetic events in ReactJS
Synthetic events in ReactJS provide an integrated API against the response of multiple web browsers’ native events. This facilitates easy and quick development, The ReactJS application also becomes seamless as it is able to manage different web browsers or becomes web browser portable.
Q.6 Why keys are needed in Lists in ReactJS?
Keys are needed in Lists in ReactJS as they provide important function to List which includes: provide a unique identifier to identify changes/updates/ deletion in specific items from the lists and find components to be re-rendered. Thus, boosting the performance by re-rendering of the updated components only.
Q.7 Describe forms in ReactJS
Forms are needed for data input form the user so as to fulfil their requirement. A web form or form in ReactJS are si9milar to a physical form but uses UI elements like text fields, checkboxes, radio buttons, buttons, etc to enable data input or selection by the user. Each form in ReactJS has a specific purpose like taking inputs for a report, displaying matching dat, etc.
Q.8 What is meant by an arrow function in ReactJS?
Usage of the ‘this’ inside the constructor usually leads to errors especially during the ReactJS callbacks. An arrow function in ReactJS enables writing a function to ReactJS hence, the binding of the ‘this’ inside the constructor is not needed.
Q.9 What are the components in ReactJS?
Components are the core element of ReactJS and are used for developing ReactJS application. A component is a UI element so as to make the UI independent and reusable for separate processing. A ReactJS application has an access to two components types as the functional Components (have no state of their own and has only render methods and may derive data from other components) and class Components (hold and manage their own state with a separate render method)
Q.10 Why the render () is needed in ReactJS?
The render () method is critical in ReactJS as it is needed by every component for returning the HTML to be shown in the component. Rendering of multiple elements can be achieved by grouping all those elements in a specific tag like
or , etc.
Q.11 Describe a state in ReactJS
ReactJS provides state which refers to an object which stores data about the component and as component changes; the state also changes over time, with the component being re-rendered. Component or state changes against action by user or system-generated events.
Q.12 Illustrate props in ReactJS
props in ReactJS expand to Properties and is an object storing data related to attribute value for a specific tag. Props data is similar to an HRML attribute. Props are also used to data transfer amongst components and they are passed similar to function arguments.
Q.13 What do you understand by a higher-order component in ReactJS?
A higher-order component in ReactJS refers to a higher level component as it is a container for other components so as to make those components re-usable and simple to use. It is primarily used if the components have common logic.
Q.14 List the various stages in life of methods of components in ReactJS
Components in ReactJS undergo various methods during their lifetime and it includes execution of various methods at different stages and is: getInitialState() - before the component creation, componentDidMount() – if the component is rendered and placed on the DOM, shouldComponentUpdate() – if component observes change in the DOM, componentDidUpdate() - after rendering takes place and componentWillUnmount( - before a component is destroyed and unmounted permanently.
Q.15 What is meant by Redux in ReactJS?
Redux in ReactJS refers to a JavaScript library which is open-source and primarily used for managing the application state and developing the UI for the ReactJS application.
Q.16 List components of Redux in ReactJS
The Redux in ReactJS has mainly three components as Store (for holding application state), Action (keeps source information for the store) and Reducer (stores application's state changes against actions sent to the store.)
Q.17 Describe ReactJS Router
ReactJS Router is an essential utility for developing and managing specific routes for a ReactJS application thus, provides navigation amongst the various components of ReactJS application and to end user as well for navigating in the ReactJS application.
Q.18 What is the utility of ReactJS Router?
ReactJS Router provides a centralized storage and management of routes in ReactJS application. It provides a common framework for the structure and behavior of routes in a ReactJS application especially for single-page web applications. Multiple views in a SPA are provided by defining multiple routes.
Q.19 Why refs are needed in ReactJS?
The ref is not be widely used in a ReactJS application as it return a reference to the element similar to a pointer in C language. It provides a direct method for accessing the DOM element or the specific instance of a component.
Q.20 Differentiate amongst Shadow DOM and Virtual DOM
The DOM refers to Document Object Model which refers to the web page. Both Shadow DOM and Virtual DOM are applicable for a ReactJS application development. The Shadow DOM is used for variable scoping and CSS in web components but is a provided by the web browser and not browser agnostic. The Virtual DOM on the other hand is a logical concept which is implemented using the various JavaScript libraries above the browser APIs.
Q.21 What do you understand by ReactJS Fiber?
ReactJS or also called as Fiber refers to the new reconciliation engine from React. It is a reimplementation of the core algorithm which was present in the ReactJS v16. Fiber is a drastic improvement as it enhances suitability for animation, layout, gestures and other UI related tasks, pause, abort, or reuse work, assign priority to different update types and new concurrency primitives.
Q.22 What do you think of Lifting State Up in ReactJS?
Lifting State Up in ReactJS refers to the phenomenon which addresses the situation when multiple components have a requirement for sharing same changing data which is done by lifting the shared state to closest common ancestor. Hence, local state in multiple child components is not saved or maintained thus saving overheads and memory.
Q.23 What is meant by context in ReactJS?
Context in ReactJS is an n essential element needed for data transfer by the component tree and not using props for the purpose by passing it down manually at every level.
Q.24 What do you understand by reconciliation in ReactJS?
Reconciliation in ReactJS refers to the update of actual DOM which has some updates on a specific element. The newly returned element is compared with the previously rendered one and decided for update of the DOM, to be done or not. This whole process of comparing and deciding and finally rendering is Reconciliation in ReactJS.
Q.25 Are exports supported by lazy function in ReactJS?
At present lazy function in ReactJS do not support exports but default exports is supported by the React.lazy function. If there is a requirement of importing exports named modules, then it can be done by creating an intermediate module which reexports it as the default.
Q.26 What is meant by fragments in ReactJS?
Fragments in ReactJS is primarily used for grouping multiple children. It is also used for returning multiple elements for a component.
Q.27 What do you think of portals in ReactJS?
Portals in ReactJS are used for rendering children into a DOM node which is not inside the DOM hierarchy of the parent component but is present outside the DOM hierarchy of the parent component. It uses the ReactDOM.createPortal(child, container) functions for the purpose of rendering children into an external DOM node.
Q.28 Explain stateless components in ReactJS
Q.29 Stateless components in ReactJS refer to component if their behaviour is not affected by their state. Creating stateless components requires a function or a class to be used. Stateless components provide easy development, coding and testing without using the ‘this’.
Q.30 How to do static type checking in ReactJS?
Static type checking in ReactJS applications usually is done by using the PropTypes library but for large code bases, static type checkers are to be used like Flow or TypeScript having compile time type checking and auto-completion.
Q.31 List the output after using setState() in constructor in ReactJS
Using setState() in constructor in ReactJS not only assigns to the object state but it will also re-render the component and all its children in the ReactJS application.
Q.32 Are render props and higher order components be replaced by Hooks in ReactJS?
No, render props and higher order components should not be replaced by Hooks in ReactJS but it should only be replaced as per requirement. As, render props and higher-order components mostly render a single child whereas Hooks offer a simple way for the purpose by reducing nesting in the DOM tree.
Q.33 How components should be named in ReactJS?
Components naming in ReactJS has been specified and also recommended. The naming convention requires naming of the component by reference and not by using displayName.
Q.34 What do you think of a switching component in ReactJS?
A switching component in ReactJS is used for rendering of multiple components in ReactJS application. It involves usage of an object for mapping the prop values to components.
Q.35 What is the reason for passing a function to setState()in ReactJS?
Passing a function to setState()in ReactJS is primarily done as the setState() is an asynchronous and it may not return a correct state without passing a function to setState(). Hence, we pass a function to setState(), having the previous state as an argument to avoid getting the old state value
Q.36 What do you understand by strict mode in ReactJS?
The strict mode in ReactJS is specifically used for stricter checking of the ReactJS application. Though no extra DOM elements are rendered, it includes many additional checks and warnings for its descendants. It is available in development mode.
Q.37 Describe ReactJS Mixins
ReactJS Mixins provides a mechanism so that different components can possess a common functionality as by using the PureRenderMixin in ReactJS application. It prevents re-rendering of the components
Q.38 What is the utility of the Pointer Events in ReactJS?
Pointer Events in ReactJS provides an integrated interface for dealing with multiple input devices and inputs provided by them in ReactJS application. The inputs can be on a desktop hence mouse will apply but on touch mobile only touch will apply and not mouse.
Q.39 Does the ReactJS v16 has support for custom DOM attributes?
Yes, the custom DOM attributes are supported in the ReactJS v16
Q.40 Without calling the setState function, can we re-render a component in ReactJS?
To re-render a component in ReactJS application but not initiating the setState function involves using the forceUpdate() function but it is not recommended as it access data from this.props and this.state for changes in the component's state or props.
Q.41 Differentiate amongst ReactJS and ReactDOM
React and ReactDOM have been recently separated due to React Naive, as earlier ReactDOM was part of React. ReactDOM sits between React and the DOM to mount ReactDOM.render() and provide ReactDOM.findDOMNode() for direct DOM element access. For rest, use React for defining and developing custom elements, for lifecycle hooks, etc. React focuses on web and mobile apps but ReactDOM is specific to web apps
Q.42 List the reason for ReactDOM being separate from ReactJS
ReactDOM was separated from ReactJS due to introduction of React Native.
Q.43 Differentiate amongst setState() and replaceState() methods in ReactJS
setState()method in ReactJS is applied for merger of the current and previous states whereas replaceState() method in ReactJS simply overwrites the current state with the provided state
Q.44 How state changes are listened in ReactJS?
In ReactJS listening to state changes is accomplished by using the componentDidUpdate lifecycle method. It involves comparison of state and props values with current state. Earlier componentWillUpdate(object nextProps, object nextState) was used.
Q.45 Why props cannot be updated in ReactJS?
props cannot be updated in ReactJS as due to React core philosophy focused on making the props as immutable and top-down thus, a parent can send any prop values to a child but child cannot change the received prop.
Q.46 List the reason for calling the constructor only once in ReactJS
The constructor are called only once in ReactJS due to the fact of assumption by the React's reconciliation algorithm about same position custom component should not be re-rendered
Q.47 Does the plain ReactJS provides the facility to use async/await
As no but ReactJS can use the async/await by applying the Babel with transform-async-to-generator plug into accomplish the same. The ReactJS Native has Babel init.
Q.48 List some packages for animation in ReactJS
Packages for animation in ReactJS includes: ReactJS Transition Group and ReactJS Motion, both are very popular.
Q.49 List React-specific linters
React-specific linters are linters which specifically work with React and ESLint is one of them. It is very popular and widely used with many plugins like eslint-plugin-react to check best practices, fixing issues with accessibility, etc
Q.50 Differentiate amongst ReactJS Router and history library
ReactJS Router and history library are separate and as the ReactJS Router uses history library and actually is a wrapper round it. The history library actually manages interaction with web browser.
Q.51 Why push () and replace () methods of history library are needed?
The history library makes use of push () and replace () methods for a specific tasks related to history as the push () method is used for adding a new location and the replace () function updates the current location with the new one in a history instance.
Q.52 Describe ReactJS Intl
The ReactJS Intl is actually a library which is specifically used for internalization in ReactJS. It has components and offers an API for string, date and number formatting. ReactJS Intl is part of FormatJS.
Q.53 Describe the usage of in ReactJS Intl
The in ReactJS Intl is primarily used for returning elements instead of plain text thus, can't be used for placeholders.
Q.54 Illustrate the steps for formatting date in ReactJS Intl
The steps involved for formatting date in ReactJS Intl involves using the injectIntl () higher-order component to access the formatDate() method by props. The method returns the string representation of the formatted date and is also used by FormattedDate instances.
Q.55 What do you understand by Shallow Renderer for ReactJS testing?
Shallow Renderer for ReactJS testing is used for developing unit test cases in React. Shallow Renderer renders one level deep components with facts assertion without concerned for child component behavior.
Q.56 Describe the TestRenderer package in ReactJS
The TestRenderer package in ReactJS is a rendering package specially meant to render components to pure JavaScript objects without any DOM dependency.