React js Interview Questions

2. Top 20 React Interview Questions and Answers What is React? Reactis a JavaScript-based library which is used to create a SPA (Single Page Application) and different User Interfaces. React is developed and maintained by Facebook and other contributors. By using React, we can develop web and mobile application by just following component-based architecture, and by using React we can get the robust, scalable and high-performance application. What is Virtual DOM in React? DOM plays an important role in terms of web application performance, thus there are tons of frameworks are available who manipulates the DOM directly by adding, modifying or removing any existing element. When we perform any action on a page, at that time content should be updated based on the result of action and it should be reflected in the DOM. In React, Virtual DOM plays an important role by updating DOM which marked as a dirty. Basically, React’s Virtual DOM convert the dirty component into Virtual image of a component and compare it with the existing DOM, and based on the result of the comparison, the new DOM will be replaced by the existing DOM.

3. What is the difference between Real DOM and Virtual DOM? When we change any action in an application, at that time real DOM should be updated, in this case, it would be expected that all that conversion task should be faster to achieve higher performance. Basically, a DOM or Real DOM is a structured collection of abstracted elements and the Virtual DOM is the abstraction of HTML DOM. Real DOM is existing elements structure, whereas Virtual DOM is the virtual tree of our application with the recent changes we have done. At the end of the comparison between Real DOM and Virtual DOM, the newly updated DOM will be rendered into the browser. What is Diffing Algorithm? Diffing Algorithm is used to compare different DOM tree, while in this algorithm it compares the two different root element and based on the difference result, it mounts the new tree and unmounts old one. What are the Hooks in React? As per the official definition, React Hooks means.“Hooks let you use state and other React features without writing a class. You can also build your own Hooks to share reusable stateful logic between components” By using Hooks, we can share state using function component which acts as isolated reusable units it means now we don’t need to use class component for using state. One of the updates in Hooks is that we can write the state and update it even within a single line of code. Apart from using state in the function component, we can also access different lifecycle hooks using useEffect.

4. What are the advantages of using create-react-app CLI? Creating a project of React is a very straight forward process and for that, we just need to install create-react-app package. But why we need to use it, there are few advantages to using create-react-app which are listed below. • One line command to set up React web app. • No need to mug-up all the configuration, because it provides the way to set up and minifies the production-ready app. • Application versioning can be well maintained. • It comes with the great package support like ESLint, Babel, Webpack and so on. • Upgrading the existing app to the latest version is less painful What is JSX? JSX stands for “JavaScript XML”.Basically, JSX is a syntax extension of the JavaScript, in other words, we can say JSX is a way to use JavaScript along with the HTML elements. It can be used as a template engine but it’s not necessary to use it compulsorily thus it has some advantages to use along with the React which are listed below. • Faster in rendering and performance • Can create a reusable component using JSX syntax • It will be very easy to create HTML structure by using JSX