Cory House @housecor Twitter profile

Pinned Tweet

Cory House

@housecor

3 years

10 lessons I've learned about handling React state over the last 7 years... (thread) #react #reactjs

76

612

2K

Last Seen Profiles

@QueensJahJah

@Algar_ex_pmdc

@NACDS

@BrandiF__

@AngelDust_Daily

@___yk_02

@TomJChicago

@support_acc1

@_DeepPurple

@ll3oxo

@FIELDGENERAL_

@jumpingjogo

@PhilaStringBand

@NMBehm15

@LaurentFavreau

@drstevebagley

@BuffedInPrime

@abdulla_shafeeq

@RedbirdFB

@ighalojude

@Lxnsky

@TKingMode

@ChallengeCup_

@RicardoWeaverr1

@siomilk3

@zxirrl

@dimitripavlenko

@Zakk_Cash

@MayaLevins51911

@ssorangepeal

@boboJam03529521

@CUBuffsFamily

@LC_LadyFalcons

@PaulaMccor90901

@errikorn

@Alligator_Kisss

Cory House

@housecor

3 years

Hey developers, please stop disabling copy/paste in form fields! 🚨 It’s awful UX. It’s confusing. It doesn’t improve security. It breaks password managers. It risks typos on critical info. If asked to do so, push back. Please don’t break the web.

133

2K

7K

Cory House

@housecor

7 months

Just reviewed a web page making 55 fetch calls totaling 570k of JSON. This one page is 1.6 MB. Why 55 calls? Because each database table is exposed as an endpoint. The UI joins all the JSON together via the provided foreign keys. To be clear: Don't do this.

400

408

7K

Cory House

@housecor

2 years

Woah. I just learned that HTML file inputs can access photos, videos, and audio captured directly by the device's camera and microphone like this:

60

949

6K

Cory House

@housecor

2 years

2022 Frontend security in 1 tweet: 1. Use HTTPs 2. Server render 3. Store JWT/token in 'secure', 'samesite', 'httponly' cookie (prevent XSS). 4. Declare content security policy (prevent XSS) 5. Regen cookies when user auths (prevent session fixation) 6. Set short cookie lifetime

80

955

6K

Cory House

@housecor

1 year

Problem: You want to re-throw a JavaScript error to provide a friendlier error. But, you want to keep the original error details too. Solution: Include the original error via `cause`. More: #javascript

73

653

5K

Cory House

@housecor

4 years

As a consultant, I'm seeing an epidemic: Companies are wasting millions by giving developers slow laptops. Today I said "npm install x". My laptop: 10 seconds. 😀 Their laptop: 3+ minutes. 🤯🤦‍♂️ Why? Weak processors, little RAM, platter drives, and slow security scanners.

302

1K

5K

Cory House

@housecor

1 year

Common software dev mistakes are at the extremes: 1. Under-engineering 2. Over-engineering Under-engineering: No CI No reviews Weak types Hard coding Tight coupling Manual deploys Frequent copy/paste Insufficient flexibility No automated checks No validation/error checks 1/2👇

50

683

4K

Cory House

@housecor

3 months

Problem: Your code base probably contains a lot of copy/pasted code, but it's hard to find. Solution: jscpd jscpd is a command line tool that finds copy/pasted code and reports specific duplicated lines. Works for over 150 languages. Example report:

96

508

4K

Cory House

@housecor

2 years

Just learned about the groupBy feature in #javascript . (currently stage 3) This sure looks handy!

82

553

4K

Cory House

@housecor

2 years

Software development estimates are frequently *way* off. Why? Because many aspects of software development are nearly impossible to estimate. Here are 9 reasons software development estimates fail: 👇

139

913

4K

Cory House

@housecor

6 years

I ❤️ Git. But honestly, it intimidated me for years. I thought I needed to understand all its powerful features to be productive. I found that's not the case. You can be quite productive in Git with around 6 commands: branch checkout add commit pull push

