tag is returned as JavaScript function to the render function
...
Component {
render()
{
return(

{'Welcome to React
world!'}

)
} }
� Back to Top
4
...
Elements can
11

contain other Elements in their props
...

Once an element is created, it is never mutated
...
createElement(
'div',
{id: 'login-btn'},
'Login'
)
The above React
...
render():

Login

Whereas a component can be declared in several different ways
...

In either case, it takes props as an input, and returns a JSX tree as the
output:
const Button = ({ onLogin }) =>

Login

Then JSX gets transpiled to a React
...
createElement(
'div',
{ id: 'login-btn', onClick: onLogin },
'Login'
)
� Back to Top
5
...

1
...
Those are pure JavaScript functions that accept props object
as the first parameter and return React elements:

12

“jsx harmony function Greeting({ message }) {

{Hello, ${message}‘}

return

} “‘
2
...
The above function component can be written as:
jsx harmony
render() {
} }

class Greeting extends React
...
props
...

When to use a Class Component over a Function Component?
If the component needs state or lifecycle methods then use class component otherwise use function component
...
8 with
the addition of Hooks, you could use state , lifecycle methods and other
features that were only available in class component right in your function
component
...

What are Pure Components?
React
...
Component except
that it handles the shouldComponentUpdate() method for you
...
Component on the other hand won’t compare current props and state to next out of the box
...

� Back to Top
8
...
We should always try to make
our state as simple as possible and minimize the number of stateful components
...
Component { constructor(props)
{ super(props)
this
...
state
...
e
...

� Back to Top
9
...
They are single values or objects containing a set of values that are passed to components on creation using a
naming convention similar to HTML-tag attributes
...


14

The primary purpose of props in React is to provide following component
functionality:
1
...

2
...

3
...
props
...

For example, let us create an element with reactProp property:
jsx harmony



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
...
reactProp
� Back to Top
10
...
While both of them
hold information that influences the output of render, they are different
in their functionality with respect to component
...

� Back to Top
11
...

//Wrong
this
...
message = 'Hello world'
Instead use setState() method
...
When state changes, the component responds by rerendering
...
setState({ message: 'Hello World' })
Note: You can directly assign to the state object either in constructor or
using latest javascript’s class field declaration syntax
...

What is the purpose of callback function as an argument of
setState()?
The callback function is invoked when setState finished and the component
gets rendered
...

Note: It is recommended to use lifecycle method rather than this callback
function
...
log('The name has updated and component re-ren
� Back to Top
13
...
In HTML, the event name usually represents in lowercase as a convention:

Whereas in React it follows camelCase convention:
jsx harmony



2
...
log("The link was clicked
...
preventDefault()
console
...
')
}
3
...
(refer
“activateLasers” function in the first point for example)
� Back to Top
14
...
Binding in Constructor: In JavaScript classes, the methods are
not bound by default
...
Normally we bind them in constructor
...
handleClick = this
...
bind(this);
}
handleClick() {
console
...
handleClick}>Click Me;
}
}
2
...

jsx harmony
is:', this)

handleClick = () => {
}

console
...
handleClick}>
me'}

{'Click

3
...

jsx harmony handleClick() {
console
...
handleClick()}>Click Me; }
Note: If the callback is passed as prop to child components, those components might do an extra re-rendering
...
bind() or public class fields syntax approach considering performance
...

How to pass a parameter to an event handler or callback?
You can use an arrow function to wrap around an event handler and pass
parameters:

17

jsx harmony this
...
bind:
jsx harmony ...
bind(this,
id)} /> Apart from these two approaches, you can also pass arguments
to a function which is defined as arrow function jsx harmony onClick={this
...
log("Hello, your ticket number is", id) };
� Back to Top
16
...
Its API is same as the browser’s native event, including
stopPropagation() and preventDefault(), except the events work identically across all browsers
...

What are inline conditional expressions?
You can use either if statements or ternary expressions which are available
from JS to conditionally render expressions
...

jsx harmony

Hello!

{
!isLogin?

unread messages
...


messages
...
length}
:

You

}

� Back to Top
18
...
Key prop helps React identify which items have changed, are
added, or are removed
...
map((todo) =>
key={todo
...
text}
)
18


When you don’t have stable IDs for rendered items, you may use the item
index as a key as a last resort:
jsx harmony const todoItems = todos
...
text}
)
Note:
1
...
This can negatively impact performance and may cause
issues with component state
...
If you extract list item as separate component then apply keys on list
component instead of li tag
...
There will be a warning message in the console if the key prop is not
present on list items
...

