FRONTEND BOOTCAMP 4.pptx

FRONTEND BOOTCAMP 4.pptx

• 1.
  FRONTEND BOOTCAMP Session #4
• 2.
  React JS • PerformanceOptimization Hooks • useMemo • useCallback • State Management in React • Local State Management • Global State Management • Redux
• 3.
  Performance Optimization Hooks How tomake your react app efficient
• 4.
  useMemo • The useMemohook 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 useCallbackhook 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 inReact Why do we need it and how it allows us to build interactive client side applications
• 9.
  State Management inReact • 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 • TheContext 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: Actionsare 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 IntegrateRedux 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 tojoin us in the next session!! Thank You!