Scribd
Upload
13 views27 pages

LECTURE9

Uploaded by

eshaasif005
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
13 views27 pages

LECTURE9

Uploaded by

eshaasif005
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 27

MOBILE APPLICATION

DEVELOPMENT
BY
AATIQA BINT E GHAZALI
FALL 2024
HOOKS
• We have already studied about hooks in react
• We have used a most common hook useState previously
• In this lecture we are going to learn two other hooks
• useEffect() and useContext()
The lifecycle of an Effect

• Every React component goes through the same lifecycle:


• A component mounts when it’s added to the screen.
• A component updates when it receives new props or state, usually in
response to an interaction.
• A component unmounts when it’s removed from the screen.
React class lifecycle methods
• In reference to previous three states of a component react provides
three methods in class based components:
1.componentDidMount()
2.componentDidUpdate()
3.componentWillUnmount()
The useEffect hook
• The useEffect Hook lets you perform life-cycle methods or sideeffects
in function components
• Side effects can include data fetching, subscriptions, or
manually changing the DOM in React components.
• It allows you to perform actions after React has updated
the DOM.
Rules of Hooks

• Hooks are similar to JavaScript functions, but you need to


follow these two rules when using them.
• Hooks rule ensures that all the stateful logic in a
component is visible in its source code.
• These rules are:
1. Only call Hooks at the top level
2. Only call Hooks from React functions :You cannot call Hooks
from regular JavaScript functions. Instead, you can call
Hooks from React function components.
Hooks can also be called from custom Hooks.
useEffect Hook syntax
• useEffect accepts two arguments.
1. A function that contains the code you want to run as the side effect.
2. An optional array of dependencies. These dependencies specify
when the effect should re-run.
If the array is empty, the effect runs only once after the component
mounts.
If the array contains variables, the effect runs whenever any of those
variables change.
Basic syntax
Three cases of passing reactive
dependencies
1. Passing a dependency array
• 2. Passing an empty dependency array
• 3. Passing no dependency array at all
1. useEffect : Passing a dependency
array
• Make a useState counter which will update counter on every button
click
• Now pass the variable count as dependency in the useEffect
2 useEffect : . Passing an empty
dependency array
• when an empty array is passed as a dependency the code inside
useEffect will run only once the application is rendered
3. useEffect : Passing no dependency array at all

• When you don’t pass any argument as a dependency in useEffect() it


will run everytime something is rendered on screen
Class activity
Practice three useCases of useEffect hook
• Now let’s move on towards the second hook for statemanagemnt that
is useContext hook
React Context

• React Context is a way to manage state globally.


• can be used together with the useState Hook to
share the state between deeply nested components
more easily than with useState alone.
The Problem : Example
• To illustrate, we have many nested components. The
component at the top and bottom of the stack need
access to the state.

• To do this without Context, we will need to pass the


state as "props" through each nested component. This
is called "prop drilling".
Example: Passing "props" through nested components:

• Suppose we have three components , <searchBox>


that we used in app.js
• Inside searchBar, we are using another component
button
• Inside button we are using another tag <Text>
• Now suppose I want to pass a value(of usestate) from
parent app.js to<Text>
• How will I do this?
Prop drilling
• We will pass prop to searchBox
• Pass this prop from searchBox to button as another prob
• And then use in Text
• Even though components 2-3 did not need the state,
they had to pass the state along so that it could reach
component 3
• This process become more hectic if I need to pass more
deeper
The solution to prop drilling
• The solution is to manage states globally
• Many ways to do this
• Using redux store
• Or using store
• We will study use context
Create Context

• To create context, you must Import createContext and


initialize it:

• import { useState, createContext } from "react";


• const counterContext = createContext()

• For simplicity make a separate folder and file


Create Context

• Set an initial value for counter context


• And export it
• Import counterContext in app.js
• And wrap full app.js inside
• <counterContext.provider>
• </counterContext.provider>
• Memorize these steps
Pass context
• Inside counterContext component pass the value which you want to
pass deeper as a prop using value keyword
• <counterContext.Provider value={count}>
• ….code
• </counterContext.Provider>
useContext
• Now use this passed value directly anywhere where you want to use it
• Import useContext from react
• const counter=useContext(counterContext)
Another useCase:
• You can also pass setCount as a prop in contextProvider
• Refer to code provided in class for more details
• Practice practice practice

You might also like