159

870

4K

Cory House

@housecor

7 years

After attending many conferences, I've realized: I don't attend to learn. I attend to learn what I need to learn.

49

1K

4K

Cory House

@housecor

1 year

Problem: In React, it's often tricky to hunt down the component that's rendering a piece of UI. Solution: LocatorJS (A Chrome plugin) I've been using it for the last week. It's 🔥.

61

491

4K

Cory House

@housecor

1 year

A unit test shouldn’t: 🚫 Call a DB 🚫 Run a browser 🚫 Make an HTTP call 🚫 Rely on stuff on other machines A unit test should pass without a network connection. There’s nothing wrong with doing such things in a test. But if a test does these things, it’s not a unit test.

105

478

4K

Cory House

@housecor

8 months

Bun 1.0 is here and it’s shockingly compelling. Bun is a lightning fast runtime, build tool, bundler, package manager, and testing tool, all rolled into one. Bun replaces Node, npm, Yarn, pnpm, tsc, Jest, Vite, esbuild, Babel, webpack, and much more.

Bun 1.0

Bun is stable and ready for production.

bun.sh

123

349

3K

Cory House

@housecor

1 year

Problem: You want to send messages between tabs, frames, iframes, or windows. Solution: The Broadcast channel API. More:

61

442

3K

Cory House

@housecor

1 year

I’m a big Cypress fan, so I’m shocked to say this: I just switched to @playwrightweb . Here are 16 reasons I switched: 1. WAY Faster. ~2X faster with 1 core. ~6x faster with multiple cores (uses multiple workers) 2. Tests multiple browsers in parallel. 1/5 Comparison:👇

89

471

3K

Cory House

@housecor

10 months

Things I rarely use: 🚫 Currying 🚫 Middleware 🚫 Inheritance 🚫 Polymorphism 🚫 IoC containers 🚫 The actor model 🚫 Aspect-oriented programming 🚫 Complex design patterns My typical approach: ✅ Write small functions ✅ Try to keep most functions pure ✅ Compose them together…

165

303

3K

Cory House

@housecor

6 years

Career tip: If your boss doesn't see it, you won't get credit for it. Document your work. Present demos. Promote the good stuff. Don't expect your boss to remember a year of work. At review time, provide highlights.

41

1K

3K

Cory House

@housecor

10 months

Company: "We're agile." 5 minutes later... Company: "It's time for quarterly PI planning, so all teams need to agree on what they'll do in the next 3 months."

87

328

3K

Cory House

@housecor

9 months

thanks JavaScript

105

104

3K

Cory House

@housecor

3 years

How to attract and retain great developers: Pay well Use modern tech Offer flexible hours Provide fast laptops Support remote work Treat people with respect Solve meaningful problems You don't need ping pong, game consoles, or beer taps.

55

506

3K

Cory House

@housecor

1 year

Pre-commit hooks are a waste of time. Why? Because they enforce standards too early. Pre-commit hooks make us wait for a quality check on every commit.👎 The code shouldn't need to be "right" to save my changes. The code only needs to be right before merge. Solution? Use CI.

274

244

3K

Cory House

@housecor

5 years

Ever annoyed by the long list of local Git branches that are no longer relevant? Solution: git remote prune origin That removes all local branches that have been deleted from remote (typically GitHub) Add --dry-run to merely see a list first to confirm. #git

25

477

2K

Cory House

@housecor

4 years

"I don't have time to write tests". Do you have time to: 1. Run the app manually after each change 2. Investigate and fix broken builds 3. Investigate and fix QA errors 4. Investigate and fix production errors Add all that up. Writing automated tests *saves* time.

62

692

2K

Cory House

@housecor

1 year

Problem: You’re using TypeScript and you don’t want to manually define types for each REST endpoint response. Solution: quicktype. Paste JSON into quicktype, and it generates a TypeScript type. 🔥 Quicktype supports many other languages too.

59

307

