React Js

Important Note for Students:

This list of questions and answers is like a helpful guide for your upcoming interview. It's designed to
give you an idea of what to expect and help you get ready.

But remember:
1. Variety of Questions: The same questions can be asked in many different ways, so don't just
memorise the answers. Try to understand the concept behind each one.
2. Expect Surprises: There might be questions during your interview that are not on this list. It's
always good to be prepared for a few surprises.
3. Use This as a Starting Point: Think of this material as a starting point. It shows the kind of
questions you might encounter, but it's always good to study beyond this list during your course.

1. What is React Js?

React.js, commonly referred to as React, is an open-source JavaScript library used for building
user interfaces, particularly for web applications. It was developed by Facebook and has gained
widespread adoption due to its efficiency, modularity, and declarative approach to building UI
components.

Examples:

Creating a Simple Component:

jsx
import React from 'react';

function App() {
return (
<div>
<h1>Hello, React!</h1>
</div>
);
}

export default App;

Reusing Components:
jsx
import React from 'react';

function Greeting(props) {
return <p>Hello, {props.name}!</p>;
}

www.rwskill.com Shaping “skills” for “scaling” higher…!!! Page 1 of 21

function App() {
return (
<div>
<Greeting name="Alice" />
<Greeting name="Bob" />
</div>
);
}

export default App;

Features:

Component-Based Architecture: React applications are built using reusable and

encapsulated components. Each component can have its own state, logic, and UI, making it
easier to manage complex user interfaces.

Virtual DOM: React introduces a Virtual DOM, a lightweight representation of the actual DOM
in memory. This allows React to efficiently update the real DOM by only making necessary
changes, improving performance.

Declarative Syntax: React uses a declarative syntax, where you describe the desired UI state,
and React handles updating the DOM to match that state. This makes the code more intuitive
and easier to understand.

Unidirectional Data Flow: React enforces a unidirectional data flow, which means data flows
in a single direction from parent to child components. This helps maintain a clear and
predictable data flow in the application.

JSX (JavaScript XML): JSX is a syntax extension that allows you to write HTML-like code
within your JavaScript. It makes the creation of React elements more intuitive and readable.

Reusable Components: React encourages the creation of reusable components, which can
be used across different parts of the application, leading to a more modular and maintainable
codebase.

State Management: React components can manage their own state, making it easier to
handle dynamic data and user interactions. The introduction of hooks (e.g., `useState`,
`useEffect`) has further improved state management.

Rich Ecosystem: React has a vast ecosystem of third-party libraries, tools, and extensions
that enhance its functionality. This includes state management libraries like Redux, routing
solutions like React Router, and many more.

Server-Side Rendering (SSR): React supports server-side rendering, which improves

performance and search engine optimization by rendering components on the server before
sending them to the client.

www.rwskill.com Shaping “skill” for “scaling” higher…!!! Page 2 of 21

Community and Support: React has a large and active community, providing extensive
documentation, tutorials, and resources for developers to learn and build with React effectively.

React's combination of these features makes it a powerful tool for building modern, interactive,
and efficient user interfaces for web applications.

2 .What are React components?

React components are the building blocks of a user interface in a React application. They are
reusable, self-contained units of code that encapsulate specific functionality and can be
composed together to create complex UIs. In React, everything is a component, from a small
button to an entire page.

Components can be thought of as custom HTML elements with JavaScript logic attached to
them. They can represent different parts of a user interface, such as buttons, forms, navigation
menus, cards, modals, and more. React components are designed to promote reusability,
modularity, and maintainability in your application.

There are two main types of React components:

Functional Components: These are simpler components defined as JavaScript functions.

They receive input data (props) and return React elements to describe what should appear on
the screen. With the introduction of React Hooks, functional components can also manage state
and lifecycle aspects.

Example of a functional component:

jsx
import React from 'react';

function Button(props) {
return <button onClick={props.onClick}>{props.label}</button>;
}

export default Button;

Class Components: These are defined as JavaScript classes that extend the
`React.Component` class. They have a more extensive feature set, including the ability to
manage state, use lifecycle methods, and access component-specific methods.

Example of a class component:

jsx
import React from 'react';

