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
...
lazy and Suspense is not yet
available for server-side rendering
...

Lets take an example,
import loadable from '@loadable/component'
const OtherComponent = loadable(() => import('
...

What is suspense component?
If the module containing the dynamic import is not yet loaded by the
time parent component renders, you must show some fallback content

130

while you’re waiting for it to load using a loading indicator
...

For example, the below code uses suspense component,
const OtherComponent = React
...
/OtherComponent'));
function MyComponent() {
return (

Loading
...

� Back to Top
276
...
The entire page
is going to re-render at once so users are unlikely to interact with other
elements in the page at the same time
...

Let us take an example of route based website using libraries like React
Router with React
...
/routes/Home'));
const About = lazy(() => import('
...

}>






131


);
In the above code, the code splitting will happen at each route level
...

Give an example on How to use context?
Context is designed to share data that can be considered global for a
tree of React components
...

//Lets create a context with a default theme value "luna"
const ThemeContext = React
...
Component {
render() {
return (
...
Provider>
);
}
}
// A middle component where you don't need to pass theme prop anymore
function Toolbar(props) {
return (

);
}
// Lets read theme value in the button component to use
class ThemedButton extends React
...
context} />;
}
}
� Back to Top
278
...
This can be helpful for testing
components in isolation without wrapping them
...

const MyContext = React
...

How do you use contextType?
ContextType is used to consume the context object
...
contextType as property of class: The contextType property on a class can be assigned a Context object created by
React
...
After that, you can consume the nearest
current value of that Context type using this
...

Lets assign contextType property on MyClass as below,
class MyClass extends React
...
context;
/* perform a side-effect at mount using the value of MyContext */
}
componentDidUpdate() {
let value = this
...
*/
}
componentWillUnmount() {
let value = this
...
*/
}
render() {
let value = this
...
contextType = MyContext;
2
...


133

class MyClass extends React
...
context;
/* render something based on the value */
}
}
� Back to Top
280
...

It requires a function as a child which receives current context value as
argument and returns a react node
...

Lets take a simple example,
...
Consumer>
� Back to Top
281
...

For example, the code below will re-render all consumers every time the
Provider re-renders because a new object is always created for value
...
Component {
render() {
return (



);
}
}
This can be solved by lifting up the value to parent state,

134

class App extends React
...
state = {
value: {something: 'something'},
};
}
render() {
return (
...
value}>


);
}
}
� Back to Top
282
...
It is handled
differently by React just like key
...
In this case, you can use Forward Ref API
...
forwardRef API
...
Component {
componentDidUpdate(prevProps) {
console
...
log('new props:', this
...
rest} = this
...
rest} />;
}
}
return React
...
props} forwardedRef={ref} />;
});
}
Let’s use this HOC to log all props that get passed to our “fancy button”
component,
class FancyButton extends React
...

}
//
...
In this case,
you can set focus to button element
...
/FancyButton';
const ref = React
...
current
...

Is ref argument available for all functions or class components?
Regular function or class components don’t receive the ref argument, and
ref is not available in props either
...
forwardRef call
...

Why do you need additional care for component libraries while
using forward refs?
When you start using forwardRef in a component library, you should treat
it as a breaking change and release a new major version of your library
...
These changes can
break apps and other libraries that depend on the old behavior
...

How to create react class components without ES6?
If you don’t use ES6 then you may need to use the create-react-class
module instead
...
Whereas for initial state, you have to
provide a separate getInitialState method that returns the initial state
...
props
...
log(this
...
message);
},
render: function() {
return

Hello, {this
...
name}

;
}
});
Note: If you use createReactClass then auto binding is available for all
methods
...
e, You don’t need to use
...

� Back to Top
286
...

