Scribd
Upload
10 views

Slides

Uploaded by

fawadkhantemp
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

Slides

Uploaded by

fawadkhantemp
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

What is an “Effect” (or a “Side Effect”)?

Main Job: Render UI & React to User Input Side Effects: Anything Else

Evaluate & Render JSX


Store Data in Browser Storage
Manage State & Props
Send Http Requests to Backend Servers
React to (User) Events & Input
Set & Manage Timers
Re-evaluate Component upon State &
…
Prop Changes

These tasks must happen outside of the


This all is “baked into” React via the “tools”
normal component evaluation and render
and features covered in this course (i.e.
cycle – especially since they might block/
useState() Hook, Props etc).
delay rendering (e.g. Http requests)
Handling Side Effects with the useEffect() Hook

useEffect(() => { … }, [ dependencies ]);

A function that should be


executed AFTER every Dependencies of this effect –
component evaluation IF the the function only runs if the
specified dependencies dependencies changed
changed

Your side effect code goes into Specify your dependencies of


this function. your function here
Introducing useReducer() for State Management

Sometimes, you have more complex state – for example if it got multiple
states, multiple ways of changing it or dependencies to other states

useState() then often becomes hard or error-prone to use – it’s easy to


write bad, inefficient or buggy code in such scenarios

useReducer() can be used as a replacement for useState() if you need


“more powerful state management”
Understanding useReducer()

const [state, dispatchFn] = useReducer(reducerFn, initialState, initFn);

A function that can The initial state


The state snapshot
be used to
used in the
dispatch a new
component re-
action (i.e. trigger
render/ re- A function to set
an update of the
evaluation cycle the initial state
state)
programmatically

(prevState, action) => newState

A function that is triggered automatically once an action is


dispatched (via dispatchFn()) – it receives the latest state
snapshot and should return the new, updated state.
useState() vs useReducer()

Generally, you’ll know when you need useReducer() (è when using useState()
becomes cumbersome or you’re getting a lot of bugs/ unintended behaviors)

useState() useReducer()

The main state management “tool” Great if you need “more power”

Should be considered if you have related


Great for independent pieces of state/ data
pieces of state/ data

Great if state updates are easy and limited to Can be helpful if you have more complex
a few kinds of updates state updates
Component Trees & Component Dependencies
Instead: Use
Props & Functions
passed via Props <App />

<Auth /> <Shop /> <Cart />

<LoginForm /> <Products />

Login

<Product />
Add to Cart
There is no direct There is no direct
connection connection
Context to the Rescue!
Component-wide, “behind-the-scenes” State Storage
<App />

<Auth /> <Shop /> <Cart />

<LoginForm /> <Products />

Login

<Product />
Add to Cart
There is no direct There is no direct
connection connection
Context Limitations

React Context is NOT optimized for high frequency changes!

We’ll explore a better tool for that, later

React Context also shouldn’t be used to replace ALL component


communications and props

Component should still be configurable via props and


short “prop chains” might not need any replacement
Rules of Hooks

Only call React Hooks in React Only call React Hooks at the Top
Functions Level

React Don’t call them Don’t call them


Custom Hooks
Component in nested in any block
(covered later!)
Functions functions statements

+ extra, unofficial Rule for useEffect(): ALWAYS add everything you refer to
inside of useEffect() as a dependency!

You might also like