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
...

render() {
// A new version of EnhancedComponent is created on every render
// EnhancedComponent1 !== EnhancedComponent2
const EnhancedComponent = enhance(MyComponent);
// That causes the entire subtree to unmount/remount each time!
return ;
}
The above code impacts on performance by remounting a component
that causes the state of that component and all of its children to be
lost
...


120

2
...
staticMethod = function() {/*
...
staticMethod === 'undefined' // true
You can overcome this by copying the methods onto the container
before returning it,
function enhance(WrappedComponent) {
class Enhance extends React
...
*/ }
// Must know exactly which method(s) to copy :(
Enhance
...
staticMethod;
return Enhance;
}
3
...

This is because ref is not really a prop similar to key
...
forwardRef API
� Back to Top
255
...
forwardRef accepts a render function as parameter and DevTools
uses this function to determine what to display for the ref forwarding
component
...
forwardRef((props, ref) => {
return ...
forwardRef(
function myFunction(props, ref) {
return ...
Component {
//
...
props} forwardedRef={ref} />;
}
// Give this component a more helpful display name in DevTools
...
g
...
displayName || Component
...
displayName = `logProps(${name})`;
return React
...

When component props defaults to true?
If you pass no value for a prop, it defaults to true
...

For example, below expressions are equivalent,


Note: It is not recommended to use this approach because it can be
confused with the ES6 object shorthand (example, {name} which is short
for {name: name})
� Back to Top
257
...
js is a popular and lightweight framework for static and
server‑rendered applications built with React
...
Below are the major features provided by NextJS,
122

1
...

3
...

5
...


Server-rendered by default
Automatic code splitting for faster page loads
Simple client-side routing (page based)
Webpack-based dev environment which supports (HMR)
Able to implement with Express or any other Node
...

How do you pass an event handler to a component?
You can pass event handlers and other functions as props to child components
...
handleClick}>
� Back to Top
259
...
It is often the easiest way to pass parameters to callback
functions
...

class Foo extends Component {
handleClick() {
console
...
handleClick()}>Click Me;
}
}
Note: Using an arrow function in render method creates a new function
each time the component renders, which may have performance implications
� Back to Top
260
...
This can be achieved in the below
possible ways,

123

1
...
For example,
it can be used using _
...
Debouncing: Publish changes after a period of inactivity
...
debounce lodash function
3
...
For example, it can be used using raf-schd lodash
function
� Back to Top
261
...

Thus it ensures that you can never inject anything that’s not explicitly
written in your application
...

For example, you can embed user input as below,
const name = response
...

� Back to Top
262
...

For example, lets take a ticking clock example, where it updates the time
by calling render method multiple times,
function tick() {
const element = (

Hello, world!

It is {new Date()
...

);
ReactDOM
...
getElementById('root'));
}
setInterval(tick, 1000);

124

� Back to Top
263
...

Let us take a below capital function,
function capital(amount, interest) {
return amount + interest;
}
The above function is called “pure” because it does not attempt to change
their inputs, and always return the same result for the same inputs
...
”
� Back to Top
264
...

For example, let us take a facebook user with posts and comments details
as state variables,
constructor(props) {
super(props);
this
...
then(response => {
this
...
posts
});
});
fetchComments()
...
setState({
comments: response
...
setState({comments})
updates only comments variable without modifying or replacing posts
variable
...

How do you pass arguments to an event handler?
During iterations or loops, it is common to pass an extra parameter to
an event handler
...

Let us take an example of user details updated in a grid,
this
...
updateUser
...
You need to pass it explicitly for arrow functions and it will be
passed automatically for bind method
...

How to prevent component from rendering?
You can prevent component from rendering by returning null based on
specific condition
...

function Greeting(props) {
if (!props
...
name}