Dan Profile picture
Aug 29, 2020 β€’ 11 tweets β€’ 5 min read β€’ Read on X
React Hooks are amazing β†’ but if you're not careful, **performance** can spiral out of control.

Here are the fundamentals for optimum performance. #reactjs #javascript #es6

A thread πŸ‘‡
State, 1/3)

Avoid using multiple setState's for combined data models, especially in async functions as they re-render per setState. Image
State, 2/3)

Instead, combine into a single setState for simple state logic. Image
State, 3/3)

Or, useReducer for complex state logic to ensure consistent behaviour. Image
Memorization, 1/5)

Re-rendering of parents causes children to re-render if they have props (even if those props don't change the dom). Image
Memorization, 2/5)

Use React.memo to render the component and memoize the result, preventing unnecessary re-renders.

Before the next render, if new props are the same, React reuses the memoized result & skips the next render. Image
Side note, it's not always applicable or necessary to memorize components.

Check out this image via @panzerdp for heuristics on when to memorize. Image
@panzerdp Memorization, 3/5)

However, React only performs a shallow comparison for prop changes in memorized components.

Which means, object props & functions props (that don't change) still cause unnecessary re-renders. Image
@panzerdp Memorization, 4/5)

Do not fear, to prevent unnecessary re-renders:

useMemo β†’ to memorize objects and/or values which require expensive computation.

useCallback β†’ to memorize functions. Image
@panzerdp Memorization, 5/5)

Finally, use dependencies to ensure that changes are only allowed if one of the dependencies has changed.

Below, I have a function which depends on "value". If value changes, the function updates, which rightly, causes a re-render. Image
@panzerdp End)

In this thread, we covered useState, useReducer, memo, useMemo & useCallback for better React performance.

For reference, all the code shown in the images can be found here:

jsfiddle.net/ankleio/n0ozv6…

β€’ β€’ β€’

Missing some Tweet in this thread? You can try to force a refresh
γ€€

Keep Current with Dan

Dan Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @ankleio

Sep 29, 2020
I spent the last two weeks tracking & analyzing 13,159 Hacker News posts.

Here's what I learned.

Thread πŸ‘‡ Image
1) But first, why?

Because HN is an incredible source of traffic. I wanted to learn:

βœ… What's the best day to post?
βœ… What's the best time to post?
βœ… How many upvotes do you need & in how much time?
βœ… Does karma matter?
2) How?

I built a NodeJS script that polled Hacker News every 2 min, saving posts, users & votes in a Postgres database.

This is a unique approach because I am tracking votes and position in realtime, compared to analyzing large datasets after the fact (without this info).
Read 13 tweets
Sep 6, 2020
My weekend side of a side project πŸ‘‡

Earlier this week, I asked Twitter to help with ideas for a domain I purchased ($145)

πŸ‘‰ popout.io

Shout out to these lovely people for ideas/help

@safaorhanEN
@poppacalypse
@CadenSumner
@kwongyuli
@felix12777

A thread πŸ‘‡
@safaorhanEN @poppacalypse @CadenSumner @kwongyuli @felix12777 πŸ’‘ Idea

In the end, I thought @CadenSumner's idea of a "pop-out window for anything" was most appropriate πŸ‘‡

@safaorhanEN @poppacalypse @CadenSumner @kwongyuli @felix12777 🏎 USP

There's already an abundance of picture-in-picture apps but they are only for floating video players.

The USP is to create a floating app for ANYTHING on the web. Including:

πŸ‘‰ Documentation while you code
πŸ‘‰ Email, notes & references
πŸ‘‰ Media, videos, e-books & more
Read 13 tweets
Aug 30, 2020
I spent the last week compiling a list of 5,178 indie hacker profiles & Twitter accounts.

I then filtered the data in separate lists on Twitter based on followers, products & recent activity.

A thread πŸ‘‡
1) Motivation

I'm very new to Twitter (August 2020). I try and provide value in my tweets, but still, Twitter is an incredibly lonely place when you're just getting started

(I currently only have 50 followers).
2 ) Motivation

I noticed my engagement increased when I engaged with similar people of a similar follower count.

Therefore, I set about making a list of people to interact with regularly.
Read 13 tweets
Aug 26, 2020
I'm starting a project & need ideas.

It's recap time.

"How To Get Startup Ideas" by @paulg in 7 diagrams + 3 bonus diagrams.

A thread πŸ‘‡ πŸ‘‡ πŸ‘‡
@paulg 1) Build for the few, who want a lot

Almost all successful startups started this way.

Start narrow/niche by optimizing for depth.

Ask yourself, who wants this right now, even as a crappy prototype? Image
@paulg 2) Live in the future, build what’s missing

Narrow/niche startups often can't foresee the path to expansion. So how can you predict which ideas are good?

πŸ‘‰ Be at the leading edge of a field that's changing fast, pushing it forward or as a user

πŸ‘‰ Build what's missing Image
Read 12 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

:(