class Counter extends React.Component {

constructor(props) {
super(props);
this.state = { count: 0 };

www.rwskill.com Shaping “skill” for “scaling” higher…!!! Page 3 of 21

 }

increment = () => {
this.setState({ count: this.state.count + 1 });
}

render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.increment}>Increment</button>
</div>
);
}
}

export default Counter;

Components can also be divided into smaller components, forming a hierarchical structure
known as the component tree. The top-level component is usually the main application
component, while the lower-level components represent the different UI elements and
functionalities. React components enable you to create a dynamic and interactive user interface
by combining and composing these building blocks.

3. What is JSX?
JSX (JavaScript XML) is an extension to JavaScript that allows you to write HTML-like syntax
directly in your JavaScript code. It is commonly used in React to define the structure of UI
components.

Example:
jsx
const element = <h1>Hello, JSX!</h1>;

4. Can a browser read a JSX File?

No, browsers cannot directly read JSX files because they are not valid JavaScript. JSX needs to
be transpiled into regular JavaScript using tools like Babel before it can be understood by
browsers.

5. Why is React widely used today?

React is widely used due to its component-based architecture, which promotes reusability and
modularity. It also introduces the Virtual DOM, which improves performance by minimizing direct
interaction with the actual DOM.

6. Are there any Disadvantages to using react?

Some disadvantages of using React include a steep learning curve for beginners, complex
tooling setup, and potential performance issues when dealing with large and complex
components.

www.rwskill.com Shaping “skill” for “scaling” higher…!!! Page 4 of 21

7. What is the difference between Element and Component?
An element is a plain object describing what you want to appear on the screen. A component is
a function or class that takes input (props) and returns a React element.

8. What are Pure Components?

Pure Components are a type of React component that only re-renders when the props or state
change. They are optimized for performance by reducing unnecessary re-renders.

9. What is the difference between state and props?

Props (short for properties) are inputs to a component that are passed from its parent. State is a
local data store within a component that can be changed and affects the component's behavior
and rendering.

10. What is the "key" prop and what is the benefit of using it in arrays of elements?
The "key" prop is used to help React identify which items have changed, been added, or been
removed in a list of elements. It improves performance by allowing React to update only the
necessary parts of the DOM.

Example:
jsx
const list = todos.map(todo => <lo key={todo.id}>{todo.text}</li>);

11. What is Virtual DOM?

The Virtual DOM is a concept where a lightweight representation of the actual DOM is kept in
memory. React uses it to efficiently update the real DOM by minimizing direct manipulations,
which improves performance.

12. What are controlled components in React?

Controlled components are React components that manage their own state and update it based
on user interactions. Input fields in forms are a common example of controlled components.

Example:
jsx
class ControlledInput extends React.Component {
constructor(props) {
super(props);
this.state = { value: '' };
}

handleChange = event => {

this.setState({ value: event.target.value });
}

render() {
return (
<input type="text" value={this.state.value} onChange={this.handleChange} />

www.rwskill.com Shaping “skill” for “scaling” higher…!!! Page 5 of 21

 );
}
}

13. What are uncontrolled components in React?

Uncontrolled components are components where the state is managed by the DOM itself rather
than by React. They are often used when integrating with non-React code or when you want to
minimize direct state management.

Example:
jsx
class UncontrolledInput extends React.Component {
render() {
return (
<input type="text" ref={input => this.input = input} />
);
}
}

14. What are the different phases of the component lifecycle?

The component lifecycle consists of three main phases: Mounting, Updating, and Unmounting.
Each phase has specific methods that are called at different times.

Mounting: `constructor`, `render`, `componentDidMount`

Updating: `shouldComponentUpdate`, `render`, `componentDidUpdate`
Unmounting: `componentWillUnmount`

15. What are Higher-Order Components (HOCs)?

Higher-Order Components are functions that take a component and return a new component
with enhanced functionality. They are used for code reuse, logic sharing, and abstraction.

Example:
jsx
const withLogger = WrappedComponent => {
return class extends React.Component {
componentDidMount() {
console.log('Component is mounted');
}

render() {
return <WrappedComponent {...this.props} />;
}
};
};

