The Reacting Point - Codaroo.

io
eBook

The Reacting Point: 100 questions

to ace the next React Interview

What is The Reacting Point?

The Reacting Point is a comprehensive ebook that is designed to help job

seekers and developers brush up on their React knowledge before an
interview.

Our goal is to cover the most frequent questions that pop-up on React
interviews. In addition to that, we are providing the answers that are
deep enough to understand. We are also providing the resources that
will help you dive even deeper.

Ths eBook will evolve as we grow, as technology changes and with your
feedback. This is the first version of this eBook.

As a bonus, at the end of this eBook you willfind links to resources where
you will be able to find remote React jobs.

We hope that this eBook will bring you value!

Thank you!
The Reacting Point - Codaroo.io
eBook

1. Advantages and Disadvantages of React

Advantages of React include its ability to handle complex user

interfaces, its flexibility and reusability of components, and its
performance optimization through the use of a virtual DOM.
Disadvantages include a steep learning curve for beginners and the
need for additional libraries or tools to complete a full-featured
application.

2. What Does DOM Stand For?

DOM stands for Document Object Model.

3. What is Virtua l DOM?

Virtual DOM is a lightweight in-memory representation of the actual DOM. It

is used to improve the performance of updates and changes to the actual
DOM by reducing the number of expensive DOM manipulations.

4. How does Virtual DOM works?

Virtual DOM works by comparing the current virtual DOM tree with a new
virtual DOM tree, and then applying the minimal set of changes to the actual
DOM. This allows React to efficiently update the user interface without
causing unnecessary re-renders or layout changes.
The Reacting Point - Codaroo.io
eBook

Virtual DOM

State Change --+ Compute Diff --+ Re-render

Browser
DOM

Visual representation of how Virtual DOM works provided by Ayush Verma;

source: https://javascri pt.plainenglish.io/react-the-vi rtual-dom-
com prehensive-g uide-acd19c5e327a

5. W hat is the difference between Shadow DOM

and Virt ual DOM?

Shadow DOM refers to a feature of web browsers that allows developers to

create a separate DOM tree, called a shadow tree, that is attached to a
specific element and is hidden from the main document.

Virtual DOM is a concept used in React to optimize the performance of

updates to the user interface, whereas Shadow DOM is a feature of web
browsers that allows for scoping of CSS and JavaScript within a specific
element.
The Reacting Point - Codaroo.io
eBook

6. What are the differences between Real DOM and

Virtual DOM?

Real DOM is the actual tree-like structure of a web page, which can be
manipulated directly to change the layout or content of the page. Virtual
DOM is a lightweight in-memory representation of the actual DOM, which is
used to optimize the performance of updates to the user interface.

7. What is React Fiber?

React Fiber 1s a new reconciliation algorithm that was introduced in React

16. It is designed to improve the performance and flexibility of React by
breaking down the render process into smaller, asynchronous chunks.

8. What is the main goal of React Fiber?

The main goal of React Fiber is to improve the performance and

responsiveness of web applications by breaking down the render process
into smaller,asynchronous chunks. This allows React to more effectively
utilize the main thread and to better handle complex user interfaces.

9. What is reconciliation?

Reconciliation is the process that React uses to determine the minimal set
of changes to be made to the actual DOM. It compares the current virtual
DOM tree with a new virtual DOM tree, and then applies the minimal set of
changes to the actual DOM.
The Reacting Point - Codaroo.io
eBook

Update
Reconciliatio
n New Virtual
DOM Browser DOM

Visual representation of how reconciliation works provided by Ayush Verma;

source: https://javascri pt.plainenglish.io/react-the-vi rtual-dom
comprehensive-guide-acd19c5e327a

10. What is JSX?

JSX is a syntax extension for JavaScript that allows developers to write

HTML-like elements in their JavaScript code. It is commonly used in
React to describe the structure and content of a component's user
interface.

11. Can browsers read a JSX file?

Browsers cannot read JSX files directly. They must be transpiled, or

converted, to JavaScript before they can be interpreted by the browser.
The Reacting Point - Codaroo.io
eBook

12. Explain how VirtualDOM works

Virtual DOM is a lightweight, in-memory representation of the actual DOM.

It is used to improve the performance of updates and changes to the
actual DOM by reducing the number of expensive DOM manipulations.

When a component's state or props change, React will create a new virtual
DOM tree, compare it to the previous tree, and then apply only the minimal
set of changes necessary to the actual DOM. This improves the
performance of the application and reduces the number of unnecessary re
renders.

13. What are React components?

In React, everything is a component. A component is a small, reusable piece

