Scribd
Upload
14 views19 pages

UseEffect Overusing

The document discusses the common misuse of the useEffect hook in React, emphasizing that it should only be used for genuine side effects like data fetching and event subscriptions. It advises against using useEffect for setting local state or deriving state from props, suggesting that developers rethink their component design instead. The key takeaway is to use useEffect sparingly and only when necessary, following a guideline to consider if the logic would still be needed in a server-rendered context.

Uploaded by

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

UseEffect Overusing

The document discusses the common misuse of the useEffect hook in React, emphasizing that it should only be used for genuine side effects like data fetching and event subscriptions. It advises against using useEffect for setting local state or deriving state from props, suggesting that developers rethink their component design instead. The key takeaway is to use useEffect sparingly and only when necessary, following a guideline to consider if the logic would still be needed in a server-rendered context.

Uploaded by

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

STOP

OVERUSING
USEEFFECT IN
REACT
MADHAV KABRA
WHAT'S WRONG?
This doesn’t belong in useEffect.

useEffect is often misused for things that don’t need side effects.

MADHAV KABRA
WHEN YOU NEED

Fetching data

Subscribing to events

Manually interacting with the DOM

MADHAV KABRA
WHAT IT’S NOT
FOR
Setting local state
Deriving state from props
Running on mount when you
don’t need to

MADHAV KABRA
COMMON MISTAKE #1
Updating state on mount:

Instead:

MADHAV KABRA
COMMON MISTAKE #2
Deriving state from props:

Unnecessary duplication!

MADHAV KABRA
@REALLYGREATSITE

USE DERIVED VALUES


Instead of syncing manually:

No need to sync with state or use


useEffect.

MADHAV KABRA
REACT ALREADY
REACTS
React rerenders when props/state
change.

You don’t need useEffect to handle


every update.

MADHAV KABRA
DATA FETCHING
Good use case:

This is a real side effect.

MADHAV KABRA
EVENT LISTENERS

Needs cleanup — perfect for


useEffect.

MADHAV KABRA
@REALLYGREATSITE

TIMEOUTS AND
INTERVALS

Also a valid use case!

MADHAV KABRA
AVOIDING RERENDER
LOOPS

Oops, loop forever!

MADHAV KABRA
THE DERIVED
STATE TRAP

Instead:

MADHAV KABRA
RETHINK DATA FLOW
Often,
useEffect is compensating
for a bad component
design.
Fix the data flow instead of
syncing it.

MADHAV KABRA
USEMEMO OR
DERIVED VALUES
Want to compute once?

Not useEffect.

MADHAV KABRA
FORM STATE
EXAMPLE Bad:

Good:

MADHAV KABRA
SIDE EFFECTS SHOULD
BE SIDE EFFECTS
If you’re not triggering a
browser API, network
request, or external system —
Don’t use useEffect.

Your New Rule of Thumb

Ask:
Would this logic still be needed
if this were a server-rendered
component?”
If not — don’t put it in useEffect.

MADHAV KABRA
FINAL THOUGHTS

Use useEffect for real side


effects
Avoid state syncing
Think in React — derive,
don’t duplicate

MADHAV KABRA
LIKE
SHARE
FLLOW
MADHAV KABRA
For More

You might also like