Cory House

React 19 has many new form-related features:

• Server actions – Call async functions that run on the server in a client component
• useActionState – Update state based on a form action
• useFormStatus – Get a form’s status
• useOptimistic – Optimistically

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.

Simple.

Breaking tickets down is naturally … Read on...

1. Creative freedom.

Product managers and designers specify *what* I should build. But, I get to decide *how* to build it. I choose my patterns, libraries, technical approach, workflow, and more. There are infinite ways to solve a given problem. … Read on...

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 … Read on...

Testing Library is great. But it’s lacking a few queries I would find useful.

Here’s an example of enhancing Cypress Testing Library with a plain function:

I’m excited about React Server Components. In this post, I will summarize the benefits and limitations in a few quick points.

For more details, check out the Facebook team’s announcement video.

The Big Idea

Render React components in one … Read on...

“We don’t have time to write tests.”
“We don’t have time for code reviews.”
“We don’t have time to set up a CI server.”
“We don’t have time to automate deploys.”
“We don’t have time to make it accessible.”
“We … Read on...

I typically use plain React for forms. But I just converted a React form to use Formik.

Results (sizes minified):

• Plain React: 130 lines of code, 46K
• Formik: 105 lines of code, 58K
• Formik + Yup (validation): 104

There are four events that cause a React component to render:

1. State change
2. Prop change
3. Parent render
4. Context change

When state changes, you can skip the render via:

1. shouldComponentUpdate
2. React.memo

When props change or a parent renders, you can skip … Read on...

React is a focused component library. So it has no opinion on how to request remote data. If you’re requesting and sending data to web APIs via HTTP, here are four options to consider.

1. Inline
2. Centralized
3. Custom Hook
4. react-query/swr

Let’s … Read on...