React Interview Q/A
1) What is React?
React is a declarative, efficient, flexible open source front-end JavaScript library developed by Facebook in 2011. It follows the component-based approach for building reusable UI components, especially for single page application. It is used for developing interactive view layer of web and mobile apps. It was created by Jordan Walke, a software engineer at Facebook. It was initially deployed on Facebook’s News Feed section in 2011 and later used in its products like WhatsApp & Instagram
2) What are the features of React?
React framework gaining quick popularity as the best framework among web developers. The main features of React are:
o JSX
o Components
o One-way Data Binding
o Virtual DOM
o Simplicity
o Performance
3) What are the advantages of React?
The advantages of React are:
o Easy to Learn and USe
o Creating Dynamic Web Applications Becomes Easier
o Reusable Components
o Performance Enhancement
o The Support of Handy Tools
o Known to be SEO Friendly
o The Benefit of Having JavaScript Library
o Scope for Testing the Codes
4) What are the limitations of React?
The limitations of React are:
o The high pace of development
o Poor Documentation
o View Part
o JSX as a barrier
5) What is JSX?
JSX stands for JavaScript XML. It is a React extension which allows writing JavaScript code that looks similar to HTML. It makes HTML file easy to understand. The JSX file makes the React application robust and boosts its performance. JSX provides you to write XML-like syntax in the same file where you write JavaScript code, and then preprocessor (i.e., transpilers like Babel) transform these expressions into actual JavaScript code. Just like XML/HTML, JSX tags have a tag name, attributes, and children.
Example
class App extends React.Component { render() { return( <div> <h1>Hello Skyeagle</h1> </div> ) } }
In the above example, text inside <h1> tag return as JavaScript function to the render function. After compilation, the JSX expression becomes a normal JavaScript function, as shown below.
React.createElement(“h1”, null, “Hello Skyeagle”);
6) Why can’t browsers read JSX?
Browsers cannot read JSX directly because they can only understand JavaScript objects, and JSX is not a regular JavaScript object. Thus, we need to transform the JSX file into a JavaScript object using transpilers like Babel and then pass it to the browser.
7) Why we use JSX?
o It is faster than regular JavaScript because it performs optimization while translating the code to JavaScript.
o Instead of separating technologies by putting markup and logic in separate files, React uses components that contain both.
o t is type-safe, and most of the errors can be found at compilation time.
o It makes easier to create templates.
8) What do you understand by Virtual DOM?
A Virtual DOM is a lightweight JavaScript object which is an in-memory representation of real DOM. It is an intermediary step between the render function being called and the displaying of elements on the screen. It is similar to a node tree which lists the elements, their attributes, and content as objects and their properties. The render function creates a node tree of the React components and then updates this node tree in response to the mutations in the data model caused by various actions done by the user or by the system.
9) Explain the working of Virtual DOM.
Virtual DOM works in three steps:
- Whenever any data changes in the React App, the entire UI is re-rendered in Virtual DOM representation.
- Now, the difference between the previous DOM representation and the new DOM is calculated.
- Once the calculations are completed, the real DOM updated with only those things which are changed.
10) What do you understand from “In React, everything is a component.”
In React, components are the building blocks of React applications. These components divide the entire React application’s UI into small, independent, and reusable pieces of code. React renders each of these components independently without affecting the rest of the application UI. Hence, we can say that, in React, everything is a component.
11) Explain the purpose of render() in React.
It is mandatory for each React component to have a render() function. Render function is used to return the HTML which you want to display in a component. If you need to rendered more than one HTML element, you need to grouped together inside single enclosing tag (parent tag) such as <div>, <form>, <group> etc. This function returns the same result each time it is invoked.
Example: If you need to display a heading, you can do this as below.
import React from ‘react’ class App extends React.Component { render (){ return ( <h1>Hello World</h1> ) } } export default App
Points to Note:
o Each render() function contains a return statement.
o The return statement can have only one parent HTML tag.
12) How can you embed two or more components into one?
You can embed two or more components into the following way:
import React from ‘react’ class App extends React.Component { render (){ return ( <h1>Hello World</h1> ) } } class Example extends React.Component { render (){ return ( <h1>Hello Skyeagle</h1> ) } } export default App
13) What is Props?
Props stand for “Properties” in React. They are read-only inputs to components. Props are an object which stores the value of attributes of a tag and work similar to the HTML attributes. It gives a way to pass data from the parent to the child components throughout the application.
It is similar to function arguments and passed to the component in the same way as arguments passed in a function.
Props are immutable so we cannot modify the props from inside the component. Inside the components, we can add attributes called props. These attributes are available in the component as this.props and can be used to render dynamic data in our render method.
14) What is a State in React?
The State is an updatable structure which holds the data and information about the component. It may be changed over the lifetime of the component in response to user action or system event. It is the heart of the react component which determines the behavior of the component and how it will render. It must be kept as simple as possible.
Let’s create a “User” component with “message state.”
import React from ‘react’ class User extends React.Component { constructor(props) { super(props) this.state = { message: ‘Welcome to Skyeagle’ } } render() { return ( <div> <h1>{this.state.message}</h1> </div> ) } } export default User
15) What is arrow function in React? How is it used?
The Arrow function is the new feature of the ES6 standard. If you need to use arrow functions, it is not necessary to bind any event to ‘this.’ Here, the scope of ‘this’ is global and not limited to any calling function. So If you are using Arrow Function, there is no need to bind ‘this’ inside the constructor. It is also called ‘fat arrow ‘(=>) functions.
//General way render() { return( <MyInput onChange={this.handleChange.bind(this) } /> ); } //With Arrow Function render() { return( <MyInput onChange={ (e) => this.handleOnChange(e) } /> ); }
16) What is an event in React?
An event is an action which triggers as a result of the user action or system generated event like a mouse click, loading of a web page, pressing a key, window resizes, etc. In React, the event handling system is very similar to handling events in DOM elements. The React event handling system is known as Synthetic Event, which is a cross-browser wrapper of the browser’s native event.
Handling events with React have some syntactical differences, which are:
- React events are named as camelCase instead of lowercase.
- With JSX, a function is passed as the event handler instead of a string.
17) How do you create an event in React?
We can create an event as follows.
class Display extends React.Component({ show(msgEvent) { // code }, render() { // Here, we render the div with an onClick prop return ( <div onClick={this.show}>Click Me</div> ); } });
Example
import React, { Component } from ‘react’; class App extends React.Component { constructor(props) { super(props); this.state = { companyName: ” }; } changeText(event) { this.setState({ companyName: event.target.value }); } render() { return ( <div> <h2>Simple Event Example</h2> <label htmlFor=”name”>Enter company name: </label> <input type=”text” id=”companyName” onChange={this.changeText.bind(this)}/> <h4>You entered: { this.state.companyName }</h4> </div> ); } } export default App;
18) What are synthetic events in React?
A synthetic event is an object which acts as a cross-browser wrapper around the browser’s native event. It combines the behavior of different browser’s native event into one API, including stopPropagation() and preventDefault().
In the given example, e is a Synthetic event.
function ActionLink() { function handleClick(e) { e.preventDefault(); console.log(‘You had clicked a Link.’); } return ( <a href=”#” onClick={handleClick}> Click_Me </a> ); }
19) what is the difference between controlled and uncontrolled components?
The difference between controlled and uncontrolled components are:
| Controlled | Uncontrolled |
| It does not maintain its internal state. | It maintains its internal states. |
| Here, data is controlled by the parent component. | Here, data is controlled by the DOM itself. |
| It accepts its current value as a prop. | It uses a ref for their current values. |
| It allows validation control. | It does not allow validation control. |
| It has better control over the form elements and data. | It has limited control over the form elements and data. |
20) Explain the Lists in React.
Lists are used to display data in an ordered format. In React, Lists can be created in a similar way as we create it in JavaScript. We can traverse the elements of the list using the map() function.
Example
import React from ‘react’; import ReactDOM from ‘react-dom’; function NameList(props) { const myLists = props.myLists; const listItems = myLists.map((myList) => <li>{myList}</li> ); return ( <div> <h2>Rendering Lists inside component</h2> <ul>{listItems}</ul> </div> ); } const myLists = [‘Peter’, ‘Sachin’, ‘Kevin’, ‘Dhoni’, ‘Alisa’]; ReactDOM.render( <NameList myLists={myLists} />, document.getElementById(‘app’) ); export default App;
21) What is the significance of keys in React?
A key is a unique identifier. In React, it is used to identify which items have changed, updated, or deleted from the Lists. It is useful when we dynamically created components or when the users alter the lists. It also helps to determine which components in a collection needs to be re-rendered instead of re-rendering the entire set of components every time. It increases application performance.
22) How are forms created in React?
Forms allow the users to interact with the application as well as gather information from the users. Forms can perform many tasks such as user authentication, adding user, searching, filtering, etc. A form can contain text fields, buttons, checkbox, radio button, etc.
React offers a stateful, reactive approach to build a form. The forms in React are similar to HTML forms. But in React, the state property of the component is only updated via setState(), and a JavaScript function handles their submission. This function has full access to the data which is entered by the user into a form.
import React, { Component } from ‘react’; class App extends React.Component { constructor(props) { super(props); this.state = {value: ”}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } handleSubmit(event) { alert(‘You have submitted the input successfully: ‘ + this.state.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <h1>Controlled Form Example</h1> <label> Name: <input type=”text” value={this.state.value} onChange={this.handleChange} /> </label> <input type=”submit” value=”Submit” /> </form> ); } } export default App;
23) What are the different phases of React component’s lifecycle?
The different phases of React component’s lifecycle are:
Initial Phase: It is the birth phase of the React lifecycle when the component starts its journey on a way to the DOM. In this phase, a component contains the default Props and initial State. These default properties are done in the constructor of a component.
Mounting Phase: In this phase, the instance of a component is created and added into the DOM.
Updating Phase: It is the next phase of the React lifecycle. In this phase, we get new Props and change State. This phase can potentially update and re-render only when a prop or state change occurs. The main aim of this phase is to ensure that the component is displaying the latest version of itself. This phase repeats again and again.
Unmounting Phase: It is the final phase of the React lifecycle, where the component instance is destroyed and unmounted(removed) from the DOM.
24) What are Pure Components?
Pure components introduced in React 15.3 version. The React.Component and React.PureComponent differ in the shouldComponentUpdate() React lifecycle method. This method decides the re-rendering of the component by returning a boolean value (true or false). In React.Component, shouldComponentUpdate() method returns true by default. But in React.PureComponent, it compares the changes in state or props to re-render the component. The pure component enhances the simplicity of the code and performance of the application.
25) What are Higher Order Components(HOC)?
In React, Higher Order Component is an advanced technique for reusing component logic. It is a function that takes a component and returns a new component. In other words, it is a function which accepts another function as an argument. According to the official website, it is not the feature(part) in React API, but a pattern that emerges from React’s compositional nature.
26) What can you do with HOC?
You can do many tasks with HOC, some of them are given below:
o Code Reusability
o Props manipulation
o State manipulation
o Render highjacking
27) How to write comments in React?
In React, we can write comments as we write comments in JavaScript. It can be in two ways:
- Single Line Comments:We can write comments as /* Block Comments */ with curly braces:
- {/* Single Line comment */}
- Multiline Comments:If we want to comment more that one line, we can do this as
- { /*
- Multi
- line
- comment
- */ }
28) Why is it necessary to start component names with a capital letter?
In React, it is necessary to start component names with a capital letter. If we start the component name with lower case, it will throw an error as an unrecognized tag. It is because, in JSX, lower case tag names are considered as HTML tags.
29) What are fragments?
In was introduced in React 16.2 version. In React, Fragments are used for components to return multiple elements. It allows you to group a list of multiple children without adding an extra node to the DOM.
Example
render() { return ( <React.Fragment> <ChildA /> <ChildB /> <ChildC /> </React.Fragment> ) }
There is also a shorthand syntax exists for declaring Fragments, but it’s not supported in many tools:
render() { return ( <> <ChildA /> <ChildB /> <ChildC /> </> ) }
30) Why are fragments better than container divs?
o Fragments are faster and consume less memory because it did not create an extra DOM node.
o Some CSS styling like CSS Grid and Flexbox have a special parent-child relationship and add <div> tags in the middle, which makes it hard to keep the desired layout.
o The DOM Inspector is less cluttered.
31) How to apply validation on props in React?
Props validation is a tool which helps the developers to avoid future bugs and problems. It makes your code more readable. React components used special property PropTypes that help you to catch bugs by validating data types of values passed through props, although it is not necessary to define components with propTypes.
We can apply validation on props using App.propTypes in React component. When some of the props are passed with an invalid type, you will get the warnings on JavaScript console. After specifying the validation patterns, you need to set the App.defaultProps.
class App extends React.Component { render() {} } Component.propTypes = { /*Definition */};
32) What is create-react-app?
Create React App is a tool introduced by Facebook to build React applications. It provides you to create single-page React applications. The create-react-app are preconfigured, which saves you from time-consuming setup and configuration like Webpack or Babel. You need to run a single command to start the React project, which is given below.
- $ npx create-react-app my-app
This command includes everything which we need to build a React app. Some of them are given below:
o It includes React, JSX, ES6, and Flow syntax support.
o It includes Autoprefixed CSS, so you don’t need -webkit- or other prefixes.
o It includes a fast, interactive unit test runner with built-in support for coverage reporting.
o It includes a live development server that warns about common mistakes.
o It includes a build script to bundle JS, CSS, and images for production, with hashes and source maps.
33) What do you understand by refs in React?
Refs is the shorthand used for references in React. It is an attribute which helps to store a reference to particular DOM nodes or React elements. It provides a way to access React DOM nodes or React elements and how to interact with it. It is used when we want to change the value of a child component, without making the use of props.
34) How to create refs?
Refs can be created by using React.createRef() and attached to React elements via the ref attribute. It is commonly assigned to an instance property when a component is created, and then can be referenced throughout the component.
class MyComponent extends React.Component { constructor(props) { super(props); this.callRef = React.createRef(); } render() { return <div ref={this.callRef} />; } }
35) What are Forward Refs?
Ref forwarding is a feature which is used for passing a ref through a component to one of its child components. It can be performed by making use of the React.forwardRef() method. It is particularly useful with higher-order components and specially used in reusable component libraries.
Example
import React, { Component } from ‘react’; import { render } from ‘react-dom’; const TextInput = React.forwardRef((props, ref) => ( <input type=”text” placeholder=”Hello World” ref={ref} /> )); const inputRef = React.createRef(); class CustomTextInput extends React.Component { handleSubmit = e => { e.preventDefault(); console.log(inputRef.current.value); }; render() { return ( <div> <form onSubmit={e => this.handleSubmit(e)}> <TextInput ref={inputRef} /> <button>Submit</button> </form> </div> ); } } export default App;
36) Which is the preferred option callback refs or findDOMNode()?
The preferred option is to use callback refs over findDOMNode() API. Because callback refs give better control when the refs are set and unset whereas findDOMNode() prevents certain improvements in React in the future.
class MyComponent extends Component { componentDidMount() { findDOMNode(this).scrollIntoView() } render() { return <div /> } }
The recommended approach is:
class MyComponent extends Component { componentDidMount() { this.node.scrollIntoView() } render() { return <div ref={node => this.node = node} /> } } class MyComponent extends Component { componentDidMount() { this.node.scrollIntoView() } render() { return <div ref={node => this.node = node} /> } }
37) What is the use of Refs?
The Ref in React is used in the following cases:
o It is used to return a reference to the element.
o It is used when we need DOM measurements such as managing focus, text selection, or media playback.
o It is used in triggering imperative animations.
o It is used when integrating with third-party DOM libraries.
o It can also use as in callbacks.
38) What is React Router?
React Router is a standard routing library system built on top of the React. It is used to create Routing in the React application using React Router Package. It helps you to define multiple routes in the app. It provides the synchronous URL on the browser with data that will be displayed on the web page. It maintains the standard structure and behavior of the application and mainly used for developing single page web applications.
39) Why do we need a Router in React?
React Router plays an important role to display multiple views in a single page application. It is used to define multiple routes in the app. When a user types a specific URL into the browser, and if this URL path matches any ‘route’ inside the router file, the user will be redirected to that particular Route. So, we need to add a Router library to the React app, which allows creating multiple routes with each leading to us a unique view.
<switch> <h1>React Router Example</h1> <Route path=”/” component={Home} /> <Route path=”/about” component={About} /> <Route path=”/contact” component={Contact} /> </switch>
40) List down the advantages of React Router.
The important advantages of React Router are given below:
o In this, it is not necessary to set the browser history manually.
o Link uses to navigate the internal links in the application. It is similar to the anchor tag.
o It uses Switch feature for rendering.
o The Router needs only a Single Child element.
o In this, every component is specified in <Route>.
o The packages are split into three packages, which are Web, Native, and Core. It supports the compact size of the React application.
41) Why switch keyword used in React Router v4?
The ‘switch’ keyword is used to display only a single Route to rendered amongst the several defined Routes. The <Switch> component is used to render components only when the path will be matched. Otherwise, it returns to the not found component.
42) How to use styles in React?
We can use style attribute for styling in React applications, which adds dynamically-computed styles at render time. It accepts a JavaScript object in camelCased properties rather than a CSS string. The style attribute is consistent with accessing the properties on DOM nodes in JavaScript.
Example
const divStyle = { color: ‘blue’, backgroundImage: ‘url(‘ + imgUrl + ‘)’ }; function HelloWorldComponent() { return <div style={divStyle}>Hello World!</div> }
43) How many ways can we style the React Component?
We can style React Component in mainly four ways, which are given below:
o Inline Styling
o CSS Stylesheet
o CSS Module
o Styled Components
44) Explain CSS Module styling in React.
CSS Module is a CSS file where all class names and animation names are scoped locally by default. It is available only for the component which imports it, and without your permission, it cannot be applied to any other Components. You can create CSS Module file with the .module.css extension.
45) What are Styled Components?
Styled-Components is a library for React. It is the successor of CSS Modules. It uses enhance CSS for styling React component systems in your application, which is written with a mixture of JavaScript and CSS. It is scoped to a single component and cannot leak to any other element in the page.
The styled-components provides:
o Automatic critical CSS
o No class name bugs
o Easier deletion of CSS
o Simple dynamic styling
o Painless maintenance
46) What were the major problems with MVC framework?
The major problems with the MVC framework are:
o DOM manipulation was very expensive.
o It makes the application slow and inefficient.
o There was a huge memory wastage.
o It makes the application debugging hard.
47) Explain the Flux concept.
Flux is an application architecture that Facebook uses internally for building the client-side web application with React. It is neither a library nor a framework. It is a kind of architecture that complements React as view and follows the concept of Unidirectional Data Flow model. It is useful when the project has dynamic data, and we need to keep the data updated in an effective manner.
48) What is Redux?
Redux is an open-source JavaScript library used to manage application state. React uses Redux for building the user interface. The Redux application is easy to test and can run in different environments showing consistent behavior. It was first introduced by Dan Abramov and Andrew Clark in 2015.
React Redux is the official React binding for Redux. It allows React components to read data from a Redux Store, and dispatch Actions to the Store to update data. Redux helps apps to scale by providing a sensible way to manage state through a unidirectional data flow model. React Redux is conceptually simple. It subscribes to the Redux store, checks to see if the data which your component wants have changed, and re-renders your component.
49) What are the three principles that Redux follows?
The three principles that redux follows are:
- Single source of truth: The State of your entire application is stored in an object/state tree inside a single Store. The single State tree makes it easier to keep changes over time. It also makes it easier to debug or inspect the application.
- The State is read-only: There is only one way to change the State is to emit an action, an object describing what happened. This principle ensures that neither the views nor the network callbacks can write directly to the State.
- Changes are made with pure functions: To specify how actions transform the state tree, you need to write reducers (pure functions). Pure functions take the previous State and Action as a parameter and return a new State.
50) List down the components of Redux.
The components of Redux are given below.
o STORE: A Store is a place where the entire State of your application lists. It is like a brain responsible for all moving parts in Redux.
o ACTION: It is an object which describes what happened.
o REDUCER: It determines how the State will change.
51) Explain the role of Reducer.
Reducers read the payloads from the actions and then updates the Store via the State accordingly. It is a pure function which returns a new state from the initial State. It returns the previous State as it is if no work needs to be done.
52) What is the significance of Store in Redux?
A Store is an object which holds the application’s State and provides methods to access the State, dispatch Actions and register listeners via subscribe(listener). The entire State tree of an application is saved in a single Store which makes the Redux simple and predictable. We can pass middleware to the Store which handles the processing of data as well as keep a log of various actions that change the Store’s State. All the Actions return a new state via reducers.
53) What are the advantages of Redux?
The main advantages of React Redux are:
o React Redux is the official UI bindings for react Application. It is kept up-to-date with any API changes to ensure that your React components behave as expected.
o It encourages good ‘React’ architecture.
o It implements many performance optimizations internally, which allows to components re-render only when it actually needs.
o It makes the code maintenance easy.
o Redux’s code written as functions which are small, pure, and isolated, which makes the code testable and independent.
54) How to access the Redux store outside a component?
You need to export the Store from the module where it created with createStore() method. Also, you need to assure that it will not pollute the global window space.
store = createStore(myReducer) export default store