www.rwskill.com Shaping “skill” for “scaling” higher…!!! Page 6 of 21

const EnhancedComponent = withLogger(MyComponent);

16. What is context?

Context provides a way to share data between components without explicitly passing it through
props. It is designed to share data that is considered global or shared among many
components.

17. Why does React use `className` over the `class` attribute?
React uses `className` instead of `class` to set CSS classes on elements. This is because
`class` is a reserved keyword in JavaScript, and JSX is a JavaScript extension.

18. What are fragments?

Fragments are a way to group multiple elements without introducing an additional DOM
element. They improve rendering performance by reducing unnecessary elements in the DOM.

Example:
jsx
class App extends React.Component {
render() {
return (
<>
<Header />
<MainContent />
<Footer />
</>
);
}
}

19. What is a React Router?

React Router is a popular library used for handling routing in React applications. It allows you to
create single-page applications with dynamic routing and navigation.

20. What is memoization?

Memoization is an optimization technique used to cache the results of expensive function calls
and return the cached result when the same inputs occur again. This can greatly improve
performance by avoiding redundant computations.

21. Major differences between `React.memo()` and `useMemo()`.

`React.memo()` is a higher-order component that memoizes a functional component, preventing
unnecessary re-renders. `useMemo()` is a hook that memoizes the result of a function, allowing
you to optimize expensive calculations.

www.rwskill.com Shaping “skill” for “scaling” higher…!!! Page 7 of 21

22. Explain React Hooks.
React Hooks are functions that allow you to "hook into" React state and lifecycle features from
functional components. They provide a more concise way to manage state and side effects
compared to class components.

23. What are Custom Hooks?

Custom Hooks are reusable functions that encapsulate state logic and side effects. They allow
you to extract and share complex logic across different components.

Example:
jsx
function useFetchData(url) {
const [data, setData] = useState(null);

useEffect(() => {
fetch(url)
.then(response => response.json())
.then(data => setData(data));
}, [url]);

return data;
}

24. Difference between class component and functional component.

Class components are created using ES6 classes and have lifecycle methods, while functional
components are plain JavaScript functions and can utilize React Hooks for state and side
effects.

25. What is Context API?

Context API is a built-in feature in React that allows you to share state across multiple
components without prop drilling. It provides a way to manage global state and share data
easily.

26. Differentiate Between SSR (Server-Side Rendering) and CSR (Client-Side Rendering).
SSR renders the initial HTML on the server and sends it to the client, improving SEO and initial
load time. CSR renders the page using JavaScript on the client side, allowing for dynamic
updates and a smoother user experience.

27. Differentiate Between Virtual DOM and Real DOM.

Virtual DOM is a lightweight representation of the actual DOM in memory, used by React for
efficient updates. Real DOM is the physical representation of the web page's structure and
content, and updating it can be slower.

28. Meaning of `create-react-app` in React?

`create-react-app` is a command-line tool that helps you set up a new React application with a
default project structure, build configuration, and development environment.

www.rwskill.com Shaping “skill” for “scaling” higher…!!! Page 8 of 21

29. What is Redux?
Redux is an open-source JavaScript library that is commonly used in front-end web
development, particularly in applications built using frameworks like React. It is primarily
designed to manage the state of an application in a predictable and centralized manner. Redux
follows the principles of the Flux architecture and was inspired by the Elm architecture.

The core idea behind Redux is to provide a single source of truth for the state of an application.
Instead of having scattered and potentially conflicting states across different components,
Redux centralizes the state management into a "store." Components can then interact with the
store to read or update the application state.

Redux consists of the following key concepts:

Store: The central repository of the application state. It holds the entire state tree of the
application. The state can only be modified by emitting an action.

Actions: Actions are plain JavaScript objects that describe what happened in the application.
They carry information (payload) about the type of action being performed and any additional
data required to update the state.

Reducers: Reducers are functions that specify how the application's state changes in
response to actions. They take the current state and an action as input and return a new state.
Reducers should be pure functions that do not modify the state directly.

Dispatch: A function provided by Redux that allows components to send actions to the store.
When an action is dispatched, it triggers the state update process.