2K

Cory House

@housecor

1 year

Hard truth: Some devs are WAY more productive. As a consultant, I work with dozens of teams. I see massive differences in developer output. Here's an example on the same team: Dev 1: 45 PRs/month Dev 2: 1 PR/month I did code reviews. Dev 1 had higher code quality too.

234

131

2K

Cory House

@housecor

2 years

I often implement React components via 6 files: 1. Button.tsx - component 2. Button.types.ts - TS types 3. Button.test.ts - Jest + testing-library unit tests 4. Button.stories.tsx - Storybook stories 5. Button.module.scss - CSS module 6. index.tsx - Re-exports (barrel) #react

100

249

2K

Cory House

@housecor

2 years

I ❤️ React. But, it’s not perfect. There are features you should avoid. Here’s “React: The Bad Parts” 👇

82

394

2K

Cory House

@housecor

1 year

Problem: Your team is using VS Code, and you want to make it easy for all your developers to use the same extensions. Solution: Create .vscode/extensions.json When developers open the project, they'll get a prompt to install the recommend extensions.

30

234

2K

Cory House

@housecor

2 years

TypeScript tip: Avoid making a property optional when the property isn’t valid in a certain case. Instead, declare 2 separate types, and use Omit to avoid copy/paste. Example: Many objects lack an id until they're saved. So declare a separate "Unsaved" type. #typescript

31

232

2K

Cory House

@housecor

4 years

JSON doesn't support comments. So here's how I comment npm scripts in package.json. 😎 #javascript #npm

96

326

2K

Cory House

@housecor

5 years

Woah, this is elegant JavaScript. Need to conditionally add a property to an object? Here's a slick approach. The right-hand side is only applied if the condition is true. If the condition is falsy, the spread operator does nothing. More: #javascript

71

469

2K

Cory House

@housecor

6 years

🔥 Confirmed: 🔥 1. npm install Node @8 (saves Node 8 as dependency in package.json) 2. Your app will run using Node 8 for *everyone* - even Yarn users! 🎉 No more "Hrmmm, works on my machine. What version do you have installed..." #node

55

913

2K

Cory House

@housecor

1 year

Avoid Sprints. Sprints create an arbitrary deadline every x days. This creates estimation overhead, and fosters short-term thinking. 👎 Instead: 1. Break work down into small tickets. 2. Estimate future flow by tracking the number tickets completed per week. Simple.

145

198

2K

Cory House

@housecor

2 months

57

223

2K

Cory House

@housecor

8 months

An EV is the ultimate mobile office. It’s quiet. I’m playing soft music. The A/C and cooled seat is on. My laptop and phone are charging. My screen is at eye level. It sits nicely on the yoke! My seat is comfortable. My trackpad is on the center console. My keyboard is on my…

223

94

2K

Cory House

@housecor

1 year

10 technologies I use with nearly every React app: 1. TypeScript 2. Zod 3. Playwright 4. Storybook 5. react-query 6. Jest or Vitest 7. Testing Library 8. Mock Service Worker 9. Tailwind 10. Ky

61

184

2K

Cory House

@housecor

1 year

Vercel converted the BBC site to @nextjs . The results: ✅ Removed 20,000+ lines of code ✅ Removed 30+ dependencies (React Router, Express, Babel...) ✅ Average HMR Time improved from 1.3s to 131ms Pretty compelling result. More details:

Migrate a large, open-source React application to Next.js and Vercel – Vercel

Learn how we approached migrating the BBC's large, open-source React application to Next.js and Vercel to see both developer and user experience benefits.

vercel.com

25

215

2K

Cory House

@housecor

4 years

Why I no longer write classes in #Javascript : I don't need them. Instead, I use: 1. Plain objects (data only, no behavior) 2. Pure functions (no side-effects, no outside dependencies) Easy to test. ✅ Easy to understand. 🧠 Easy to compose. 🏘

63

292

2K

Cory House

@housecor

