Ip QB (Unit 4)

IP QB UT 2
UNIT 4
1. Write any five differences between MVC, Flux and Redux.

ANS]
2. How do you implement flux pattern in React application?
ANS]
3. Explain architecture of flux in detail.
ANS]
Flux is an application architecture that Facebook uses internally for building the client-side web application
with React. It is not a library nor a framework. It is neither a library nor a framework. It is a kind of
architecture that complements React as view and follows the concept of Unidirectional Data Flow model. It is
useful when the project has dynamic data, and we need to keep the data updated in an effective manner. It
reduces the runtime errors.
Flux applications have three major roles in dealing with data:
1. Dispatcher
2. Stores
3. Views (React components)
Here, you should not be confused with the Model-View-Controller (MVC) model. Although, Controllers exists
in both, but Flux controller-views (views) found at the top of the hierarchy. It retrieves data from the stores
and then passes this data down to their children. Additionally, action creators - dispatcher helper methods
used to describe all changes that are possible in the application. It can be useful as a fourth part of the Flux
update cycle.
Structure and Data Flow
In Flux application, data flows in a single direction(unidirectional). This data flow is central to the flux pattern.
The dispatcher, stores, and views are independent nodes with inputs and outputs. The actions are simple
objects that contain new data and type property. Now, let us look at the various components of flux
architecture one by one.
Dispatcher
It is a central hub for the React Flux application and manages all data flow of your Flux application. It is a
registry of callbacks into the stores. It has no real intelligence of its own, and simply acts as a mechanism for
distributing the actions to the stores. All stores register itself and provide a callback. It is a place which
handled all events that modify the store. When an action creator provides a new action to the dispatcher, all
stores receive that action via the callbacks in the registry.
The dispatcher's API has five methods. These are:
Stores
It primarily contains the application state and logic. It is similar to the model in a traditional MVC. It is used for
maintaining a particular state within the application, updates themselves in response to an action, and emit
the change event to alert the controller view.
Views
It is also called as controller-views. It is located at the top of the chain to store the logic to generate actions
and receive new data from the store. It is a React component listen to change events and receives the data
from the stores and re-render the application.
Actions
The dispatcher method allows us to trigger a dispatch to the store and include a payload of data, which we
call an action. It is an action creator or helper methods that pass the data to the dispatcher.
Advantage of Flux
• It is a unidirectional data flow model which is easy to understand.
• It is open source and more of a design pattern than a formal framework like MVC architecture.
• The flux application is easier to maintain.
• The flux application parts are decoupled.

4. Explain different types of side effects in React.
ANS]
Side Effects in React
In React, a side effect is an operation that affects something outside the scope of the component, such as
making an API request, setting a timer, or updating the DOM directly. There are several types of side effects in
React, which can be categorized based on their behavior and when they are executed.
1. Sync Side Effects
Sync side effects are executed immediately, during the render phase. They are typically used for updating the
DOM or setting a ref. Examples of sync side effects include:
• Updating the DOM directly using document.getElementById
• Setting a ref using React.createRef
2. Async Side Effects
Async side effects are executed after the render phase, during the commit phase. They are typically used for
making API requests, setting timers, or updating the DOM asynchronously. Examples of async side effects
include:
• Making an API request using fetch or axios
• Setting a timer using setTimeout or setInterval
3. Layout Side Effects
Layout side effects are executed after the render phase, during the layout phase. They are typically used for
measuring the layout of the component or updating the DOM layout. Examples of layout side effects include:
• Measuring the size of an element using getBoundingClientRect
• Updating the layout of an element using requestAnimationFrame
4. Error Boundaries
Error boundaries are a type of side effect that catch and handle errors that occur in a component tree. They
are typically used for displaying a fallback UI when an error occurs.
5. Cleanup Side Effects
Cleanup side effects are executed when a component is unmounted or updated. They are typically used for
cleaning up resources, such as removing event listeners or canceling timers.
Best Practices
When working with side effects in React, it's essential to follow best practices to avoid bugs and
performance issues. Some best practices include:
• Using the useEffect hook to manage side effects
• Avoiding sync side effects whenever possible
• Cleaning up resources in the useEffect cleanup function
• Using error boundaries to catch and handle errors
5. Explain hooks effect with an example.