Selectors: Functions that are used to extract specific pieces of data from the state in a
structured way. Selectors help in efficiently accessing and computing derived data from the
state.

Middleware: Middleware functions can be used to intercept actions before they reach the
reducers. Middleware is often used for tasks like logging, making asynchronous API calls, or
modifying actions before they reach the reducers.

Redux provides a clear separation of concerns and helps manage complex application states,
making it easier to debug, test, and maintain large-scale applications. While Redux can add
some initial complexity to a project, it becomes highly beneficial as the application grows and
the state management requirements become more intricate. It's important to note that with the
introduction of React Hooks and context API improvements, the need for using Redux has
diminished in some cases, but it still remains a popular choice for state management in many
projects.

30. Difference between Redux and Context API.

Redux and the Context API are both state management solutions in React applications, but they
have different purposes, use cases, and levels of complexity. Here's a comparison of the two:

www.rwskill.com Shaping “skill” for “scaling” higher…!!! Page 9 of 21

Complexity:
● Redux: Redux is a more comprehensive and robust state management library. It
introduces concepts like actions, reducers, and a centralized store, which can be
beneficial for managing complex state and interactions in large applications.
● Context API: The Context API is a built-in feature of React that provides a way to share
state across components without the need for third-party libraries. It is simpler and easier
to set up compared to Redux, making it a good choice for smaller or less complex
applications.

State Management Approach:

● Redux: Redux enforces a strict unidirectional data flow, which can help prevent
unexpected state changes and make it easier to reason about how data changes in the
application. It is particularly useful for applications with a large amount of shared state or
when multiple components need to access or update the same state.
● Context API: While the Context API also supports sharing state, it provides a more
flexible approach and can lead to more implicit updates. This can make it harder to track
how and where state changes are occurring in larger applications.

Performance:
● Redux: Redux is optimized for performance through its use of immutable data updates
and shallow comparisons. This can lead to efficient updates, especially when dealing
with deeply nested state structures.
● Context API: The Context API can be less performant in some scenarios, particularly
when updates occur frequently or deeply nested components trigger updates. However,
React has made optimizations to improve the performance of the Context API over time.

Middleware and Advanced Features:

● Redux: Redux provides middleware support, allowing you to intercept and process
actions before they reach reducers. This is useful for handling asynchronous operations,
logging, and more. Redux also has a rich ecosystem of third-party middleware and dev
tools that can aid in debugging and development.
● Context API: The Context API does not natively provide middleware support or built-in
tools for debugging and advanced development features. While you can create custom
middleware-like behavior, it's not as integrated as Redux.

Community and Ecosystem:

● Redux: Redux has a well-established and extensive ecosystem with a large number of
community-contributed packages, middleware, and tools. It has been widely adopted and
has a strong community presence.

www.rwskill.com Shaping “skill” for “scaling” higher…!!! Page 10 of 21

 ● Context API: The Context API is a native part of React, so it benefits from being
maintained and developed by the React team. While it may not have as many third-party
packages as Redux, it has a solid foundation and is continuously evolving.

In summary, Redux is a more powerful and structured solution for complex state management
needs, while the Context API provides a simpler and more lightweight way to share state in
smaller applications or specific use cases. The choice between Redux and the Context API
depends on the specific requirements and complexity of your application.

31. Differentiate between Flux and Redux in React.

Flux and Redux are both architectural patterns for managing the state of a React application,
but they have some differences in terms of concepts and implementation. Redux is actually
heavily influenced by the Flux architecture. Here's a comparison between the two:

Flux:

● Components: In Flux, components are responsible for triggering actions and receiving
updates from stores.

● Actions: Actions are plain JavaScript objects that describe an event that occurred. They
are created and dispatched by components to signal changes in the application.

● Dispatcher: The dispatcher is a central hub that receives all actions and dispatches
them to the appropriate stores. It ensures that actions are processed in a sequential
order.

● Stores: Stores contain the application state and the business logic for handling actions.
They update their state in response to actions and emit change events to notify
components of state changes.

● Unidirectional Data Flow: Flux enforces a unidirectional data flow, meaning that data
changes flow in a single direction: from components to actions, through the dispatcher to
stores, and then back to components for rendering.

