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
Tag Archives: React
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...
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...
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.
… Read on...📊 For enforcing types in React, I typically use…
React Binding Patterns: 5 Approaches for Handling `this`
JavaScript’s this keyword behavior has confused developers for ages.
There are at least five ways to handle the this context in React. Let’s consider the merits of each approach.
1. Use React.createClass
If you use React.createClass, React autobinds all … Read on...
React and Redux in ES6 – Live!
After over 6 months of preparation, research, writing, and recording, “Building Applications in React and Redux in ES6” just published on Pluralsight! This isn’t merely an introduction to Redux. This is a comprehensive exploration of building a real … Read on...
Angular 2 versus React
Angular 2 has reached Beta and appears poised to become the hot new framework of 2016. It’s time for a showdown. Let’s see how it stacks up against 2015’s darling: React.
Disclaimer: I enjoyed working in Angular 1 but switched … Read on...
React’s JSX: The Other Side of the Coin
When React was released, many people took one look at JSX and lost their minds. What are these angle brackets doing in JavaScript?! What about separation of concerns? Has Facebook learned nothing from the community?
… Read on...Facebook: Rethink established best practices™