I recently created a TypeScript generic utility type that recursively converted `Date` types into Firestore `Timestamp` types

The type was fun to come up w/ cuz I learned a lot but it's also a bit complex. Lemme break down all the TS features line by line...

/thread 🧵👇🏾 `ToFirestore<>` takes a single generic type param, `MaybeDate`. If it is a `Date` type, then the "true" branch of the type conditional returns a `Timestamp` type instead. This base case of the recursive type serves as the crux of the mapping of `Date` ➡️ `Timestamp` type

🧵👇🏾

Something that always comes up when I teach React + TypeScript is "interfaces vs type aliases" for props & other object type definitions

95%+* of the time they're interchangeable. But let's look at practical cases where we might favor one over the other 👀

/thread 🧵👇🏾 First the similarities. Both interfaces & type aliases can...

✅ Define an object type (duh!)
✅ Merge/extend either interfaces or type aliases
✅ Use generic types

🧵👇🏾

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!

🧵👇🏾

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 .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 👇🏾🧵

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

🧵👇🏾

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

🧵👇🏾

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

🧵👇🏾

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

🧵👇🏾

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...

🧵👇🏾

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 🧵👇🏾 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

🧵👇🏾

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 🤓