15 Interview Questions about REACT

1.What is React?
Ans: React is an open-source, front-end JavaScript library, developed by Facebook. React is
used to build reusable UI components and it’s useful for developing complex and interactive UI
for both web and mobile.
2.What are the advantages and limitations of using React?
Ans: 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
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
3. What is useState() in React?
Ans: The useState() is a built-in React Hook that allows you for having state variables in
functional components. It should be used when the DOM has something that is dynamically
manipulating/controlling.
4. What are keys in React?
Ans: A key is a special string attribute that needs to be included when using lists of
elements.Importance of keys are given below:
=>Keys help react identify which elements were added, changed or removed.
=>Keys should be given to array elements for providing a unique identity for each element.
=>Without keys, React does not understand the order or uniqueness of each element.
=>With keys, React has an idea of which particular element was deleted, edited, and added.
5. What is JSX?
Ans: JSX stands for JavaScript XML. It allows us to write HTML inside JavaScript and place
them in the DOM without using functions like appendChild( ) or createElement( ).
6. What are the states and props?
Ans: States: Every component in react has a built-in state object, which contains all the
property values that belong to that component.In other words, the state object controls the
behaviour of a component. Any change in the property values of the state object leads to the
re-rendering of the component.
Props: Every React component accepts a single object argument called props (which stands
for “properties”). These props can be passed to a component using HTML attributes and the
component accepts these props as an argument. Using props, we can pass data from one
component to another.
 7. What are the differences between controlled and uncontrolled components?
Ans: Controlled component: In a controlled component, the value of the input element is
controlled by React. We store the state of the input element inside the code, and by using
event-based callbacks, any changes made to the input element will be reflected in the code
as well.
Uncontrolled component: In an uncontrolled component, the value of the input element is
handled by the DOM itself. Input elements inside uncontrolled components work just like
normal HTML input form elements.The state of the input element is handled by the DOM.
Whenever the value of the input element is changed, event-based callbacks are not called.
Basically, react does not perform any action when there are changes made to the input
element.
8. What are the components in React?
Ans: Components are the building blocks of the UI in an application built using React and this
is one of the main strengths of React as a library/framework. These components split the
entire UI into small pieces that are independent of each other and can be reused. So while a
‘normal’ web page might consist of a menu bar, content area, and footer, you create these
areas as components in React. This gives room for a lot of flexibility and saves on code
duplication.
9. What is an event in React?
Ans: In React, events are the triggered reactions to specific actions like mouse hover, mouse
click, key press, etc. Handling these events are similar to handling events in DOM elements.
But there are some syntactical differences like:
=>Events are named using camel case instead of just using the lowercase.
=>Events are passed as functions instead of string.
The event argument contains a set of properties, which are specific to an event. Each event
type contains its own properties and behavior which can be accessed via its event handler
only.
10. How do you create a React app?
Ans:
i. Install NodeJS for npm to install React JS library
ii.Need to Install the create-react-app package using command prompt
iii.Install a text editor like VS Code
11. What is the virtual DOM?
Ans: DOM stands for Document Object Model. The DOM represents an HTML document with
a logical tree structure. Each branch of the tree ends in a node, and each node contains
objects. React keeps a lightweight representation of the real DOM in the memory, and that is
known as the virtual DOM. When the state of an object changes, the virtual DOM changes only
that object in the real DOM, rather than updating all the objects. The following are some of
the most frequently asked react interview questions.
 12. What are the features of React?
Ans: 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.
13. What is React Router?
Ans: React Router refers to the standard library used for routing in React. It permits us for
building a single-page web application in React with navigation without even refreshing the
page when the user navigates. It also allows to change the browser URL and will keep the
user interface in sync with the URL .
14. Explain React Hooks and pop drilling .
Ans:React Hooks: React Hooks are the built-in functions that permit developers for using
the state and lifecycle methods within React components. These are newly added features
made available in React 16.8 version. Using Hook, all features of React can be used without
writing class components.
POP Drilling: Sometimes while developing React applications, there is a need to pass
data from a component that is higher in the hierarchy to a component that is deeply nested.
To pass data between such components, we pass props from a source component and keep
passing the prop to the next component in the hierarchy till we reach the deeply nested
component. The disadvantage of using prop drilling is that the components that should
otherwise be not aware of the data have access to the data.
15. What is the use of useEffect React Hooks?
Ans: The useEffect React Hook is used for performing the side effects in functional
components. With the help of useEffect, you will inform React that your component requires
something to be done after rendering the component or after a state change. Using this, we
can perform various calculations such as data fetching, setting up document title,
manipulating DOM directly, etc, that don’t target the output value. The useEffect hook will
run by default after the first render and also after each update of the component. React will
guarantee that the DOM will be updated by the time when the effect has run by it. The
useEffect React Hook will accept 2 arguments such as callback and dependecis.
Where the first argument callback represents the function having the logic of side-effect and
it will be immediately executed after changes were being pushed to DOM. The second
argument dependencies represent an optional array of dependencies. The useEffect() will
execute the callback only if there is a change in dependencies in between renderings.