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:
React Server Components in 5 Minutes
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...
6 Signs a Dev Team is Out of Control
“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...
Formik vs Plain React for Forms – Worth it?
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
Four Reasons React Renders (and three ways to stop it)
There are four events that cause a React component to render:
- State change
- Prop change
- Parent render
- Context change
When state changes, you can skip the render via:
When props change or a parent renders, you can skip … Read on...
Four Ways to Fetch Data in React
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.
- Inline
- Centralized
- Custom Hook
- react-query/swr
Let’s … Read on...
On Admiring Simplicity
A poorly-designed solution may seem impressive. Why? Because it’s complex and unapproachable. So it looks like it was hard to build.
A well-designed solution may seem unimpressive. Why? Because it’s simple, and approachable. So it looks like it was easy … Read on...
30 Ways to Handle React State
While preparing my upcoming Pluralsight course “Managing React State”, I found a surprising number of React state management options.
This slide from the upcoming course summarizes eight ways to handle state in React apps:
Throughout the course, I build a … Read on...
Yep, JavaScript Moves Fast. Build Your Component Library Anyway.
Here’s a question I’ve heard a few times recently:
“What if we create a component library in React/Vue/Angular/whatever and a new component technology replaces it?”
That’s not a question of if. It’s a question of when. These technologies have become … Read on...
Environment Settings in JavaScript Apps
8 ways to handle environment-specific app settings
Today many web apps are built using React, Angular, Vue, Ember, etc. These modern client-side rendered apps often call web APIs that are hosted on separate servers. This creates a problem: how do … Read on...