ANS]
The useEffect hook is a built-in React hook that allows you to run side effects in functional components. It
takes a function as an argument, which is executed after the component has rendered or updated.
Basic Syntax
The basic syntax of the useEffect hook is as follows:
The useEffect hook takes two arguments:

• A function that contains the side effect code
• An optional array of dependencies
Example: Fetching Data with useEffect
Let's consider an example where we want to fetch data from an API when a component mounts. We'll use
the useEffect hook to achieve this:
6. Explain React Hooks in detail.
ANS]
React Hooks in Detail
React Hooks are a way to use state and other React features in functional components. They provide a way to
"hook into" React state and lifecycle methods from functional components.
Why Hooks?
Before Hooks, functional components were limited in their capabilities. They couldn't have their own state or
use lifecycle methods like componentDidMount. This made them less powerful than class components.
Hooks solve this problem by providing a way to use state and lifecycle methods in functional components.
This makes functional components more powerful and flexible.
Rules of Hooks in React :
Rule 1: Only Call Hooks from React Functions Hooks can only be called from React functions, such as
functional components or custom Hooks.
Rule 2: Only Call Hooks at the Top Level Don't call Hooks inside loops, conditions, or nested functions.
Instead, call them at the top level of your React function.
Rule 3: Don't Call Hooks from Regular Functions Don't call Hooks from regular JavaScript functions. Instead,
call them from React functions, such as functional components or custom Hooks.
Types of Hooks
There are several types of Hooks in React, including:
1) State Hooks
• State Hooks allow you to add state to functional components. The most common State Hook
is useState.
• useState
• useState is a Hook that allows you to add state to functional components. It takes an initial value as an
argument and returns an array with the current state value and a function to update it.
2) Effect Hooks
• Effect Hooks allow you to run side effects in functional components. The most common Effect Hook
is useEffect.
• useEffect
• useEffect is a Hook that allows you to run side effects in functional components. It takes a function as
an argument, which is executed after the component has rendered or updated.
3) Context Hooks
• Context Hooks allow you to subscribe to context changes in functional components. The most
common Context Hook is useContext.
• useContext
• useContext is a Hook that allows you to subscribe to context changes in functional components. It
takes a context object as an argument and returns the current value of the context.
4) Ref Hooks
• Ref Hooks allow you to create refs in functional components. The most common Ref Hook is useRef.
• useRef
• useRef is a Hook that allows you to create refs in functional components. It takes an initial value as an
argument and returns a ref object.
5) Callback Hooks
• Callback Hooks allow you to memoize functions in functional components. The most common Callback
Hook is useCallback.
• useCallback
• useCallback is a Hook that allows you to memoize functions in functional components. It takes a
function as an argument and returns a memoized version of the function.
6) Memo Hooks
• Memo Hooks allow you to memoize values in functional components. The most common Memo Hook
is useMemo.
• useMemo
• useMemo is a Hook that allows you to memoize values in functional components. It takes a function
as an argument and returns a memoized value.
7. How to create refs in React?

ANS]

Ip QB (Unit 4)

Uploaded by

Copyright:

Available Formats

Ip QB (Unit 4)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ip QB (Unit 4)

Uploaded by

Copyright:

Available Formats

IP QB UT 2

1. Write any five differences between MVC, Flux and Redux.

• It is a unidirectional data flow model which is easy to understand.

• The flux application is easier to maintain.

• The flux application parts are decoupled.

5. Explain hooks effect with an example.

The useEffect hook takes two arguments:

7. How to create refs in React?

You might also like