Redux:

● Components: In Redux, components interact with the state using actions and receive
state updates through subscriptions.

www.rwskill.com Shaping “skill” for “scaling” higher…!!! Page 11 of 21

 ● Actions: Like Flux, Redux uses actions to describe events. However, Redux actions are
plain objects with a "type" property that indicate the type of action, and they can carry
additional data.

● Reducers: Redux introduces the concept of reducers, which are pure functions
responsible for updating the application state based on actions. Reducers take the
current state and an action as inputs and return a new state.

● Store: Redux uses a single, centralized store that holds the entire application state. The
state is managed by reducers, and components can subscribe to the store to receive
updates.

● Middleware: Redux supports middleware, which are functions that can intercept and
process actions before they reach the reducers. Middleware is useful for tasks like
logging, making asynchronous requests, and more.

● DevTools: Redux has a powerful ecosystem of developer tools that make it easier to
debug, visualize state changes, and track action flows.

● Immutable State: Redux encourages the use of immutable state updates to track
changes efficiently and prevent accidental mutations.

In summary, both Flux and Redux aim to provide a structured approach to state management in
React applications, but Redux introduces some additional concepts and features like reducers,
a single store, middleware, and dev tools. Redux simplifies the Flux pattern and provides a
more standardized and predictable way to manage application state. It's worth noting that
Redux was created as a response to some of the challenges and complexities developers
encountered when implementing the Flux architecture in large-scale applications.

32. What are stateful components in React?

In React, stateful components are components that manage and maintain their own internal
state. Stateful components are also known as "class components" because, traditionally, state
was primarily managed within class-based components using the `state` property.

Here are the key characteristics of stateful components:

State Management: Stateful components have the ability to define and update their own state
using the `setState` method. The state represents data that can change over time and affects
how the component renders and behaves.

Lifecycle Methods: Stateful components can use lifecycle methods like

`componentDidMount`, `componentDidUpdate`, and `componentWillUnmount` to perform
actions at different stages of the component's lifecycle.

www.rwskill.com Shaping “skill” for “scaling” higher…!!! Page 12 of 21

Class-Based: Traditionally, stateful components were implemented using ES6 class syntax.
They extend the `React.Component` class and can define a `constructor` to initialize state and
other methods to manage the component's behavior.

Here's a simple example of a stateful component in React:

jsx
import React, { Component } from 'react';

class Counter extends Component {

constructor(props) {
super(props);
this.state = {
count: 0
};
}

incrementCount = () => {
this.setState(prevState => ({
count: prevState.count + 1
}));
};

render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.incrementCount}>Increment</button>
</div>
);
}
}

export default Counter;

In the example above, the `Counter` component is a stateful component that maintains its own
`count` state. When the "Increment" button is clicked, the `incrementCount` method is called,
which uses `setState` to update the state and trigger a re-render.

It's important to note that with the introduction of React Hooks, functional components can also
manage state using the `useState` hook, blurring the distinction between stateful class
components and functional components. Hooks provide a more concise and modern way to
manage state and lifecycle behavior within functional components.

www.rwskill.com Shaping “skill” for “scaling” higher…!!! Page 13 of 21

33. Why is a router required in React?
A router is required in React to enable the development of multi-page applications (MPAs) or
complex user interfaces that require different views or pages. React itself is primarily designed
for building single-page applications (SPAs), where most of the user interface is built and
updated within a single HTML page. However, many modern web applications require multiple
pages or views that correspond to different URLs, and this is where a router becomes essential.

A router in React allows you to:

Manage URL Navigation: A router enables navigation between different views or components
based on the URL. Each URL can correspond to a specific component or view within your
application. Users can use browser navigation or your application's navigation controls (like
links or buttons) to switch between different views.

Deep Linking: A router allows you to create deep links to specific sections of your application.
Users can bookmark or share these deep links, and when they access them, the router ensures
that the correct component or view is displayed.

Maintain a Clean UI Structure: With a router, you can organize your application into logical
sections or pages, making it easier to manage and maintain your codebase as it grows.

