ReactJS

Interview
Q&A

SHAIKH ROMAN
Q1: How does React work?
Answer:

React creates a virtual DOM. When state changes in a

component it firstly runs a "diffing" algorithm, which
identifies what has changed in the virtual DOM. The second
step is reconciliation, where it updates the DOM with the
results of diff.

Q2: How would you write an inline style in React?

Answer:

Answer: For example:

SHAIKH ROMAN
Q3: What are the major features of ReactJS?
Answer:

The major features of ReactJS are as follows,

It uses VirtualDOM instead RealDOM considering that

RealDOM manipulations are expensive.
Supports server-side rendering
Follows Unidirectional data flow or data binding
Uses reusable/composable UI components to develop the
view

Q4: What are props in React?

Answer:

They are data passed down from a parent component to

a child component.
SHAIKH ROMAN
Props are inputs to a React component. They are single values
or objects containing a set of values that are passed to React
Components on creation using a naming convention similar to
HTML-tag attributes. i.e, They are data passed down from a
parent component to a child component.
The primary purpose of props in React is to provide following
component functionality:
Pass custom data to your React component.
Trigger state changes.
Use via this.props.reactProp inside component's render()
method.
For example, let us create an element with reactProp
property,

SHAIKH ROMAN
This reactProp (or whatever you came up with) name then
becomes a property attached to React's native props object
which originally already exists on all components created
using React library.

props.reactProp;

Q5: What is the use of refs ?

Answer:

Refs provide a way to access DOM nodes or React elements

created in the render method. They should be avoided in most
cases, however, they can be useful when we need direct
access to DOM element or an instance of a component.

There are a few good use cases for refs:

SHAIKH ROMAN
 Managing focus, text selection, or media playback
Triggering imperative animations.
Integrating with third-party DOM libraries.

Refs are created using React.createRef() and attached to

React elements via the ref attribute. Refs are commonly
assigned to an instance property when a component is
constructed so they can be referenced throughout the
component.

SHAIKH ROMAN
Q6: What is Context API in ReactJS?

Answer:

Context provides a way to pass data through the component

tree without having to pass props down manually at every
level. Context is designed to share data that can be
considered “global” for a tree of React components, such as
the current authenticated user, theme, or preferred language.
Using context, we can avoid passing props through
intermediate elements.

SHAIKH ROMAN
SHAIKH ROMAN
Q7: What are the advantages of ReactJS?
Answer:

Below are the advantages of ReactJS:

Increases the application’s performance with Virtual DOM.
JSX makes code is easy to read and write
It renders both on client and server side.
Easy to integrate with other frameworks (Angular,
BackboneJS) since it is only a view library
Easy to write UI Test cases and integration with tools such
as JEST.

Q8: What are React Hooks?

Answer:

Hooks are a new addition in React 16.8. They let you use state and
other React features without writing a class. With Hooks, you can
extract stateful logic from a component so it can be tested
independently and reused
SHAIKH ROMAN
Hooks allow you to reuse stateful logic without changing your
component hierarchy. This makes it easy to share Hooks
among many components or with the community.

Q9: What are the advantages of using React?

Answer:

It is easy to know how a component is rendered, you just

need to look at the render function.
JSX makes it easy to read the code of your components. It
is also really easy to see the layout, or how components
are plugged/combined with each other.
You can render React on the server-side. This enables
improves SEO and performance. It is easy to test.
You can use React with any framework (Backbone.js,
Angular.js) as it is only a view layer

SHAIKH ROMAN
Q10: What is the difference between a
Presentational component and a Container
component?
Answer:

Presentational components are concerned with how

things look. They generally receive data and callbacks
exclusively via props. These components rarely have their
own state, but when they do it generally concerns UI state,
as opposed to data state
Container components are more concerned with how
things work. These components provide the data and
behavior to presentational or other container
components. They call Flux actions and provide these as
callbacks to the presentational components. They are also
often stateful as they serve as data sources.

SHAIKH ROMAN
Q11: What are the differences between a Class
component and Functional component?
Answer:

Class Components

Class-based Components uses ES6 class syntax. It can

make use of the lifecycle methods.
Class components extend from React.Component.
In here you have to use this keyword to access the props
and functions that you declare inside the class
components.

Functional Components

Functional Components are simpler comparing to class-

based functions

SHAIKH ROMAN
 Functional Components mainly focuses on the UI of the
application, not on the behavior.
To be more precise these are basically render function in
the class component.
Functional Components can have state and mimic
lifecycle events using Reach Hooks

Q12: What is the difference between state and

props ?

Answer:

The state is a data structure that starts with a default value

when a Component mounts. It may be mutated across
time, mostly as a result of user events.

SHAIKH ROMAN
 Props (short for properties) are a Component's
configuration. They are received from above and
immutable as far as the Component receiving them is
concerned. A Component cannot change its props, but it is
responsible for putting together the props of its child
Components. Props do not have to just be data - callback
functions may be passed in as props.

Q13: What are refs used for in React?

Answer:

Refs are an escape hatch which allow you to get direct access
to a DOM element or an instance of a component. In order to
use them you add a ref attribute to your component whose
value is a callback function which will receive the underlying
DOM element or the mounted instance of the component as
its first argument.

SHAIKH ROMAN
Above notice that our input field has a ref attribute whose
value is a function. That function receives the actual DOM
element of input which we then put on the instance in order to
have access to it inside of the handleSubmit
function.
It’s often misconstrued that you need to use a class
component in order to use refs, but refs can also be used with
functional components by leveraging closures in JavaScript.
SHAIKH ROMAN
Q14: When rendering a list what is a key and
what is it's purpose?
Answer:

Keys help React identify which items have changed, are

added, or are removed. Keys should be given to the elements
inside the array to give the elements a stable identity. The
best way to pick a key is to use a string that uniquely identifies
a list item among its siblings.
SHAIKH ROMAN
Most often you would use IDs from your data as keys. When
you don't have stable IDs for rendered items, you may use the
item index as a key as a last resort. It is not recommend to use
indexes for keys if the items can reorder, as that would be
slow
Q15: What does it mean for a component to be
mounted in React?
Answer:

It has a corresponding element created in the DOM and is

connected to that.
SHAIKH ROMAN
Q16: What's the difference between a Controlled
component and an Uncontrolled one in React?
Answer:

This relates to stateful DOM components (form elements) and

the React docs explain the difference:

A Controlled Component is one that takes its current value

through props and notifies changes through callbacks like
onChange . A parent component "controls" it by handling
the callback and managing its own state and passing the
new values as props to the controlled component. You
could also call this a "dumb component".

A Uncontrolled Component is one that stores its own state

internally, and you query the DOM using a ref to find its
current value when you need it. This is a bit more like
traditional HTML
SHAIKH ROMAN
In most (or all) cases you should use controlled components.

Q17: What are Controlled components in ReactJS?

Answer:

A Controlled Component is one that takes its current value

through props and notifies changes through callbacks like
onChange . A parent component "controls" it by handling the
callback and managing its own state and passing the new
values as props to the controlled component. You could also
call this a "dumb component".
SHAIKH ROMAN
Q18: What is Reconciliation in ReactJS?
Answer:

When a component’s props or state change, React decides

whether an actual DOM update is necessary by comparing the
newly returned element with the previously rendered one.
When they are not equal, React will update the DOM. This
process is called reconciliation.

SHAIKH ROMAN
Q19: What are Fragments in React?

Answer:

It's common pattern in React which is used for a component

to return multiple elements. Fragments let you group a list of
children without adding extra nodes to the DOM.

SHAIKH ROMAN
There is also a shorter syntax:

Q20: What is the difference between Component

and Container in Redux?
Answer:

Component is part of the React API. A Component is a

class or function that describes part of a React UI.
Container is an informal term for a React component that
is connected to a redux store. Containers receive Redux
state updates and dispatch actions, and they usually don't
render DOM elements; they delegate rendering to
presentational child components.
SHAIKH ROMAN