What is the use of refs?
The ref is used to return a reference to the element
...

� Back to Top
20
...
This is a recently added approach
...
createRef() method and attached to React elements via the
ref attribute
...

jsx harmony class MyComponent extends React
...
myRef
= React
...
myRef} />
} }
2
...

For example, the search bar component’s input element is accessed as
follows, jsx harmony
class SearchBar extends Component
{
constructor(props) {
super(props);
this
...
state = { term: ''
};
this
...
txtSearch
= e;
}
}
onInputChange(event) {

19

this
...
txtSearch
...
onInputChange
...
state
ref={this
...
Note: You
can also use inline ref callbacks even though it is not a recommended
approach
...

What are forward refs?
Ref forwarding is a feature that lets some components take a ref they
receive, and pass it further down to a child
...
forwardRef((props, ref) =>
( {props
...
createRef(); {‘Forward Ref’} “‘
� Back to Top
22
...
Because
findDOMNode() prevents certain improvements in React in the future
...
scrollIntoView()
}
render() {
return

}
}
The recommended approach is:
class MyComponent extends Component {
constructor(props){
super(props);
this
...
node
...
scrollIntoView();
}
render() {
return

...

Why are String Refs legacy?
If you worked with React before, you might be familiar with an older
API where the ref attribute is a string, like ref={'textInput'}, and the
DOM node is accessed as this
...
textInput
...
String
refs were removed in React v16
...
They force React to keep track of currently executing component
...

2
...
Callback refs are perfectly
composable
...
They don’t work with static analysis like Flow
...
refs, as well as its type (which could be different)
...

4
...
g
...
Ref
will get attached to DataTable rather than MyComponent: return
;
// This would work though! Callback refs are awesome
...


21

What is Virtual DOM?
The Virtual DOM (VDOM) is an in-memory representation of Real DOM
...
It’s a step that happens between the render function being called
and the displaying of elements on the screen
...

� Back to Top
25
...

1
...


Figure 2: vdom
2
...

3
...

� Back to Top
26
...
The Virtual DOM is a concept
implemented by libraries in JavaScript on top of browser APIs
...

22

Figure 3: vdom2

Figure 4: vdom3

23

What is React Fiber?
Fiber is the new reconciliation engine or reimplementation of core algorithm in React v16
...

� Back to Top
28
...
Its headline feature is incremental rendering: the
ability to split rendering work into chunks and spread it out over multiple
frames
...
Ability to split interruptible work in chunks
...
Ability to prioritize, rebase and reuse work in progress
...
Ability to yield back and forth between parents and children to support layout in React
...
Ability to return multiple elements from render()
...
Better support for error boundaries
...

What are controlled components?
A component that controls the input elements within the forms on subsequent user input is called Controlled Component, i
...

For example, to write all the names in uppercase letters, we use handleChange as below,
handleChange(event) {
this
...
target
...
toUpperCase()})
}
� Back to Top
30
...
This is a bit more like traditional HTML
...

“‘jsx harmony class UserProfile extends React
...
handleSubmit = this
...
bind(this)
this
...
createRef() }
handleSubmit(event) { alert(‘A name was submitted:’ + this
...
current
...
preventDefault() }
render() { return (
{‘Name:’}
);
} } “‘
In most cases, it’s recommend to use controlled components to implement
forms
...
The alternative is uncontrolled components, where form data is
handled by the DOM itself
...

What is the difference between createElement and cloneElement?
JSX elements will be transpiled to React
...
Whereas cloneElement is used to clone an element and pass
it new props
...

What is Lifting State Up in React?
When several components need to share the same changing data then it is
recommended to lift the shared state up to their closest common ancestor
...

� Back to Top

25

33
...
Mounting: The component is ready to mount in the browser
DOM
...

2
...

This phase covers getDerivedStateFromProps(), shouldComponentUpdate(),
render(), getSnapshotBeforeUpdate() and componentDidUpdate()
lifecycle methods
...
Unmounting: In this last phase, the component is not needed
and gets unmounted from the browser DOM
...

It’s worth mentioning that React internally has a concept of phases when
applying changes to the DOM
...
Render The component will render without any side effects
...

2
...

3
...

React 16
...
3
� Back to Top
34
...
3
• componentWillMount: Executed before rendering and is used for
App level configuration in your root component
...
4+

Figure 6: phases 16
...

• componentWillReceiveProps: Executed when particular prop
updates to trigger state transitions
...
By default it returns true
...
It is a great place to improve performance
as it allows you to prevent a re-render if component receives new prop
...

• componentDidUpdate: Mostly it is used to update the DOM in
response to prop or state changes
...

React 16
...
This exists for rare use
cases where you need a derived state
...

• componentDidMount: Executed after first rendering and where
all AJAX requests, DOM or state updates, and set up event listeners
should occur
...
By default, it returns true
...
It is a great place to improve
performance as it allows you to prevent a re-render if component
receives a new prop
...
Any value returned by this will be
passed into componentDidUpdate()
...
e
...

• componentDidUpdate: Mostly it is used to update the DOM
in response to prop or state changes
...

• componentWillUnmount It will be used to cancel any outgoing
network requests, or remove all event listeners associated with the
component
...

28

What are Higher-Order Components?
A higher-order component (HOC) is a function that takes a component
and returns a new component
...

We call them pure components because they can accept any dynamically
provided child component but they won’t modify or copy any behavior
from their input components
...

2
...

4
...

Render hijacking
...

Props manipulation
...

How to create props proxy for HOC component?
You can add/edit props passed to the component using props proxy pattern
like this:
“‘jsx harmony function HOC(WrappedComponent) { return class Test extends Component { render() { const newProps = { title: ‘New Header’,
footer: false, showFeatureX: false, showFeatureY: true }
return ...
props} {
...

What is context?
Context provides a way to pass data through the component tree without
having to pass props down manually at every level
...

const {Provider, Consumer} = React
...


29

What is children prop?
Children is a prop (this
...
children) that allows you to pass components as data to other components, just like any other prop you use
...

There are several methods available in the React API to work with this
prop
...
Children
...
Children
...
Children
...
Children
...
Children
...

A simple usage of children prop looks as below,
“‘jsx harmony const MyDiv = React
...
props
...
render( {‘Hello’} {‘World’} , node ) “‘
� Back to Top
39
...

Single-line comments:
jsx harmony

{/* Single-line comments(In vanilla
JavaScript, the single-line comments are represented by
double slash(//)) */}
{`Welcome ${user}, let's play React`}

Multi-line comments:
jsx harmony

{/* Multi-line comments for more than
one line */}
{`Welcome ${user}, let's play React`}

� Back to Top
40
...
The same applies to ES6 sub-classes as
well
...
props in your child constructors
...
Component {
constructor(props) {
super(props)
console
...
props) // prints { name: 'John', age: 42 }
}
}
Not passing props:
class MyComponent extends React
...
log(this
...
log(props) // prints { name: 'John', age: 42 }
}
render() {
// no difference outside constructor
console
...
props) // prints { name: 'John', age: 42 }
}
}
The above code snippets reveals that this
...
It would be the same outside the constructor
...

What is reconciliation?
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
...
This process is called reconciliation
...

How to set state with a dynamic key name?
If you are using ES6 or the Babel transpiler to transform your JSX code
then you can accomplish this with computed property names
...
setState({ [event
...
id]: event
...
value })
}
� Back to Top
43
...


jsx harmony render() {
// Wrong: handleClick is called
instead of passed as a reference!
return

...
handleClick}>{'Click
Me'} }
� Back to Top
44
...
lazy function supports default exports only
...

It also ensures that tree shaking keeps working and don’t pull unused components
...
js
export const SomeComponent = /*
...
*/; and reexport MoreComponents
...
js javascript
// IntermediateComponent
...
/MoreComponents
...
/IntermediateComponent
...


32

Why React uses className over class attribute?
class is a keyword in JavaScript, and JSX is an extension of JavaScript
...

Pass a string as the className prop
...

What are fragments?
It’s a common pattern in React which is used for a component to return
multiple elements
...

jsx harmony render() {
return (
...
Fragment>
) }
There is also a shorter syntax, but it’s not supported in many tools:
jsx harmony render() {
return (




<>
) }



� Back to Top
47
...
Fragments are a bit faster and use less memory by not creating an
extra DOM node
...

2
...

3
...

� Back to Top
48
...


33

ReactDOM
...
The second argument is a DOM element
...

What are stateless components?
If the behaviour is independent of its state then it can be a stateless component
...
But unless you need to use a lifecycle hook in your components, you should go for function components
...

� Back to Top
50
...
These stateful components
are always class components and have a state that gets initialized in the
constructor
...
state = { count: 0 }
}
render() {
//
...
8 Update:
Hooks let you use state and other React features without writing classes
...

How to apply validation on props in React?
When the application is running in development mode, React will automatically check all props that we set on components to make sure they
have correct type
...
It’s disabled in production mode due to performance
impact
...

The set of predefined prop types:
1
...

3
...

5
...

7
...

9
...


PropTypes
...
string
PropTypes
...
object
PropTypes
...
node
PropTypes
...
bool
PropTypes
...
any

We can define propTypes for User component as below:
“‘jsx harmony import React from ‘react’ import PropTypes from ‘proptypes’
class User extends React
...
string
...
number
...
props
...
props
...
5 *PropTypes* were moved from `React
...
propTypes = {
name: PropTypes
...
isRequired,
age: PropTypes
...
isRequired
}
� Back to Top
52
...

2
...

4
...

JSX makes code easy to read and write
...

Easy to integrate with frameworks (Angular, Backbone) since it is
only a view library
...
Easy to write unit and integration tests with tools such as Jest
...

What are the limitations of React?
Apart from the advantages, there are few limitations of React too,
1
...

2
...

3
...

4
...


36

5
...

� Back to Top
54
...

A class component becomes an error boundary if it defines a new
lifecycle method called componentDidCatch(error, info) or static
getDerivedStateFromError():
“‘jsx harmony class ErrorBoundary extends React
...
state = { hasError: false } }
componentDidCatch(error, info) { // You can also log the error to an error
reporting service logErrorToMyService(error, info) }
static getDerivedStateFromError(error) { // Update state so the next render will show the fallback UI
...
state
...
’}
}
return this
...
children
}}
After that use it as a regular component:
```jsx harmony



� Back to Top
55
...

It has been renamed to
componentDidCatch in React v16
...

What are the recommended ways for static type checking?
Normally we use PropTypes library (React
...
5) for type checking in the React
applications
...

� Back to Top
57
...
Most of the components are not required to
use this module
...

2
...

4
...


render()
hydrate()
unmountComponentAtNode()
findDOMNode()
createPortal()

� Back to Top
58
...
If the React
element was previously rendered into container, it will perform an update
on it and only mutate the DOM as necessary to reflect the latest changes
...
render(element, container, [callback])
If the optional callback is provided, it will be executed after the component
is rendered or updated
...

What is ReactDOMServer?
The ReactDOMServer object enables you to render components to static
markup (typically used on node server)
...
The following methods can be used in both
the server and browser environments:
1
...
renderToStaticMarkup()
For example, you generally run a Node-based web server like Express,
Hapi, or Koa, and you call renderToString to render your root component
to a string, which you then send as response
...
/MyPage'
app
...
write('')
res
...
write(renderToString())
res
...
end()
})
� Back to Top
60
...
Just like innerHTML, it is risky to use
this attribute considering cross-site scripting (XSS) attacks
...