Improve User Experience: A router can provide a smoother and more intuitive user
experience by allowing users to navigate between different views without the need for a full
page reload. This can improve the perceived performance of your application.

Code Splitting: Routers often support code splitting, which means that different views or
components can be loaded asynchronously, improving the initial load time of your application by
only loading the code that is needed for the current view.

There are several router libraries available for React, such as React Router and Reach Router.
These libraries provide components and utilities to help you implement routing in your
application.

In summary, a router is required in React when you want to create multi-page applications,
handle different views or pages based on URLs, and provide a seamless and efficient user
experience when navigating between those views. It helps in organizing, managing, and
enhancing the overall user interface and navigation of your React application.

34. Components of Redux in React

Redux in React consists of several key components and concepts that work together to manage
the state of an application. These components help maintain a predictable and centralized state
management system. Here are the main components of Redux in a React application:

Store: The store is the centralized place where the entire application state is stored. It
represents the single source of truth for the data. The store is created using the `createStore`
function from the Redux library. The store holds the application's state and exposes methods to
dispatch actions and subscribe to state changes.

www.rwskill.com Shaping “skill” for “scaling” higher…!!! Page 14 of 21

Actions: Actions are plain JavaScript objects that describe events or changes that occur in the
application. They carry information about the type of action and may include additional data
(payload) that is necessary to update the state. Actions are dispatched using the `dispatch`
method of the Redux store.

Reducers: Reducers are pure functions responsible for updating the state based on the
dispatched actions. Each reducer handles a specific portion of the application's state. Reducers
take the current state and an action as input, and they return a new state object that reflects the
changes. Redux uses the combined reducers approach to manage multiple reducers together.

Dispatch: Dispatching an action is the process of sending an action to the Redux store. This
triggers the state update process, where reducers process the action and produce a new state.
Dispatching actions is typically done by components when they need to update the application
state.

Selectors: Selectors are functions that allow you to extract specific pieces of data from the
state in a structured and efficient way. They help in abstracting the structure of the state and
provide a clean way to access data from the store.

Middleware: Middleware are functions that sit between dispatching an action and the moment
it reaches the reducer. Middleware can intercept, modify, or dispatch additional actions before
they reach the reducer. Middleware is often used for handling asynchronous operations,
logging, or other custom behaviors.

Provider Component: In a React application, the `Provider` component from the `react-redux`
library is used to wrap the root component. It provides the Redux store to all components in the
application, making it accessible through the React context API. This eliminates the need to
manually pass the store down the component tree.

Connect Function: The `connect` function from the `react-redux` library is used to connect
React components to the Redux store. It provides a way to access state and dispatch actions
from within a component. The `connect` function takes care of subscribing to the store and
updating the component when the state changes.

These components work together to implement the Flux-like architecture that Redux follows,
providing a predictable and efficient way to manage state in React applications.

35. Advantages of using Redux

Advantages of using Redux include:

● Centralized and predictable state management.

● Time-travel debugging with a complete history of state changes.

● Easily share state between components.

● Facilitates debugging and testing.

www.rwskill.com Shaping “skill” for “scaling” higher…!!! Page 15 of 21

36. What is the purpose of the `componentWillReceiveProps` lifecycle method?
`componentWillReceiveProps` is a lifecycle method that is invoked when a component is about
to receive new props. It's used to perform actions based on the incoming prop changes before
the component re-renders.

Long answer

The `componentWillReceiveProps` lifecycle method was a part of the React class component
lifecycle prior to React version 16.3. With the introduction of React 16.3, this lifecycle method
has been deprecated, and its use is discouraged in favor of other lifecycle methods and
patterns. Instead of `componentWillReceiveProps`, you should use `componentDidUpdate`
along with the `componentDidMount` lifecycle methods to handle similar scenarios.

The purpose of the `componentWillReceiveProps` lifecycle method was to react to changes in

props before the component re-renders. It was often used to compare the current props with the
incoming props and perform some actions or updates based on the prop changes. For example,
you might use it to update the component's internal state when props change, or to trigger some
side effect.

Here's an example of how `componentWillReceiveProps` was used:

jsx
class MyComponent extends React.Component {
componentWillReceiveProps(nextProps) {
if (this.props.someProp !== nextProps.someProp) {
// Perform actions or updates based on prop changes
}
}

render() {
// Render component's UI
}
}

However, with the deprecation of `componentWillReceiveProps`, React introduced more

intuitive and predictable ways to handle similar scenarios:

ComponentDidUpdate: If you need to respond to prop changes after a component updates,

you can use the `componentDidUpdate` lifecycle method. This method is called after a
component's state and props have been updated and the re-rendering is complete.

Derived State: In some cases, you can use the `getDerivedStateFromProps` static method to
compute derived state based on prop changes. This method is a safer alternative for managing
state based on props and is called before rendering.

www.rwskill.com Shaping “skill” for “scaling” higher…!!! Page 16 of 21

Hooks: If you are using functional components, you can achieve similar behavior using the
`useEffect` hook. You can use `useEffect` to react to changes in props and perform side effects
or state updates accordingly.

Here's an example of how you might use the `componentDidUpdate` method to achieve similar
behavior:

jsx
class MyComponent extends React.Component {
componentDidUpdate(prevProps) {
if (this.props.someProp !== prevProps.someProp) {
// Perform actions or updates based on prop changes
}
}

render() {
// Render component's UI
}
}

37. What is the purpose of the `shouldComponentUpdate` lifecycle method?

`shouldComponentUpdate` is used to determine if a component should re-render after receiving
new props or state. It can help optimize performance by preventing unnecessary re-renders.

Long Answer

The `shouldComponentUpdate` lifecycle method is a method available in React class

components. Its purpose is to provide developers with a way to optimize the rendering
performance of their components by controlling whether a component should re-render or not.

When a component's state or props change, React will automatically trigger a re-render of the
component's UI to reflect those changes. However, in some cases, you might want to prevent
unnecessary re-renders to improve performance, especially if the component's UI doesn't need
to be updated based on certain changes in state or props.

The `shouldComponentUpdate` method is called before a component re-renders, and it

receives the next props and state as arguments. By default, if you don't define the
`shouldComponentUpdate` method, React assumes that the component should update and re-
render whenever its state or props change.

www.rwskill.com Shaping “skill” for “scaling” higher…!!! Page 17 of 21

You can implement the `shouldComponentUpdate` method in your class component to
manually determine whether the component should re-render or not. Typically, you would
compare the current props and state with the next props and state and return a boolean value
indicating whether the component should update. If you return `false`, the component will not re-
render; if you return `true`, the re-render will proceed as usual.

Here's a basic example of how you might use the `shouldComponentUpdate` method to
optimize rendering:

```jsx
class MyComponent extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
// Compare current props and state with next props and state
if (this.props.someProp === nextProps.someProp && this.state.someState ===
nextState.someState) {
return false; // Prevent re-render if the specific conditions are met
}
return true; // Allow re-render if conditions are not met
}

// ... rest of the component implementation ...

}
```

It's worth noting that as of my knowledge cutoff in September 2021, React introduced the
`React.PureComponent` class and the `React.memo` higher-order component, both of which
provide automatic shallow prop and state comparison to determine if a re-render is necessary.
These mechanisms can often make manual usage of `shouldComponentUpdate` less
necessary.

38. What is the purpose of the `getDerivedStateFromProps` lifecycle method?

`getDerivedStateFromProps` is used to update the component's state based on changes in
props. It's a static method that returns an object to update the state or null to indicate no
changes are necessary.

39. What is the `useEffect` hook used for?

The `useEffect` hook is used to manage side effects in functional components. It allows you to
perform actions after the component has rendered, such as data fetching, DOM manipulation,
or subscribing to events.

Long Answer

The `useEffect` hook is a fundamental and versatile feature in React's functional components
that allows you to perform side effects in your components. Side effects are actions that are not
directly related to rendering UI, such as data fetching, subscriptions, manipulating the DOM,

www.rwskill.com Shaping “skill” for “scaling” higher…!!! Page 18 of 21

and more. `useEffect` enables you to manage these side effects in a declarative and controlled
manner.

In class components, side effects were typically managed using lifecycle methods like
`componentDidMount`, `componentDidUpdate`, and `componentWillUnmount`. With the
introduction of functional components and hooks, the `useEffect` hook provides a unified way to
handle all these scenarios in one place.

