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...
Designing Reusable React Components
What Legos Can Teach Us About Reuse in React Apps
React is a component library. So React makes it easy to break your UI down into composable pieces. The question is, how granular should the pieces be?
Let’s consider a … Read on...
React Pattern: Centralized PropTypes
Avoid repeating yourself by centralizing PropTypes
There are three popular ways to handle types in React: PropTypes, TypeScript and Flow. This post is about PropTypes, which are currently the most popular.
Since PropTypes provide type warnings at runtime, it’s helpful … Read on...
Reusable Web Application Strategies
Imagine your team just deployed an amazing todo list app. A month later, another team in your company wants to run your todo app within their invoice app.
So now you need to run your todo app in two spots:… Read on...