Dear Reader we are going to share with you some mostly asked React Interview Questions and Answers. We will hope that questions will help you most. Below are the Questions and Answers.
1. What is React?
i) React is a front-end JavaScript library developed by Facebook in 2011.
ii) It follows the component based approach which helps in building reusable UI components.
iii) It is used for developing complex and interactive web and mobile UI.
iv) Even though it was open-sourced only in 2015, it has one of the largest communities supporting it.
2. What are the features of React?
Major features of React are listed below:
i) It uses the virtual DOM instead of the real DOM.
ii) It uses server-side rendering.
iii) It follows uni-directional data flow or data binding
3. List some of the major advantages of React?
Some of the major advantages of React are:
It increases the application’s performance
It can be conveniently used on the client as well as server side
Because of JSX, code’s readability increases
React is easy to integrate with other frameworks like Meteor, Angular, etc
Using React, writing UI test cases become extremely easy
4. What are the limitations of React?
Limitations of React are listed below:
React is just a library, not a full-blown framework
Its library is very large and takes time to understand
It can be little difficult for the novice programmers to understand
Coding gets complex as it uses inline templating and JSX
5. What is JSX?
JSX is a shorthand for JavaScript XML. This is a type of file used by React which utilizes the expressiveness of JavaScript along with HTML like template syntax. This makes the HTML file really easy to understand. This file makes applications robust and boosts its performance.
Below is an example of JSX:
render(){
return(
<div>
<h1> Hello World from Edureka!!</h1>
</div>
);
}
6. What is ReactDOM, and what is the Difference Between ReactDOM and React?
Earlier ReactDOM was part of React but later React and ReactDOM were split into two different libraries. Basically, ReactDOM works like glue between React and the DOM. We can use it for one single thing: mounting with ReactDOM.
ReactDOM.findDOMNode() which is another useful feature of ReactDOM can be used to access the DOM element. For the rest of the things React is there. React is used to define and create the elements, for lifecycle hooks, etc.
7. What are controlled components?
In HTML, form elements such as <input>, <textarea>, and <select> typically maintain their own state and update it based on user input. When a user submits a form the values from the aforementioned elements are sent with the form. With React it works differently. The component containing the form will keep track of the value of the input in it’s state and will re-render the component each time the callback function e.g. onChange is fired as the state will be updated. A form element whose value is controlled by React in this way is called a “controlled component”.
With a controlled component, every state mutation will have an associated handler function. This makes it straightforward to modify or validate user input.
8. What is a higher order component?
A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API. They are a pattern that emerges from React’s compositional nature.
A higher-order component is a function that takes a component and returns a new component.
9. What is create-react-app?
create-react-app is the official CLI (Command Line Interface) for React to create React apps with no build configuration.
We don’t need to install or configure tools like Webpack or Babel. They are preconfigured and hidden so that we can focus on the code. We can install easily just like any other node modules. Then it is just one command to start the React project.
10. What is render() in React? And explain its purpose?
Each React component must have a render() mandatorily. It returns a single React element which is the representation of the native DOM component. If more than one HTML element needs to be rendered, then they must be grouped together inside one enclosing tag such as <form>, <group>, <div> etc. This function must be kept pure i.e., it must return the same result each time it is invoked.
11. What is the second argument that can optionally be passed to setState and what is its purpose?
A callback function which will be invoked when setState has finished and the component is re-rendered.
Since the setState is asynchronous, which is why it takes in a second callback function. With this function, we can do what we want immediately after state has been updated.
12. What is a state in React and how is it used?
States are the heart of React components. States are the source of data and must be kept as simple as possible. Basically, states are the objects which determine components rendering and behavior. They are mutable unlike the props and create dynamic and interactive components. They are accessed via this.state().
13. What are synthetic events in React?
Synthetic events are the objects which act as a cross-browser wrapper around the browser’s native event. They combine the behavior of different browsers into one API. This is done to make sure that the events show consistent properties across different browsers.
14. List some of the cases when you should use Refs.
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
15. How are forms created in React?
React forms are similar to HTML forms. But in React, the state is contained in the state property of the component and is only updated via setState(). Thus the elements can’t directly update their state and their submission is handled by a JavaScript function. This function has full access to the data that is entered by the user into a form.
16. What are Pure Components?
Pure components are the simplest and fastest components which can be written. They can replace any component which only has a render(). These components enhance the simplicity of the code and performance of the application.
17. 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 just reorders the elements instead of re-rendering them. This leads to increase in application’s performance.
18. What can you do with HOC?
HOC can be used for many tasks like:
Code reuse, logic and bootstrap abstraction
Render High jacking
State abstraction and manipulation
Props manipulation
19. What were the major problems with MVC framework?
Following are some of the major problems with MVC framework:
DOM manipulation was very expensive
Applications were slow and inefficient
There was huge memory wastage
Because of circular dependencies, a complicated model was created around models and views
20. What is Redux?
Redux is one of the most trending libraries for front-end development in today’s marketplace. It is a predictable state container for JavaScript applications and is used for the entire applications state management. Applications developed with Redux are easy to test and can run in different environments showing consistent behavior.
21. What is an event in React?
An event is an action that a user or system may trigger, such as pressing a key, a mouse click, etc.
React events are named using camelCase, rather than lowercase in HTML.
With JSX, you pass a function as the event handler, rather than a string in HTML.
<Button onPress={lightItUp} />
22. How do you create an event in React?
A React event can be created by doing the following:
class Simple extends ReactComponents{
work(){
alert(‘Good Work!’);
}
rendor(){
retun(
<button onclick={this.work}>Hi Guys</button>
)
}
}
23. Why is there a need for using keys in Lists?
Keys are very important in lists for the following reasons:
A key is a unique identifier and it is used to identify which items have changed, been updated or deleted from the lists
It also helps to determine which components need to be re-rendered instead of re-rendering all the components every time. Therefore, it increases performance, as only the updated components are re-rendered
24. What is the use of render() in React?
It is required for each component to have a render() function. This function returns the HTML, which is to be displayed in the component.
If you need to render more than one element, all of the elements must be inside one parent tag like <div>, <form>.
25. What is Redux Thunk used for?
Redux thunk is middleware that allows us to write action creators that return a function instead of an action. The thunk can then be used to delay the dispatch of an action if a certain condition is met. This allows us to handle the asyncronous dispatching of actions. The inner function receives the store methods dispatch and getState as parameters.
26. What are props in React?
Props are short for Properties. It is a React built-in object that stores the value of attributes of a tag and works similarly to HTML attributes.
Props provide a way to pass data from one component to another component. Props are passed to the component in the same way as arguments are passed in a function.
27. What is a higher-order component in React?
A higher-order component acts as a container for other components. This helps to keep components simple and enables re-usability. They are generally used when multiple components have to use a common logic.
28. What is React Router?
React Router is a routing library built on top of React, which is used to create routes in a React application.
29. Why do we need to React Router?
It maintains consistent structure and behavior and is used to develop single-page web applications.
Enables multiple views in a single application by defining multiple routes in the React application.
30. Can web browsers read JSX directly?
Web browsers cannot read JSX directly. This is because they are built to only read regular JS objects and JSX is not a regular JavaScript object
For a web browser to read a JSX file, the file needs to be transformed into a regular JavaScript object. For this, we use Babel