In this example MyComponent uses dangerouslySetInnerHTML attribute
for setting HTML markup:
“‘jsx harmony function createMarkup() { return { __html: ‘First · Second’ } }
function MyComponent() { return
} “‘
� Back to Top
61
...
This is consistent with the DOM style
JavaScript property, is more efficient, and prevents XSS security holes
...
g
...
style
...

� Back to Top
62
...
React event handlers are named using camelCase, rather than lowercase
...
With JSX you pass a function as the event handler, rather than a
string
...

What will happen if you use setState() in constructor?
When you use setState(), then apart from assigning to the object state
React also re-renders the component and all its children
...
So
we need to use this
...

� Back to Top
64
...

In the below code snippet each element’s key will be based on ordering,
rather than tied to the data that is being represented
...

jsx harmony {todos
...
todo}

If you use element data for unique key, assuming todo
...

jsx harmony {todos
...
todo}

key={todo
...

Is it good to use setState() in componentWillMount() method?
Yes, it is safe to use setState() inside componentWillMount() method
...
componentWillMount() is
invoked immediately before mounting occurs
...
Avoid
introducing any side-effects or subscriptions in this method
...

jsx harmony componentDidMount() {
axios
...
then((result) => {
this
...
result
...

What will happen if you use props in initial state?
If the props on the component are changed without the component being
refreshed, the new prop value will never be displayed because the constructor function will never update the current state of the component
...

The below component won’t display the updated input value:
“‘jsx harmony class MyComponent extends React
...
state = {
records: [],
inputValue: this
...
inputValue
};
}
render() { return

41

{this
...
inputValue}
}}
Using props inside render method will update the value:
```jsx harmony
class MyComponent extends React
...
state = {
record: []
}
}
render() {
return

{this
...
inputValue}

}
}
� Back to Top
67
...
JSX does not render false or undefined, so you can use conditional
short-circuiting to render a given part of your component only if a certain
condition is true
...

jsx harmony const MyComponent = ({ name, address }) => (

{name}

{address
?

{address}

:

{'Address is not available'}

}

)
� Back to Top
68
...
Instead we can use prop destructuring
42

with
...

For example,
“‘jsx harmony const ComponentA = () =>
const ComponentB = ({ isDisplay, …domProps }) =>

{‘ComponentB’}
“‘
� Back to Top
69
...
Decorators are flexible and readable way of
modifying component functionality
...
Component
{ //…
...
Component { componentDidMount() { document
...
this
...

� Back to Top
70
...

For example moize library can memoize the component in another component
...
/components/Component’ // this module exports a non-memoized component

43

const MemoizedFoo = moize
...
6
...
memo`
...
memo(function MemoComponent(props) {
/* render using props */
});
OR
export default React
...

How you implement Server Side Rendering or SSR?
React is already equipped to handle rendering on Node servers
...

“‘jsx harmony import ReactDOMServer from ‘react-dom/server’ import
App from ‘
...
renderToString() “‘
This method will output the regular HTML as a string, which can be then
placed inside a page body as part of the server response
...

� Back to Top
72
...
Apart from this, if you minify the code, for example,
Uglify’s dead-code elimination to strip out development only code and
comments, it will drastically reduce the size of your bundle
...

44

What is CRA and its benefits?
The create-react-app CLI tool allows you to quickly create & run React
applications with no configuration step
...

2
...

4
...

Language extras beyond ES6 like the object spread operator
...

A fast interactive unit test runner with built-in support for coverage
reporting
...
A live development server that warns about common mistakes
...
A build script to bundle JS, CSS, and images for production, with
hashes and sourcemaps
...

What is the lifecycle methods order in mounting?
The lifecycle methods are called in the following order when an instance
of a component is being created and inserted into the DOM
...

2
...

4
...


45

What are the lifecycle methods going to be deprecated in React
v16?
The following lifecycle methods going to be unsafe coding practices and
will be more problematic with async rendering
...
componentWillMount()
2
...
componentWillUpdate()
Starting with React v16
...

� Back to Top
76
...
It can
return an object to update state, or null to indicate that the new props
do not require any state updates
...
Component {
static getDerivedStateFromProps(props, state) {
//
...

� Back to Top
77
...
The return value from this method will be passed
as the third parameter to componentDidUpdate()
...
Component {
getSnapshotBeforeUpdate(prevProps, prevState) {
//
...

� Back to Top
78
...

� Back to Top
79
...

Using displayName for naming component:
export default React
...

})
The recommended approach:
export default class TodoApp extends React
...

}
also
const TodoApp = () => {
//
...

What is the recommended ordering of methods in the required method to be defined for a class component?
The render() method is the only required method in a class component
...
e, All methods other than render method are optional for a class component
...

What are the possible return types of render method?
Below are the list of following types used and return from render method,
1
...
It includes html elements such as

and user defined
elements
...
Arrays and fragments: Return multiple elements to render as
Arrays and Fragments to wrap multiple elements
3
...

4
...
Booleans or null: Doesn’t render anything but these types are used
to conditionally render content
...

What is the main purpose of constructor?
The constructor is mainly used for two purposes,
1
...
state

114

2
...
setState() here!
this
...
handleClick = this
...
bind(this);
}
� Back to Top
241
...
i
...

� Back to Top
242
...
This is used for undefined props, but not
for null props
...
Component {
//
...
defaultProps = {
color: 'red'
};
If props
...

i
...
color will be set to red
}
Note: If you provide null value then it remains null value
...


115

Why should not call setState in componentWillUnmount?
You should not call setState() in componentWillUnmount() because
once a component instance is unmounted, it will never be mounted again
...

What is the purpose of getDerivedStateFromError?
This lifecycle method is invoked after an error has been thrown by a descendant component
...

The signature of the lifecycle method is as follows,
static getDerivedStateFromError(error)
Let us take error boundary use case with the above lifecycle method for
demonstration purpose,
class ErrorBoundary extends React
...
state = { hasError: false };
}
static getDerivedStateFromError(error) {
// Update state so the next render will show the fallback UI
...
state
...