1 year

10 JavaScript/TypeScript features I avoid: ?. ?: as var let any else class enum switch They’re not always a problem. But, they’re overused, and can often be replaced by better alternatives. Here's why I avoid each, and what I do instead... 👇

91

268

2K

Cory House

@housecor

1 year

You don’t need a daily standup. But you do need to communicate often. You don’t need formal retrospectives. But you do need to regularly discuss improvement opportunities. You don’t need sprints. But you do need to break work down and deploy often. You don’t need a sprint…

56

277

2K

Cory House

@housecor

2 years

🚨 Web developers 🚨 <a> and <button> are often misused. They have different purposes. <a> is for navigating <button> is for actions This leads to 2 common mistakes: 1. Using anchors for actions. 2. Using buttons to navigate. 1/4 👇

45

340

2K

Cory House

@housecor

8 months

I’ve used a treadmill under my standing desk for the last 8 years. I love it, and I believe it’s a competitive advantage. Here’s why: 1. 10k steps a day is generally recommended for good health. I easily hit that goal by walking 2 mph for part of the day while I’m working. 2.…

157

114

2K

Cory House

@housecor

10 months

Habit: I often centralize API urls in a single file. Benefits: ✅ I reuse the URLs in fetch calls and mock configs (using tools like @ApiMocking ) ✅ I can see all the URLs the app hits in a single spot, organized by resource, which makes it easy to see what APIs I can call, and…

79

152

2K

Cory House

@housecor

1 year

TypeScript tip: Use “never” to assure every case in a switch is handled. With this example, if a case is missing, TypeScript fails to compile. 👍 #typescript

48

155

2K

Cory House

@housecor

5 years

Common thinking: "I need to add code to justify my job". Yet some devs remove more code than they add. 👍 "In my 3 years at Facebook, I added 391,973 lines and removed 509,793 lines. If I coded 1000 hours a year, that's about 39 net lines removed per hour!" - Jinghao Yan

30

399

2K

Cory House

@housecor

11 months

Problem: When you deploy a new version of your SPA, users with a tab open will keep using the old SPA code. Solution: 1. Specify the app version in each HTTP call from the UI via a x-app-version header. 2. Validate the x-app-version header on the API server. If x-app-version…

93

173

2K

Cory House

@housecor

1 year

Problem: You need to deep clone a JavaScript object. Solution: structuredClone. It clones nearly everything including dates, array, blobs, Error, and much more. And it's supported in all major browsers. 🔥 #javascript

41

243

2K

Cory House

@housecor

6 years

Coding gets less stressful over time. When I started coding and got an error: - I worried I was a bad coder. - I worried I would never find the answer. Now when I get an error: - I'm intrigued. - I know there's an explanation. - I'm confident I methodically figure it out.

32

534

2K

Cory House

@housecor

6 months

Why I don’t do TDD often: TDD commits me to an API before I know what API I want. At first, I’m just iterating. Once I like the API, I add tests.

202

99

2K

Cory House

@housecor

8 months

Avoid disabling from submit buttons. 🚫 Hurts accessibility. The submit button “disappears” for screen readers. 🚫 Hurts usability. The user may not understand why a button is disabled. They may feel stuck. Instead: 1. Allow the user to click the submit button at any time. 2.…

72

220

2K

Cory House

@housecor

1 year

JavaScript tip: You might not need an if statement or a ternary. JS has Nullish coalescing assignment. Example: user.age ??= 'unknown age'; More: #javascript

30

234

2K

Cory House

@housecor

4 months

In TypeScript, I often prefer to use a Record over a switch statement. ✅ It's easy to read. ✅ It's typically less code. ✅ It's safer. With a switch, I have to do extra work to assure it's exhaustive. With a Record, if I forget to handle a case, it won't compile.

68

135

2K

Cory House

@housecor

4 years

