ReactJS most popular interview questions & answers
1. What is React?
It is an open source project released in 2013 by Meta, for building user interfaces (UI). It is based on declarative programming principles, and using components as main entities.
2. What is JSX?
This is an extension for React, which changes syntax to create React elements, which contains both JavaScript code and elements markup for HTML at the same time.
3. Why can't browsers read JSX?
Because this is a specific form of code which is not fully clear JavaScript or HTML and browsers don't have engines to read it. To make this code understandable for browsers it must be converted with special tools like Babel.
4. What is Redux?
It is an open-source JavaScript library which is often used with React and other libraries. It improves basic state management and keeps them in storage, which allows to easily check and debug UI elements' behavior.
5. How is React different from Angular?
React is the JavaScript library, while Angular is the framework which has a more complex structure. Angular has a lot of instruments for all steps of front-end development and uses TypeScript as the main language. React can be used only for UI components development and primarily use JSX in code.
6. What are props in React?
In React props are the arguments which we send to React components. The most similar thing like this is the function arguments in clear JavaScript. Their main characteristic is immutable - once set they can't be changed. Also they can be used both in functional and in class components.
7. What is a state in React?
It is part of a component which contains data or information about it. It can be changed dynamically and every change will cause component re-render. States can store properties but are available to use only in class components.
8. What is an event in React?
React has its own alternatives for DOM events. They mean and do the same as the original but their syntax uses the camel case instead lower case in DOM. One important difference is that in React we pass as an event handler a function instead of a string in DOM.
9. How to write comments in React?
As in JavaScript React supports one-line comments with slashes (//) before string. Also it support multi-line comments which starts from slash plus star sign (/*) and star plus sign (*/) combination at the end.
10. What are the components in React?
It is the basic structure in React, like classes in JavaScript.
11. Does React use HTML?
React doesn't use clear HTML but supports most of its functions and syntax, which must be realized via JSX.
12. What's the difference between Real DOM and Virtual DOM?
Real DOM is the object of a document with all content and dependencies. In React for each Real DOM is available Virtual DOM, which realizes its light-weight copy as it doesn't take a part in drawing documents. So it's faster to call and edit Virtual DOM then edit Real DOM while viewing it on the screen.
13. What are Synthetic events in React?
These are the events which are cross-browser and used to initiate events in browsers according to DOM. As some events which realize the same action, may have different names in different browsers, React allows to create events which will be versatile for all browsers. These events are called Synthetic events. Examples of Synthetic events: onClick, onChange etc.
14. What is the use of render() in React?
The ReactDOM.render() is the function which accepts HTML code and HTML element as arguments. After execution it creates code which shows how the received HTML code will look in the HTML element and save it in the separated HTML file located in the "public" folder of the React project.
15. How is React different from React Native?
React is the JavaScript library which is oriented on creating UI parts of websites, using a DOM compatible approach. Instead of this React Native is the framework for developing cross-platform apps, especially for mobile platforms. It is also based on JavaScript and even has something like React library in structure but also it supports code integration on some other languages. Also it may require integration with SDK for target mobile platforms, like Android Studio.
16. What are the refs in React?
It is a React function which provides access to DOM nodes and React elements. They allow directly changing child objects or their values without using props. They are created by React.createRef() function and compatible with DOM nodes and class components only.
17. What is an arrow function and how is it used in React?
This is a function with shorter than simple callback syntax and declared with "=>"sign. In React handling "this" with an arrow function will always call an object represented by the function. It is useful in some cases as in callback "this" can represent a document, function and other entities.
18. How to update the state of a component in React?
By scheduling and updating a component's state with setState() inside the function.
19. What's the difference between states and props in ReactJS?
They both can store data, but only states can accept changes in data and contain the opponent - props. Properties can be used in functional components that are unavailable for states. States updates directly, while props by parent component.
20. What are the drawbacks of React?
This is a very large library with fast-changeable, and as a result difficult documentation. Instead of this, this library requires a lot of additional knowledge for normal integration of React in the development process. Also some developers think that JSX is also disadvantageous as it is very specific in using.
21. What are the Advantages of React JS?
React is optimized for fast website rendering and well configured for SEO, both these facts are big advantages as it improves search indexations. Despite this using components as a key and reusable entities together with their declarative changing their data makes it very easy to use.
22. What is Flux Concept In React?
It is a kind of application architecture which realizes unidirectional data exchange inside the app. In the center of this concept is the Dispatcher component which transfers data received by Actions to Stores. Here Actions play roles as Events while Stores - store and/or change data and send it to Views (visible UI components).
23. What is Jest?
It is a framework for testing scripts written in JavaScript and TypeScript. In pair with React it is used for unit testing in the Create React app.
24. What is a dispatcher?
It is one of the components required for building apps according to Flux architecture. In this pattern dispatcher is the main point which manages data exchanging inside the app.
25. What is the higher-order component?
It is a function which takes a component and data as arguments and returns a new enhanced component. This pattern is available due to React compositional nature.