Tweet

More from @benmvp

Ben Ilegbodu 🏀👨🏾‍💻

@benmvp

28 Oct

TypeScript's type system is very powerful because it allows us to express types in terms of other types, including generics

I was looking at the implementation of the TS utilities & learned lots about how to implement generics, so I wanted to share my learnings

/thread 🧵👇🏾

1️⃣ Basic generics

Generic types are like implicit return funcs. They take 1+ params & return a new type

`Partial<>`, `Required<>` & `Readonly<>` take any obj type & return a new obj type w/ property modifiers

We can use them as an example for our own `Mutable<>` util!

🧵👇🏾

2️⃣ Generic constraints

Using `extends` we can restrict what types of params are allowed. It's kinda like providing types of our generic params

`Record<>` limits the `Keys` param to only `string`, `number` or `symbol` cuz JS objects only allow those types as keys

🧵👇🏾

Read 9 tweets

Ben Ilegbodu 🏀👨🏾‍💻

@benmvp

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

Ben Ilegbodu 🏀👨🏾‍💻

@benmvp

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

Ben Ilegbodu 🏀👨🏾‍💻

@benmvp

1 Jun

React component patterns help us create reusable and extendable components that provide some inversion of control to their parent

Here's a thread of 5️⃣ such patterns

But first let's start with a vanilla <Button> component with "normal" props & how it's used

/thread 🧵👇🏾

1️⃣ Placeholder props

The placeholder props pattern allows the shared component to control its layout & any logic, but give some control to the parent for the display

For our Button comp, the `startIcon` & `endIcon` props can be <svg>, <img> or even other React components

🧵👇🏾

2️⃣ Polymorphic components

The polymorphic component pattern comes in handy when we need flexibility on the rendered element

For semantic HTML or a11y reasons we may need to change the root element. We can even pass another component for the `as` prop (react-router <Link>)

🧵👇🏾

Read 8 tweets

Ben Ilegbodu 🏀👨🏾‍💻

@benmvp

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

Ben Ilegbodu 🏀👨🏾‍💻

@benmvp

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

Share this page!

Ben Ilegbodu 🏀👨🏾‍💻

Try unrolling a thread yourself!

More from @benmvp

Ben Ilegbodu 🏀👨🏾‍💻

Ben Ilegbodu 🏀👨🏾‍💻

Ben Ilegbodu 🏀👨🏾‍💻

Ben Ilegbodu 🏀👨🏾‍💻

Ben Ilegbodu 🏀👨🏾‍💻

Ben Ilegbodu 🏀👨🏾‍💻

Did Thread Reader help you today?

Like this author's thread?