Some teams claim they're "too busy" to: 1. Write tests 2. Speed up the build process 3. Configure CI / CD 4. Mock the API 5. Configure linting / autoformatting 6. Do code reviews Yes, these things take time. But, in the long-run, these things *save* time. ⏳

52

444

2K

Cory House

@housecor

7 months

You’d be shocked how complex a web form can be. I’m looking at a simple web form with 5 fields that uses: useState useEffect Redux React Query React Hook Form I’m trying to trace the data flow and my head is spinning.

227

67

2K

Cory House

@housecor

3 years

I'm switching between JavaScript and TypeScript. I've noticed TypeScript has a lower mental load. Here's why: In JS I have to remember object shapes and call signatures. In TS I declare my types once. Then I lean on them. So TS frees up my short-term memory. 👍 #typescript

50

169

2K

Cory House

@housecor

5 years

Despite my long history in C#, I’m still not using TypeScript. Why? I’ve found I don’t spend much time on type-related issues in JS. ¯\_(ツ)_/¯ “JavaScript fatigue is what happens when people use tools they don't need to solve problems they don't have.” - Lucas F Costa

69

337

2K

Cory House

@housecor

1 year

TypeScript tip: Avoid prefixing interfaces with "I". The "I" prefix is a C# convention, but not a TypeScript convention. In TypeScript, prefixing with "I" isn't necessary, and it makes the code clumsier to read and write.

193

160

2K

Cory House

@housecor

2 years

CSS Viewport height is complicated. Summary: lvh: Largest viewport height (when browser UI is hidden) svh: Smallest viewport height (when browser UI is visible) dvh: Dynamically changes when browser UI is shown Image via @argyleink

21

247

2K

Cory House

@housecor

4 months

Problem: You want to know how much of your TypeScript code is type safe. Solution: type-coverage This CLI tool reports the percentage of your code that’s type safe. It reports usage of: 🚩 any 🚩 as assertions (foo as string) 🚩 type assertions (<string>foo) 🚩 Non-null…

29

196

2K

Cory House

@housecor

1 year

5 types of tests: 1. Unit: Test 1 thing, alone 2. Integration: Test a few things, together 3. End-to-end (e2e): Test that everything works together (run the app) 4. Performance: Test that app is fast under load 5. Contract: Test the interaction between 2 separate systems

40

280

2K

Cory House

@housecor

1 year

58

110

1K

Cory House

@housecor

5 months

Problem: JavaScript’s .sort mutates the array. Solution: Use .toSorted instead. It returns a new sorted array.

51

118

1K

Cory House

@housecor

8 months

Problem: You want to easily update outdated npm packages. Solution: Use VS Code's Version Lens extension. It displays a colorful icon next to each package. So it's easy to see outdated packages. Click "bump" to upgrade. I do this every couple months. Super handy.

55

155

1K

Cory House

@housecor

1 year

I've been asked to fix a broken page, inherited from an outside dev team. Heavy use of "any". No tests. I just came across these 2 lines, and I'm scared to move forward. Why did the developer decide to keep only records 550 - 650 from the response?!

115

46

1K

Cory House

@housecor

1 year

I quit my job a few years ago so I could be an independent consultant. The difference in my daily routine is amazing. Before, as a full-time dev: 6am - Wake to alarm 630 - Drive to work 7-4 - At work. Eat breakfast and lunch at desk while working. 430 - Home. Fam time and…

50

52

1K

Cory House

@housecor

5 months

For me, coding in the early 2000’s was terrifying. I had no tests. I had no types. I had no autocomplete. Runtime errors were extremely common. Our team had no source control. Our code was on a shared folder. No backups. When I accidentally closed a saved file with…

120

102

1K

Cory House

@housecor

2 years

useEffect is a last resort. 3 cases where useEffect is overused: 1. To sync with state changes. Derive on each render instead. Memo if needed. 2. To respond to an event. Use an event handler instead. 3. To fetch on load. Use react-query or fetch on the server instead. #react

48

209

1K