Actually it is convenient when you don’t want to set up compilation in your build
environment
...
createElement(component, props,
...

For example, let us take a greeting example with JSX,
class Greeting extends React
...
props
...
render(
,
document
...
Component {
render() {
return React
...
props
...
render(
React
...
getElementById('root')
);
� Back to Top
287
...
The diffing algorithms is generating
the minimum number of operations to transform one tree into another
...

In this case, displaying 1000 elements would require in the order of one
billion comparisons
...
Instead, React implements
a heuristic O(n) algorithm based on two assumptions:
1
...

2
...

� Back to Top
288
...
The
behavior is different depending on the types of the root elements
...
Elements Of Different Types: Whenever the root elements have
different types, React will tear down the old tree and build the new
tree from scratch
...

2
...
Lets take an example with same DOM elements except
className attribute,

3
...
React updates the props of the underlying component
instance to match the new element, and calls componentWillReceiveProps() and componentWillUpdate() on the underlying instance
...

4
...
For example, when adding an element at the end of the children, converting
between these two trees works well
...
Handling keys: React supports a key attribute
...
For example, adding a key can
make the tree conversion efficient,

• Duke


139


• Villanova

• Connecticut


• Duke


• Villanova

� Back to Top
289
...
Managing focus, text selection, or media playback
...
Triggering imperative animations
...
Integrating with third-party DOM libraries
...

Must prop be named as render for render props?
Even though the pattern named render props, you don’t have to use a
prop named render to use this pattern
...
e, Any prop that is a function
that a component uses to know what to render is technically a “render
prop”
...
x}, {mouse
...
Instead, you can keep it directly inside element,

{mouse => (

The mouse position is {mouse
...
y}

)}

While using this above technique(without any name), explicitly state that
children should be a function in your propTypes
...
propTypes = {
children: PropTypes
...
isRequired
};

140

� Back to Top
291
...
Because the shallow prop comparison will always
return false for new props, and each render in this case will generate a
new value for the render prop
...

� Back to Top
292
...
For example, if you would prefer to have
a withMouse HOC instead of a component, you could easily create one
using a regular with a render prop
...
Component {
render() {
return (
(
...
props} mouse={mouse} />
)}/>
);
}
}
}
This way render props gives the flexibility of using either pattern
...

What is windowing technique?
Windowing is a technique that only renders a small subset of your rows at
any given time, and can dramatically reduce the time it takes to re-render
the components as well as the number of DOM nodes created
...

Both react-window and react-virtualized are popular windowing libraries

141

which provides several reusable components for displaying lists, grids, and
tabular data
...

How do you print falsy values in JSX?
The falsy values such as false, null, undefined, and true are valid children
but they don’t render anything
...
Let’s take an example on how to convert to
a string,

My JavaScript variable is {String(myVariable)}
...

What is the typical use case of portals?
React portals are very useful when a parent component has overflow: hidden or has properties that affect the stacking context (e
...
z-index, position, opacity) and you need to visually “break out” of its container
...

� Back to Top
296
...
With an uncontrolled component, you might want React to
specify the initial value, but leave subsequent updates uncontrolled
...

render() {
return (

...
input} />

);
}
The same applies for select and textArea inputs
...

� Back to Top
297
...
It mainly uses Redux and redux-saga for state management and asynchronous side-effects,
react-router for routing purpose, styled-components for styling react
components, axios for invoking REST api, and other supported stack
such as webpack, reselect, ESNext, Babel
...
com/react-boilerplate/react-boilerplate and start working
on any new react project
...

What is the difference between Real DOM and Virtual DOM?
Below are the main differences between Real DOM and Virtual DOM,
Real DOM

Virtual DOM

Updates are slow
DOM manipulation is very expensive
...

It causes too much of memory wastage
Creates a new DOM if element updates

Updates are fast
DOM manipulation is very easy
You Can’t directly update HTML
There is no memory wastage
It updates the JSX if element update

� Back to Top
299
...
Using the Bootstrap CDN: This is the easiest way to add bootstrap
...

2
...
React Bootstrap Package: In this case, you can add Bootstrap to our
React app is by using a package that has rebuilt Bootstrap components to work particularly as React components
...
react-bootstrap
2
...

Can you list down top websites or applications using react as
front end framework?
Below are the top 10 websites using React as their front-end framework,
1
...

3
...

5
...

7
...

9
...


Facebook
Uber
Instagram
WhatsApp
Khan Academy
Airbnb
Dropbox
Flipboard
Netflix
PayPal

� Back to Top
301
...
css file as usual and refer to them using className
...
But If you want
to try a different approach(CSS-In-JS) then styled-components library is
a good option
...

Do I need to rewrite all my class components with hooks?
No
...
Because there are no plans to remove
classes in ReactJS
...

