Ben Ilegbodu πŸ€πŸ‘¨πŸΎβ€πŸ’» Profile picture
#Christ follower, husband, father of 3️⃣. Tweetin' on #React #TypeScript #DivOps @NBA. 🌍 Speaker @GoogleDevExpert @MVPAward. Principal FE Eng @stitchfix
13 Oct
What are some situations for when we can use the `useCallback()` & `useMemo()` Hooks in React components?

Well, one case where we need `useCallback()` is when we call a helper function w/in `useEffect()`, so we need "referential equality" to include it in deps

/thread πŸ§΅πŸ‘‡πŸΎ
I also use `useCallback()` by default when returning a function from a custom Hook cuz I dunno how that function will be used w/in host components

`useCallback()` gives a stable function reference similar to the updater func from `useState()` (the 2nd array element)

πŸ§΅πŸ‘‡πŸΎ
The `useMemo()` Hook is similar to `useCallback()` except that it memoizes any value not just functions

So I use `useMemo()` in the same situations: when I have a derived object/array that's used in the deps of `useEffect()`

(I like to think of "memoization" as a cache)

πŸ§΅πŸ‘‡πŸΎ
Read 8 tweets
22 Jul
The .reduce() method is maybe the most powerful, yet least understood array method. It basically allows us to transform an array into... nearly anything else

Let's re-implement 1️⃣0️⃣ lodash functions to learn more about how for examples on how .reduce works

/thread πŸ‘‡πŸΎπŸ§΅
1️⃣ sum()

ℹ️ Computes the sum of the values in an array

The function is called a "reducer" & the 2nd param is our initial value

The 1st arg of the reducer is the "accumulator" (the value we're building up). The 2nd is the current array element in the iteration

/thread πŸ‘‡πŸΎπŸ§΅
2️⃣ countBy()

ℹ️ Creates an object w/ keys that are the array elements and values that are their counts

Here we're turning an array into an object

(can't forget to return the object we're accumulating!)

/thread πŸ‘‡πŸΎπŸ§΅
Read 13 tweets
19 May
Nope JSX doesn't have a built-in loop construct. Instead it offloads looping to JavaScript & just accepts an array of JSX elements for rendering lists

πŸ’‘ So in React, to loop we gotta convert an array of data ➑️ array of JSX elements

Let's look at some ways how...

/thread πŸ§΅πŸ‘‡πŸΎ
Calling `.map` on the array is the most popular way to generate that array of JSX elements

And cuz `.map` returns a new array we can inline it directly in the JSX w/o using a var (also very common)

Putting the `.map` inline makes it *feel* like traditional loop templates

πŸ§΅πŸ‘‡πŸΎ
Using a regular `for` loop (or `for-of`, `.forEach`, etc) requires a var that we gotta `.push` into

`for` is likely more familiar to JS newcomers but it means we cannot inline the code

...unless we wanna go rogue and put it in an IIFE 🀯 (anyone used one here before???)

πŸ§΅πŸ‘‡πŸΎ
Read 7 tweets
23 Mar
Here is a quick React custom Hook that supports copying text to the system clipboard. It also returns a copied/failed status that can be reflected in the UI

(I remember the days when we could only do this w/ Flash 😭)

more details in the thread πŸ§΅πŸ‘‡πŸΎ
useCopyToClipboard returns a copy function that the UI calls when the user wants to copy the text (likely a button click). It updates the status based on the success/failure of writing to the clipboard

It uses useCallback to ensure a stable function reference

πŸ§΅πŸ‘‡πŸΎ
It also uses useEffect to set a timeout that will reset the status after a specified amount of time. This basically makes the status fleeting, which is a typical user experience

πŸ§΅πŸ‘‡πŸΎ
Read 6 tweets
26 Jan
Have y'all gotten that React warning about state updates after component unmount?

I get it mainly when running unit tests

Happens when:
- Make async request
- Component unmounts
- Response comes back
- Try to update state w/ new data

I've come up w/ 4️⃣ solutions

/thread πŸ§΅πŸ‘‡πŸΎ
Since vanilla JS Promises aren't cancellable the next best thing is to keep track of the mounted state & don't update state if the comp is unmounted

1️⃣ Variable to track mounted state

Quick & dirty, but only works in single useEffect w/ no deps

πŸ§΅πŸ‘‡πŸΎ
2️⃣ Ref to track mounted state

All effects can check the ref regardless of if they have deps. Will have to duplicate in multiple components tho

πŸ§΅πŸ‘‡πŸΎ
Read 8 tweets
14 Jan
If you're getting started with React in TypeScript one of the first things you'll wanna do is migrate from runtime prop-types over to static TS types

Typing a function component is the same as any function in TS

Typically props are typed with a TS `interface`

/thread πŸ§΅πŸ‘‡πŸΎ
The primitive prop types map over to their TS equivalents...

πŸ§΅πŸ‘‡πŸΎ
Special types like React nodes, enums, class instances, and others...

πŸ§΅πŸ‘‡πŸΎ
Read 7 tweets
5 Jan
Using objects/arrays in deps for React useEffect can cause it to run the effect on *every* re-render even if contents are the same cuz the references are different

We've got a couple of options...

1️⃣ Depend on the obj properties instead of the entire obj

/thread πŸ§΅πŸ‘‡πŸΎ ImageImage
2️⃣ Duplicate the object within the effect when the *entire* object is needed. useEffect then depends on the pieces needed to create the object

In general creating object literals is cheap so the perf wins from optimized useEffect should outweigh the duplication

πŸ§΅πŸ‘‡πŸΎ Image
3️⃣ Memoize/cache the object w/ useMemo Hook if creating the object is too expensive to do it twice. The obj is now safe to use in deps

This is suggested by the `react-hooks/exhaustive-deps` ESLint rule (part of `eslint-plugin-react-hooks` which you should totally be using)

πŸ§΅πŸ‘‡πŸΎ Image
Read 6 tweets
15 Dec 20
I used to tell folks learning React to learn JS really well first. I had good intentions but was still gate-keeping πŸ˜”

But I do think knowing modern JS can really level-up your React skills and I've got top 10 features I think will help you be more awesome-r πŸ”₯πŸ”₯

[🧡 thread]
1. ES Modules

I see lots of confusion about when to use named vs default imports. The import style depends on how it was exported (named or default)

Named imports go within the curly braces & the single default import is outside of them πŸ€“ ImageImage
2. Arrow functions

Arrow functions can exist everywhere within your React app. Some folks (like myself) replace all functions with arrows while others only use them in spots

They really win w/ character savings but for those unfamiliar w/ the syntax they can lose w/ clarity 🧐 ImageImage
Read 12 tweets