Cory House

@housecor

2 years

Problem: The React docs encourage declaring anonymous functions in useEffect. This means the developer's intent isn't documented. 👎 Solution: Call a well-named function inside useEffect. #react

52

147

1K

Cory House

@housecor

1 year

Problem: Feature flags are handy, but it’s easy to forget to remove them later. This leads to needless overhead, complexity, and risk. Solution: Write an automated test that fails if the flag still exists after a given date.

80

128

1K

Cory House

@housecor

7 months

Why do so many React developers do this? When they can do this?

287

83

1K

Cory House

@housecor

7 months

Just audited a codebase with a REST API that returns this: { table1: [] table2: [] main: [] } Don’t couple your API to UI elements.

94

41

1K

Cory House

@housecor

5 years

Here's a simple practice for maintainable code. Separate these three activities: 1. Get data 2. Reformat data 3. Display data Code that separates these concerns tends to be easier to understand, reuse, and maintain.

32

369

1K

Cory House

@housecor

9 months

Problem: You’re building a big feature that will require weeks of work. Mistake: A long-lived feature branch. Solution: Use a feature flag to hide the feature until it’s ready. Now you can merge daily. Principle: Integrate *continuously*.

70

151

1K

Cory House

@housecor

10 months

I thought TypeScript was a waste of time. I thought it was more complexity than it was worth. I thought Microsoft was just trying to make JavaScript feel like C#. I was wrong.

95

88

1K

Cory House

@housecor

2 years

How I learned #TypeScript : 1. I read the docs. 2. @basarat book: 3. @swyx React cheat sheet: 4. @ddprrt blog: 5. Follow @mattpocockuk 6. Use the TS playground while learning from the sources above.

All articles

fettblog.eu

26

255

1K

Cory House

@housecor

1 year

A developer who immediately approves PRs is a liability. Why? Because they eliminate an opportunity for a *real* review. A fake reviewer glances at the PR and quickly approves. A real reviewer reads/runs the code, asks questions, considers alternatives, and makes suggestions.

105

169

1K

Cory House

@housecor

4 months

Problem: In TypeScript, developers often declare needless conditionals. Why needless conditionals are a problem: 🚩 Adds noise 🚩 Hurts readability 🚩 Creates confusion 🚩 Often a sign of a misunderstanding or a logic error Solution: typescript-eslint/no-unnecessary-condition…

43

125

1K

Cory House

@housecor

3 months

Two Related Problems: 1. useEffect is overused. 2. It's often hard to tell a useEffect is needless, because “useEffect” merely tells me *when* some code should run. Solution: Name the function passed to useEffect. ✅Aids review ✅Clarifies intent ✅Helps us catch needless use

53

91

1K

Cory House

@housecor

1 year

Just switched a large project from create-react-app to Vite. With create-react-app: start: 25 sec Hot reload: 2.8 sec With Vite: start: 2 sec 🔥 Hot reload: Instant A solid DX improvement, and simple to convert. If you're using CRA, consider converting! #react

44

103

1K

Cory House

@housecor

1 year

Problem: With react-query, we may declare inconsistent query keys. That leads to cache misses and duplicated cache entries. 👎 Solution: 1. Wrap each useQuery call in a custom hook. Store the hooks in /hooks. 2. Put the fetch call in the custom hook. *Don’t export it*. 3.…

55

126

1K

Cory House

@housecor

3 years

One developer, working alone, can ship as much code as an entire team. No communication overhead. No waiting for approvals. No cross-team blockers. No company meetings. No code reviews. Plus, a solo developer can choose the tools and techniques that make him/her most efficient.

77

189

1K

Cory House

@housecor

2 years

🚨 React developers: 🚨 You don’t have to fetch data via useEffect. Here are 7 compelling alternatives to fetching data via useEffect: 1. react-query 2. swr 3. XState 4. React Router 6.4 5. @remix_run loader 6. @nextjs getServerSideProps/getStaticProps 7. rtk query #react