Here's a basic example of how you might use the `useEffect` hook to fetch data from an API
when a component mounts:

```jsx
import React, { useState, useEffect } from 'react';

function DataFetchingComponent() {
const [data, setData] = useState(null);

useEffect(() => {
// This function will run when the component mounts
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data))
.catch(error => console.error(error));
}, []); // Empty dependency array means this effect runs only once, like componentDidMount

return (
<div>
{data ? (
<ul>
{data.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
):(
<p>Loading...</p>
)}
</div>
);
}
```

Key points about `useEffect`:

Declarative Side Effects: The `useEffect` hook takes two arguments. The first argument is a
function that contains the code you want to run for the side effect. The second argument is an
array of dependencies. The effect will re-run whenever any value in the dependency array
changes.

www.rwskill.com Shaping “skill” for “scaling” higher…!!! Page 19 of 21

Cleanup and Unmounting: If the function returned from the `useEffect` callback contains
cleanup logic (e.g., unsubscribing from a subscription), it will be executed when the component
unmounts or when the effect is about to run again due to a change in dependencies.

No Blocking: The code inside `useEffect` runs asynchronously after the component has
rendered. This means that it won't block the rendering of the component.

Multiple Effects: You can use multiple `useEffect` hooks in a single component to separate
different side effects and their corresponding cleanup logic.

Conditional Effects: You can conditionally apply effects based on certain conditions within the
component.

The `useEffect` hook is a powerful tool that simplifies and streamlines managing side effects in
React functional components, making the code more organized and maintainable compared to
using multiple lifecycle methods in class components.

40. How can you prevent the default behavior of an event in React?
In React, you can prevent the default behavior of an event by calling the `preventDefault()`
method on the event object. For example, to prevent a form submission from triggering a page
reload.

41. What is the purpose of the `key` prop in React lists?

The `key` prop is used to help React identify individual items in a list when rendering or
updating. It aids in efficient updates by enabling React to distinguish between items and
minimize re-renders.

42. What is the `dangerouslySetInnerHTML` prop used for?

The `dangerouslySetInnerHTML` prop is used to inject HTML content into a React component.
It should be used cautiously, as improper use can expose your application to cross-site scripting
(XSS) attacks.

43. What is a higher-order component (HOC) and why is it useful?

A higher-order component is a function that takes a component and returns a new component
with added functionality. HOCs are useful for sharing logic, code reuse, and separating
concerns in React applications.

www.rwskill.com Shaping “skill” for “scaling” higher…!!! Page 20 of 21

44. What is the purpose of the `forwardRef` function in React?
`forwardRef` is used to pass a ref from a parent component to a child component. This is
particularly useful when you need to access the underlying DOM element or a React component
instance from a parent component.

45. What is Redux Thunk and why is it used?

Redux Thunk is a middleware for Redux that allows you to write asynchronous logic, such as
data fetching, inside Redux action creators. It enables actions to return functions instead of
plain objects.

46. What is Redux Saga and why is it used?

Redux Saga is a middleware for Redux that allows you to handle side effects using generators
and provides a more complex and flexible way to manage asynchronous actions and data flow.

47. How can you optimize the performance of a React application?

Performance optimization techniques in React include using pure components, memoization,
lazy loading, code splitting, and minimizing unnecessary re-renders using hooks like `useMemo`
and `useCallback`.

48. What is the purpose of the `useReducer` hook?

The `useReducer` hook is an alternative to managing state with the `useState` hook. It allows
you to manage more complex state logic using a reducer function, similar to how Redux works.

49. How can you handle forms in React?

Forms in React can be handled by managing form state with the `useState` hook, capturing
user input with controlled components, and using the `onChange` event to update state as the
user types.

50. What is the role of the `ErrorBoundary` component in React?

An `ErrorBoundary` is a higher-order component that wraps its children and catches JavaScript
errors during rendering. It allows you to handle errors gracefully and display fallback UI when an
error occurs.

www.rwskill.com Shaping “skill” for “scaling” higher…!!! Page 21 of 21