Blog
Posts on software development, careers, and craft.
Separating unrelated concerns is helpful
Separating unrelated concerns is helpful. Separating related concerns is unhelpful. Helpful separation: date.js auth.js Dates and auth are unrelate...
One of my clients is using an odd React pattern: They put only JSX in components
One of my clients is using an odd React pattern: They put only JSX in components. All logic is placed in a custom hook with matching name. Example:...
Why use Vite instead of create-react-app
Why use Vite instead of create-react-app? - Faster builds - Faster hot reloads - Plugin ecosystem - Uses modern tooling like esbuild - Actively sup...
How to upgrade old create-react-app app to Vite: 1
How to upgrade old create-react-app app to Vite: 1. Create an empty Vite app. 2. Use that app as a reference. The changes: 1. Add vite.config.ts 2....
Today I helped a team with a 6 year old React app
Today I helped a team with a 6 year old React app. They hadn't updated packages in years! They were on create-react-app and React 16. I switched th...
Problem: React Query keeps a reference to everything that was in scope when...
Problem: React Query keeps a reference to everything that was in scope when the queryFn is created. This may lead to a memory leak. Solution: Creat...
Adding an abstraction may help developers understand a complex app by...
Adding an abstraction may help developers understand a complex app by breaking the problem into small pieces. BUT: Adding too many layers of abstra...
Problem: It’s easy to forget to remove feature flags later
Problem: It’s easy to forget to remove feature flags later. And sometimes it’s hard to remove a flag later because there are many spots to update....
Situation: You want to write automated tests for a REST API
Situation: You want to write automated tests for a REST API. How do you test it? Options: 1. Performance test the endpoints via K6 (so you know it...
25+ ways to handle state in a React app in 2024: React: useState useReducer...
25+ ways to handle state in a React app in 2024: React: useState useReducer useRef useContext (to share useState, useReducer, etc) useOptimistic us...
How do you name an array when the noun doesn't have a plural form
How do you name an array when the noun doesn't have a plural form? Examples: media deer fish Options: 1. Put an "s" on it anyway: "deers" 2. Suffix...
A user doesn’t think about where state is stored
A user doesn’t think about where state is stored. They think “I’m gonna bookmark this” and expect to see the same thing later. They think “I’m gonn...
Scenario: A modal for editing a user
Scenario: A modal for editing a user. Modal URL: ?editUserId=1&openEditUserModal=true Problem: The openEditUserModal param is needless. Solutio...
“Automated tests are like pouring concrete on code.” I disagree
“Automated tests are like pouring concrete on code.” I disagree. Code is malleable. Concrete isn’t. To avoid tests feeling like "pouring concrete o...
I finally switched to Arc browser a week ago
I finally switched to Arc browser a week ago. Wow, it’s fantastic. Spaces are awesome. I often switch between multiple client projects, and persona...
Signs we should split a component: 🚩 The props are complicated and...
Signs we should split a component: 🚩 The props are complicated and confusing 🚩 We need different combinations of props for different use cases 🚩...
TypeScript problem: You need to support any string value, but you’d like...
TypeScript problem: You need to support any string value, but you’d like autocomplete support for common values. Solution: Create a union with "str...
React compiler is experimental, but it's safe to use...
React compiler is experimental, but it's safe to use eslint-plugin-react-compiler with ESLint today. The plugin reports mistakes like: 🚩 Mutating...
Common issue I've seen with teams that use a global state tools like Redux:...
Common issue I've seen with teams that use a global state tools like Redux: Overuse. If global state exists, people try to overuse it. Developers l...
Problem: If you move files via cut and paste, Git “sees” a remove and an add
Problem: If you move files via cut and paste, Git “sees” a remove and an add. This creates merge conflicts and breaks file commit history. Solution...
Problem: I want to use a TypeScript union type, but: The list of options is...
Problem: I want to use a TypeScript union type, but: The list of options is long (dozens, but less than 100) The list is in the DB, and changes occ...
Problem: You want to initialize something only once in a React component
Problem: You want to initialize something only once in a React component. Solution: Call useState without a setter. Idea via @TkDodo
When I feel burned out, I avoid screens
When I feel burned out, I avoid screens. Instead I: Hang out with friends and fam. Read a paper book. Take a walk. Play sports. Take a nap. Exercis...
Quiz: Let’s see how well we understand React Server Components
Quiz: Let’s see how well we understand React Server Components. Here are 12 questions. Question 1: Can a client component render a server component?
Just watched @dan_abramov’s React Conf talk
Just watched @dan_abramov’s React Conf talk. Summary: RSC allows two computers to handle React instead of just one. I really enjoyed his framing. E...
I love that the React ecosystem keeps innovating
I love that the React ecosystem keeps innovating. But you don’t have to use a big, opinionated framework. A plain old client-side rendered React SP...
React's simple idea: Decompose complexity via components
React's simple idea: Decompose complexity via components. Every time I see diffs like this I smile. The code on the left is repetitive. Differences...
Wow, someone built the same site in two ways: 1
Wow, someone built the same site in two ways: 1. Traditional client-side React 2. React Server Components The RSC site: ~3x faster rendering 62% sm...
Just did a short stopover in Iceland on the way to speak in London
Just did a short stopover in Iceland on the way to speak in London. In one day saw geysers, mountains, craters, visible fault lines, and lagoons. S...
"We create a separate hook for every React component to keep the component...
"We create a separate hook for every React component to keep the component file small." If the component is too big, split the component. Don't spl...