How to fetch data with React Hooks?
The effect hook called useEffect is used to fetch the data with axios from
the API and to set the data in the local state of the component with the
state hook’s update function
...
algolia
...
data);
})()
}, []);
return (

{data
...
map(item => (

• ...
  url}>{item
  ...
  i
  ...
  
  � Back to Top
  304
  ...
  Currently there are no Hook equivalents to the uncommon
  getSnapshotBeforeUpdate and componentDidCatch lifecycles yet
  ...
  
  What is the stable release for hooks support?
  React includes a stable implementation of React Hooks in 16
  ...
  
  2
  ...
  
  4
  ...
  
  Why do we use array destructuring (square brackets notation)
  in useState?
  When we declare a state variable with useState, it returns a pair — an
  array with two items
  ...
  Using [0] and [1] to access them is
  a bit confusing because they have a specific meaning
  ...
  
  For example, the array index access would look as follows:
  var userStateVariable = useState('userProfile'); // Returns an array pair
  var user = userStateVariable[0]; // Access first item
  var setUser = userStateVariable[1]; // Access second item
  Whereas with array destructuring the variables can be accessed as follows:
  const [user, setUser] = useState('userProfile');
  � Back to Top
  
  146
  
  307
  ...
  Below are some of
  them,
  1
  ...
  Community experiments with render prop APIs such as Reactions
  Component
  3
  ...
  
  4
  ...
  
  5
  ...
  
  � Back to Top
  308
  ...
  You will need to use a ref to interact with the DOM node directly
  if you want to access imperative API of a web component
  ...
  
  � Back to Top
  309
  ...
  Getting values in and out of form state
  2
  ...
  Handling form submission
  � Back to Top
  310
  ...
  
  � Back to Top
  
  147
  
  311
  ...
  You need a transpiler to convert
  your JSX to regular Javascript that browsers can understand
  ...
  
  � Back to Top
  312
  ...
  
  � Back to Top
  313
  ...
  The
  react-scripts start command sets up the development environment
  and starts a server, as well as hot module reloading
  ...
  
  What are the features of create react app?
  Below are the list of some of the features provided by create react app
  ...
  React, JSX, ES6, Typescript and Flow syntax support
  ...
  Autoprefixed CSS
  3
  ...
  A live development server
  5
  ...
  A build script to bundle JS, CSS, and images for production, with
  hashes and sourcemaps
  7
  ...
  
  � Back to Top
  
  148
  
  315
  ...
  It also helps search engines to crawl your pages easily
  for SEO purposes
  ...
  
  � Back to Top
  316
  ...
  For reactJs application, you need to install below packages, bash
  npm install mobx
  --save
  npm install mobx-react --save
  � Back to Top
  317
  ...
  
  
  149
  
  Should I learn ES6 before learning ReactJS?
  No, you don’t have to learn es2015/es6 to learn react
  ...
  Let’s see some
  of the frequently used ES6 features,
  1
  ...
  props
  ...
  props
  ...
  props “‘
  2
  ...
  props} /> “‘
  3
  ...
  map(function (user) {
  return
  
• {user
  ...
  map(user =>
• {user
  ...
  
  What is Concurrent Rendering?
  The Concurrent rendering makes React apps to be more responsive by
  rendering component trees without blocking the main UI thread
  ...
  
  i
  ...
  You can enable this in two ways,
  // 1
  ...
  unstable_ConcurrentMode>
  
  ...
  Whole app using createRoot
  ReactDOM
  ...
  render();
  � Back to Top
  320
  ...
  Previously concurrent Mode being referred to
  as “Async Mode” by React team
  ...
  So it avoids
  the confusion from other approaches to Async Rendering
  ...
  
  Can I use javascript urls in react16
  ...
  Because URLs starting with javascript: are dangerous by including
  unsanitized output in a tag like and create a security hole
  ...
  website}>More details
  Remember that the future versions will throw an error for javascript URLs
  ...
  
  What is the purpose of eslint plugin for hooks?
  The ESLint plugin enforces rules of Hooks to avoid bugs
  ...
  In particular, the rule enforces that,
  1
  ...
  
  2
  ...
  
  � Back to Top
  323
  ...
  When you tap
  it, it turns blue if it was previously grey, and grey if it was previously blue
  ...
  likes() ) {
  if( hasBlue() ) {
  removeBlue();
  addGrey();
  } else {
  removeGrey();
  addBlue();
  }
  }
  Basically, you have to check what is currently on the screen and handle
  all the changes necessary to redraw it with the current state, including undoing the changes from the previous state
  ...
  
  In contrast, the declarative approach would be:
  if( this
  ...
  liked ) {
  return ;
  } else {
  return ;
  }
  Because the declarative approach separates concerns, this part of it only
  needs to handle how the UI should look in a sepecific state, and is therefore
  much simpler to understand
  ...
  
  What are the benefits of using typescript with reactjs?
  Below are some of the benefits of using typescript with Reactjs,
  1
  ...
  
  3
  ...
  
  
  It is possible to use latest JavaScript features
  Use of interfaces for complex type definitions
  IDEs such as VS Code was made for TypeScript
  Avoid bugs with the ease of readability and Validation
  
  � Back to Top
  325
  ...
  js
  ...
  
  
  152
  
  App
  ...
  /actions/auth';
  store
  ...
  js, wrap the
  AuthState in index
  ...
  js can access the auth context
  ...
  
  index
  ...
  /App';
  AuthState from '
  ...
  render(
  ...
  StrictMode>,
  document
  ...
  js
  const authContext = useContext(AuthContext);
  const { loadUser } = authContext;
  useEffect(() => {
  loadUser();
  },[])
  loadUser
  const loadUser = async () => {
  const token = sessionStorage
  ...
  data
  ...
  error(err);
  }
  }
  � Back to Top
  326
  ...
  It is possible to use JSX without importing React packages
  2
  ...
  The future improvements provides the flexibility to reduce the number of concepts to learn React
  ...
  
  How does new JSX transform different from old transform?
  The new JSX transform doesn’t require React to be in scope
  ...
  e, You
  don’t need to import React package for simple scenarios
  ...
  createElement('h1', null, 'Good morning!!');
  }
  New Transform:
  The new JSX transform doesn’t require any React imports
  function App() {
  return

  Good morning!!

  ;
  }
  Under the hood JSX transform compiles to below code
  import {jsx as _jsx} from 'react/jsx-runtime';
  function App() {
  return _jsx('h1', { children: 'Good morning!!' });
  }
  Note: You still need to import React to use Hooks
  ...
  
  How do you get redux scaffolding using create-react-app?
  Redux team has provided official redux+js or redux+typescript templates
  for create-react-app project
  ...
  
  2
  ...
  
  4
  ...
  Javascript template:
  npx create-react-app my-app --template redux
  2
  ...
  
  
  155
  
  What are React Server components?
  React Server Component is a way to write React component that gets rendered in the server-side with the purpose of improving React app performance
  ...
  
  Note: React Server Components is still under development and not recommended for production yet
  ...
  
  What is prop drilling?
  Prop Drilling is the process by which you pass data from one component of
  the React Component tree to another by going through other components
  that do not need the data but only help in passing it around
  ...
  
  What is state mutation and how to prevent it?
  State mutation happens when you try to update the state of a component without actually using setState function
  ...
  This is the main
  reason why it is advised to return new instances of state variables from
  the reducers by using Object
  ...
  
  This can cause unknown issues in the UI as the value of the state variable
  got updated without telling React to check what all components were
  being affected from this update and it can cause UI bugs
  ...
  component { constructor(props) {
  super(props); this
  ...
  state; loading = (() =>
  true)(); // Trying to perform an operation and directly saving in a state
  variable }
  “‘
  How to prevent it: Make sure your state variables are immutable by
  either enforcing immutability by using plugins like Immutable
  ...
  
  � Back to Top
  332
  ...
  useState causes components to re-render after state updates whereas
  useRef doesn’t cause a component to re-render when the value or
  state changes
  ...
  current) property
  ...
  useState allows us to update the state inside components
  ...
  
  � Back to Top
  
  Disclaimer
  The questions provided in this repository are the summary of frequently asked
  questions across numerous companies
  ...
  The primary purpose is for you to get a sense of
  what some companies might ask — do not get discouraged if you don’t know
  the answer to all of them — that is ok!
  Good luck with your interview �
  
  157
  
  

  ---

  Title: Reactjs Interview Questions
  Description: React is a JavaScript-based UI development library. Facebook and an open-source developer community run it. Although React is a library rather than a language, it is widely used in web development. The library first appeared in May 2013 and is now one of the most commonly used frontend libraries for web development.in this notes i have done 300+ interview questions and answers so that is best for interview from my side
  

  Buy These NotesPreview

• Become a Notesale Ambassador

• Ts and Cs
• Contact Us