of code that represents a part of a user interface.

Components can be defined as either a class or a function and can include

a combination of HTML, CSS, and JavaScript code. These components can
also be nested and reused throughout the application, which makes it easy
to manage and maintain the application's user interface.

14. What is the meaning of the component-

based architecture of React?

The component-based architecture of React allows developers to build

complex user interfaces by breaking them down into smaller, reusable
components. Each component can manage its own state and props, and
can be easily reused throughout the application. This structure makes it
easy to understand, test, and maintain the application's codebase.
The Reacting Point - Codaroo.io
eBook

15. What are functional components?

Functional components in React are simply JavaScript functions that return

a React element. They do not have state or lifecycle methods and are used
for simple, stateless components.

16. What are class components in React?

Class components in React are defined using the ES6 class syntax. They
have access to state and lifecycle methods and are used for more complex,
stateful components .

17.What is the difference between functional and

class components in React?

The main difference between functional and class components in React is

that functional components are simpler and do not have state or lifecycle
methods, whereas class components have access to state and lifecycle
methods and are more powerful.

Additionally, functional components use hooks for state management.

18. How to use CSS in React?

In React, CSS can be added to a component in several ways:

• Using inline styles
• Using a CSS file and importing it into the component
• Using a CSS preprocessor like Sass or Less
• Using a CSS-in-JS library like styled-components
The Reacting Point - Codaroo.io
eBook

19. How does rendering work in React?

React's rendering process begins when a component's state or props

change. React will create a new virtual DOM tree, compare it to the previous
tree, and then apply only the minimal set of changes necessary to the
actual DOM. This process is called reconciliation.

20. What are states in React?

State in React is an object that holds data that can change, and it is
managed by a component. It is used to store and update the
component's data and can be passed down to child components as
props.

State can be updated using the setState method, which triggers a re-render
of the component, updating the user interface.

21. What are props in React?

Props in React are used to pass data from a parent component to a child
component. They are essentially a way to pass data and methods down the
component tree. Props are read-only, meaning that they cannot be modified
by the child component.

22. What is children prop?

The children prop is a special prop that is used to pass children elements to
a component. It is used to pass elements between components, such as a
list of items or a set of nested components.
The Reacting Point - Codaroo.io
eBook

23. What is a higher-order component in React?

A higher-order component (HOC) is a function that takes a component as

an argument and returns a new component with additional functionality.
HOCs are used to reuse component logic, such as authentication or
performance optimization.

24. How to create props proxy for HOC component?

To create a props proxy for an HOC component, you can use the
React .f orwardRef function. This function allows you to pass props
through to the wrapped component, preserving the original component's
props.

25. What are controlled components?

Controlled components are components that are controlled by the state of

the parent component. The parent component manages the component's
state, and the child component's behavior is determined by the parent
component's state.

26. What are uncontrolled components?

Uncontrolled components are components that manage their own state

internally, and their behavior is not determined by the parent component's
state.
The Reacting Point - Codaroo.io
eBook

27. How to update state in React class components?

To update state in a React class component, you can use the setstate
method. This method takes an object or function as an argument, and it
will merge the new state with the existing state.

28. How to update state in React functional

component?

To update state in a React functional component, you can use the

usestate hook. This hook returns an array containing the current state
and a function to update it.

29. How to Differentiate Between State and Props?

State is the internal data of a component that can change and is managed
by the component itself. Props are external data passed to a component
from its parent component. State can be updated by the component,
whereas props cannot be updated by the component.

30. What is Lifting State Up in React?

Lifting state up in React refers to the process of moving state management

from a child component to its parent component. This is done to make the
state more easily accessible and manageable for the entire component tree.
The Reacting Point - Codaroo.io
eBook

31. What is an Event in React?

An event in React is a way to respond to user interactions such as clicks,

hover, or form submissions.

32. How to Handle Events in React (for both

functional and class components)?

In React, events can be handled using the on keyword, followed by the

event name and a callback function. For example, to handle a button
click event, you would use onClick={bandleClick} . This can be done in
both functional and class components.

33. What is the difference between HTML and

React event handling?

In HTML, events are handled using event attributes, such as onclick or

oncbange. In React, events are handled using the on keyword and a
callback function. React's event handling system is more powerful and
flexible than the traditional HTML event handling system.

34. What are synthetic events in React?

Synthetic events in React are a cross-browser compatible way to handle

events. They are used to normalize the behavior of different browser event
systems and provide a consistent API for handling events.
The Reacting Point - Codaroo.io
eBook

35. How to pass parameter to an event handler?

