Frontend Bootcamp Session 4 React.js

1. FRONTEND BOOTCAMP
Session #4

2. React JS
• Performance Optimization Hooks
• useMemo
• useCallback
• State Management in React
• Local State Management
• Global State Management
• Redux

3. Performance Optimization
Hooks
How to make your react app efficient

4. useMemo
• The useMemo hook is a built-in hook in React that allows you to
optimize the performance of your components by memoizing the
result of a computation and only recomputing it when its
dependencies change.
const memoizedValue = useMemo(() => {
// computation or calculation
}, [dependency1, dependency2]);

5. When To useMemo??
• Derived data: When you need to compute a derived value from other
values or props, such as filtering or sorting an array of data.
• Expensive calculations: When you need to perform complex
calculations or operations that are resource-intensive, such as heavy
computations or data processing.
• Avoiding unnecessary renders: When you want to prevent unnecessary
renders of a component by memoizing a value that is used as a prop or
state in child components, ensuring that they only re-render when the
memoized value changes.

6. useCallback
• The useCallback hook is a built-in hook in React that allows you to optimize
the performance of your components by memoizing a callback function and
only recreating it when its dependencies change.
• It is often used to prevent unnecessary re-renders of child components that
receive callback functions as props.
const memoizedCallback = useCallback(() => {
// callback function
}, [dependency1, dependency2] );

7. When To useCallback??
• Callbacks in event handlers: When passing callback functions to event
handlers, such as onClick or onChange events, to prevent unnecessary re-
renders of components that use these callbacks.
• Memoized props: When passing callback functions as props to child
components, to ensure that the child components receive the same callback
function instance and prevent unnecessary re-renders.

8. State Management in React
Why do we need it and how it allows us to build
interactive client side applications

9. State Management in React
• In React, state management refers to how data is stored,
accessed, and updated in a React application
• Two methodologies for state management
• Local State Management
• Global State Management

10. Local State Management
• Local state management in React involves storing and managing data
within a single component.
• It allows a component to have its own private state that can be used
to store and manage component-specific data.
• The useState hook is the most common way for local state
management, allowing you to declare a state variable and its initial
value within a functional component.
const [count, setCount] = useState(0)

11. Local State Management
• Problem with Local State Management??
• Prop Drilling:
• In Nested usecases, when a state is consumed
in a lower component in hierarchy, middle
components only pass the state forward as
props making it unmaintainable.
• This also makes the updation of state by the
lower component in hierarchy more tedious as
a callback function has also to be passed
forward if the state is to be updated

12. Global State Management
• Global state management in React involves managing and sharing data
across multiple components within an application.
• It allows components to access and update a shared state, eliminating the
need for prop drilling
• Methodologies for Global State Management
• Context Api (Built in feature of react)
• Third Party Libraries(Redux, MobX, Recoil, Zustand etc)

13. Context Api
• The Context API is a built-in feature of React that allows you to share
state across components without passing props through all levels of
nested components
• It provides a way to create a global state that can be accessed by any
component within the context tree.
• Components can access the context using createContext and useContext
hook, and the state can be updated using the setState function provided by
the context

14. Context Api

15. Global State Management
• Problem With Context Api??
• Performance issues due to unnecessary rerenders
• Solution is Redux
• The key concepts in Redux are:
• Store: The store is a single source of truth that holds the global state of the
application. It is an immutable object and it cannot be directly modified.
Components can access the store to read the state and dispatch actions to update
the state.

16. Redux
• Actions: Actions are plain JavaScript objects that represent a change or an event in
the application. They carry data, typically in the form of a payload. Actions are
dispatched by components to trigger state updates.
• Reducers: Reducers are pure functions that take the current state and an action as
input and produce a new state as output

17. Steps to Integrate Redux In your Application
1.Create The Store, Registers all Reducers defined elsewhere in the code.
2.Declare Provider To make this store accessible in the entire
app(Component Tree).
3.Create A Slice which should have a unique name, an initial state, and
reducer functions.
Reducer functions??
Take the previous state and action payload, to define the logic required to
change the state

18. Make sure to join us in the next session!!
Thank You!