45

251

1K

Cory House

@housecor

1 year

Problem: You want to reset React state when a component’s props change. Solution: Change the component’s key when the props change. When the key changes, React deletes the old component. It creates a new instance that uses the default state. No useEffect required. 😎

55

129

1K

Cory House

@housecor

1 year

Just learned JavaScript has logical OR assignment and logical AND assignment! 🔥 Logical AND assignment: x &&= "x is truthy" // assigns if the left side is truthy Logical OR assignment: x ||= "x is falsy" // assigns if the left side is falsy #javascript

28

133

1K

Cory House

@housecor

1 year

I just radically simplified a fetch call. Before: 26 lines. After: 6 lines. Here are 8 ways to simplify a fetch function.

40

131

1K

Cory House

@housecor

4 years

Why I code against a mock API: 1 I control the speed 2 It's never down 3 No internet required 4 No cross-team dependency 5 I can force it to throw errors to simulate server errors 6 I can write fast, reliable app tests 7 When I find a bug, I can enhance mock data and test it

39

231

1K

Cory House

@housecor

1 year

Problem: TypeScript errors are typed "unknown". Solution: Throw custom errors. They're easy to inspect. How: 1. Create an ErrorBase class. 2. Create an instance ErrorBase for each feature and specify the feature's potential errors. #typescript

35

155

1K

Cory House

@housecor

8 months

I understand why some teams use plain JavaScript. Perhaps the code is simple and rarely changes. Perhaps the team is small, so types feel like overkill. Perhaps they're not familiar with TypeScript or the benefits of types. But I don't understand why a team already using TS,…

154

60

1K

Cory House

@housecor

1 year

Problem: If an app makes multiple GraphQL calls on the same page, all the GraphQL calls look the same in the network tab. My approach: Click on each call, one by one, to view the payload's query name. This is time-consuming. Anyone have a trick for this?

70

98

1K

Cory House

@housecor

2 months

Habit: If a function accepts two arguments of the same type, I accept an object. This protects from accidentally passing args in the wrong order.

104

76

1K

Cory House

@housecor

1 month

"We don't do code reviews. We trust our developers". You have no idea how often I run a PR and find it's broken. It's *extremely* common. Even from senior devs. We all make mistakes. So I trust no one. Including myself.

110

96

1K

Cory House

@housecor

7 years

A conference speaker's primary impact isn't teaching...It's getting you excited enough to learn more. Conf speaking is sales, for ideas.

15

427

1K

Cory House

@housecor

2 years

Problem: Fetching in useEffect means React components render, then fetch. This can lead to slow network waterfalls. Solution: Fetch as you render. Use react-query's prefetching (prefetch in the parent) or use @remix_run which does this by default via nested routes. #react

23

176

1K

Cory House

@housecor

1 year

I don't write unit tests much anymore. GitHub Copilot writes them for me. 🔥 Here's how: 1. Create a well-named function. 2. Create a test file. 3. Let Copilot create the tests. 4. Any missing? Name the test. Then Copilot writes it. Huge time-saver. 👍

40

106

1K

Cory House

@housecor

3 years

Developer tip: If you're unclear about your task, speak up. Don't worry about asking a "dumb" question. Instead, worry about wasting hours going in the wrong direction. When in doubt, ask.

32

286

1K

Cory House

@housecor

7 months

Problem: When a user clicks a button the response may be slow. Solution: 1. Display a loading indicator 2. Set aria-disabled="true" on the button (avoid disabled since it's unfriendly to screen readers) 3. Ignore additional button clicks while loading is in progress 4. Consider…

39

107

1K

Cory House

@housecor

6 months

How I use React query: 1. Create custom hooks that wrap related useQuery and useMutation calls. 2. Inline queryFn and mutationFn args. This enforces always using React query to query and mutate. 3. Colocate related queries and mutations in the same file, and invalidateQueries…

53

109

1K