To pass a parameter to an event handler, you can use an arrow function to

wrap the event handler. For example: <button onelick={()=>
handleClick(parameter)}>.

36. What are React Hooks?

React Hooks are functions that allow you to use state and other React
features in functiona l components. They were introduced in React 16.8.

37. When were the React Hooks introduced first?

React Hooks were first introduced in React 16.8 in 2019.

38. Can you explain the useState hook with

examples?

The useState hook allows you

to add state to a functional
component. It returns an array
with two values: the current
state and a function to update
it. Here's an example of how to
use the useState hook:
The Reacting Point - Codaroo.io
eBook

39. Can you explain the useEffect hook?

The useEffect hook allows you to run side effects, such as fetching data or
updating the DOM, in a functional component. It takes a callback function
as its first argument, which is called after the component has rendered.
Here's an example of how to use the useEffect hook:

The useEffect hook is used to run an async function fetchData that fetches
data from an API and updates the component's state with the result. The
empty array [] passed as the second argument to useEffect means that the
effect will only run once, when the component is first rendered.

The useEffect hook allows the component to update its state and re-render
in response to changes in some variable. In this case, when the component
is first rendered, the data is fetched and the component re-renders with the
updated data.
The Reacting Point - Codaroo.io
eBook

40. When are we using the useMemo hook and why?

useMemo is a hook that allows you to memoize a value. It is used to

optimize the performance of a component by only re-computing a value if
its dependencies have changed. This can be useful for avoiding expensive
calculations or rendering operations. Here's an example of how to use the
useMemo hook:

In this example, the useMemo hook is used to memoize the result of a costly
calculation that depends on the values of a and b. The useMemo hook takes
two arguments: the first is a function that performs the calculation, and the
second is an array of dependencies.
The Reacting Point - Codaroo.io
eBook

The component has two input fields, where the user can set the values of a
and b. When either of the inputs change, the component re-renders, but the
result is only recalculated if a or b have changed, which is determined by
the dependencies array [a,b].

This prevents the costly calculation from being performed every time the
component re-renders, improving the performance of the application.
The Reacting Point - Codaroo.io
eBook

41. What is useRef being used for?

useRef is a hook that allows you to create a reference to a DOM node or a

JavaScript object. It can be used to access a DOM node directly, or to store
a value that should not cause a re-render when it changes. Here's an
example of how to use the useRef hook:

42. How to create refs?

To create a ref, you can use the useRef hook, which returns a ref object.
You can then assign this object to a ref attribute on a JSX element.
The Reacting Point - Codaroo.io
eBook

43. What are forward refs and can you give me a

code example for it?

A forward ref is a way to pass a ref through a component to a child

component. It allows you to access the ref of a child component from the
parent component. Here's an example of how to create a forward ref:

In this example, the ChildComponent is defined as a "forward ref"

component using the forwardRef higher-order component. The
forwardRef function takes a component and returns a new component
that can accept a ref as a prop.
The Reacting Point - Codaroo.io
eBook

The ParentComponent has a ref object inputRef that is passed as a

prop to the ChildComponent using the ref attribute. Inside the child
component, the ref prop is passed as a second argument to the
component function, this way is passed to the input element using the
ref attribute.

When the button is clicked, it triggers the handleClick function, which

updates the value of the input field by accessing its value property via
the ref objec t. This way, the ref object can be passed through the
component hierarchy to access elements deep down in the tree.

44. Can you create your custom React hooks?

Yes, you can create your custom React hooks by following the naming
convention "use" and using state and other hooks inside it.

45. What do you need to keep in mind while

creating custom React hooks?

When creating custom React hooks, it's important to keep in mind that
they should only call other hooks at the top level and not inside loops or
conditions.

Also, it's important to make sure that the hook only performs one specific
action.
The Reacting Point - Codaroo.io
eBook

46. What is the Context API in React?

The Context API in React allows you to share data between components
without passing props through every level of the component tree. It
provides a way for components to access data that is "global" to the
component tree, such as a user's authentication status or a theme.

The Context API consists of a Provider component, which provides the data,
and a Consumer component, which accesses the data.

47. What is React Router?

React Router is a library for routing in React apps. It allows you to define the
different routes in your application and render the appropriate components
for each route. This makes it easy to change the displayed content based
on the current URL, without having to refresh the page.

48. What are Pure components and what is their

purpose?

Pure components are components that only re-render if their props or state
have changed. They are optimized for performance, and they can improve
the performance of your application by reducing the number of
unnecessary re-renders.

Pure components are also known as "functional components" or

"stateless components ' and they are defined by a function.