React is here to stay. It solves many problems you may not even know existed. These essays are the good stuff I learned over the years.
Learning from tutorials is easy. You follow some steps, learn a smol lesson, and feel like you got dis 💪
Then comes the interview, a real world problem, or a question from the boss. Your mind goes blank. Shit, how does this work again ...
Happens to everyone. Building is harder than recognizing and the real world is a mess! Nothing fits in neat little boxes you learned about in tutorials.
That's where my emails come in – lessons from experience. Building production software :)
Leave your email and get the React email Series - a series of curated essays on building with React. Borne from experience, seasoned with over 12+ years of hands-on practice building the engineering side of growing SaaS companies.
Get Curated React Essays
Get a series of curated essays on React. Lessons and insights from building software for production. No bullshit.
Latest React articles from Swizec
Building browser extensions with NextJS
NextJS can be used to build browser extensions. This is a novel way of building extensions that allows developers to use familiar tools and technologies. Here's how
February 8th, 2023
My biggest React App performance boost was a backend change
Performance lives in the unlikliest of places. Follow the metrics.
January 31st, 2023
Async React with NextJS 13
We look at React's native async support and how to use it in a NextJS 13 app. Learn how to use async components, parallel loading states, and caching with React.js and NextJS 13.
January 14th, 2023
Reader question: useReducer or XState?
Following up from my article about XState and Stately.ai, fellow reader S. asked if `useReducer` could ever be relevant when using state machines in React code. Yes! Here's how
November 11th, 2022
When your brain is breaking, try Stately.ai
Two years ago I wrote about using XState after building a UI interaction so twisted my brain leaked out my ears. It helped. Now the creators have made something even better – Stately.ai 😍
November 8th, 2022
useCallback is a code smell
One of my favorite ways to simplify and de-gotcha React code is to rip out all the useCallback and useMemo drama. 90% of the time you don't need it.
September 16th, 2022
Learnings about the future of the web from Reactathon
The first in-person conference in years! It was wonderful 🤩 - Remix is great - Serverless at edge is the future - GDPR does not play with 👆
May 7th, 2022
Adding categories to a Gatsby blog (for better SEO)
One of my biggest frustrations since migrating swizec.com from Wordpress to Gatsby was that I never added categories. Always wanted to, never did. Thought it would be super hard. Gatsby made it painless
March 29th, 2022
A new VSCode extension makes state machines shine on a team
When you grok state machines, a new world of computational beauty and software design opens in front of your eyes. Things that used to be hard become easy. The impossible becomes possible. And you turn into that annoying team member.
February 25th, 2022
How to add Typeform as a Gatsby source
Every year I ask readers if they're enjoying my newsletter. Then fail to use those responses 😅 This year I said heck it and built a /testimonials page that shows everyone's feedback raw from Typeform. Here's how.
January 25th, 2022
You can use React Query for slow computation, not just API
You can use the ergonomics of React Query for any slow operation and it's wonderful.
November 8th, 2021
Why I'm excited about React 18 – talk
React 18 is coming soon. I hope 🤞 Here's a talk I gave exploring its implications and showing off demos with working code.
November 1st, 2021
Build simple backends with Gatsby Serverless Functions
Until recently adding a little backend to your Gatsby site meant 2 options:
1. Climbing the AWS learning curve 2. Rewrite with NextJS
Now there's an /api directory 😱
August 24th, 2021
React 18 and the future of async data
Friend, I have glimpsed the future and it is amazing. React 18 is shipping with <Suspense> and startTransition for deferred component rendering, but not data loading. That's coming in a future 18.x version.
July 22nd, 2021
Hacking the React AST for fun and profit – #CodeWithSwiz ep34
This is hold my beer level of hackery. It didn't work but we learned lots in the process.
June 29th, 2021
A better React 18 startTransition demo
Demoing startTransition is hard. Modern computers are too fast 😅 – Dan Abramov, a React core team member, helped me fix it up. Here's what I learned
June 16th, 2021
Trying out React 18 Alpha
I read everything about React 18 Alpha, trawled through the work group, and ran some experiments. Here's what you'll wanna know.
June 11th, 2021
A fun security bug with static rendering – CodeWithSwiz #31
The flash of unlocked content is great fun for any paywall
June 1st, 2021
Build privacy-focused blazing fast tweet embeds – CodeWithSwiz 30
Twitter embeds every tweet on your page as an iframe. Loads 1.2MB of JavaScript, makes 20+ HTTP requests and uses 100+ DOM nodes. 💩
May 12th, 2021
Twitter embeds without JavaScript, pt1 – #CodeWithSwiz 29
Continuing our quest for better Lighthouse scores, more reader privacy, and less JavaScript we attacked the next biggest culprit 👉 Twitter.
May 4th, 2021
2 quick tips for 250% better Lighthouse scores – CodeWithSwiz 28
Your site may be fast for users, but Google don't care. Official metrics or bust.
April 27th, 2021
Variants – a quick tip for better React components
Reusable components like to grow boolean props for different situations and complexity soon blows up. Variant props are the perfect solution.
March 2nd, 2021
A TypeScript trick for reusable hooks
Reusable hooks are all fun and games until TypeScript starts yelling at you about incompatible types.
February 19th, 2021
React Bricks - visual blocks editor for NextJS #CodeWithSwiz 22
Tried a new visual editor for NextJS and CreateReactApp. Got a site up in 20min 🤘
February 9th, 2021
SSR, SSRwR, SSG, CSR, WTFBBQ???
These abbreviations are getting out of hand. It's like a bad interviewer's wet dream.
November 24th, 2020
Gatsby to NextJS pt1, server-side-render or server-side-generate?
Gatsby and NextJS do similar things differently. One is better for websites, the other for webapps. In episode 17 of CodeWithSwiz we explore the biggest difference.
November 19th, 2020
Refactoring a useReducer to XState, pt1 – CodeWithSwiz 11
XState promises to be like useReducer+Context combined and the simplest way to handle complex state in React apps. But can it deliver? On this episode of #CodeWithSwiz, we gave it a shot.
October 8th, 2020
Prefetch data with React Query and NextJS – CodeWithSwiz 8, 9
Prefetching lets you start React apps without loading spinners. Gatsby introduced this concept with `staticQuery`, react-query and NextJS make the pattern easier 😍
September 30th, 2020
Using JavaScript to commit to Github – CodeWithSwiz 7
Update code with a JavaScript function? Easier than you think 😍
September 17th, 2020
Why NextJS /api routes are fab – CodeWithSwiz 6
In this episode of CodeWithSwiz, we tried NextJS's support for /api routes – code running on the backend. In a word – Wow
September 13th, 2020
How React Query gives you almost everything you thought you needed GraphQL for
GraphQL solves every problem you've ever had talking to APIs on the frontend. Mention a switch to GraphQL to your team and they think it's a joke. Rewrite our entire app? oh you jokester. React Query is the perfect middle ground ❤️
September 7th, 2020
When your brain is breaking, try XState
August 10th, 2020
Why react-hook-form is my new favorite form library
August 3rd, 2020
Wormhole state management
June 29th, 2020
Why you should build a form generator
Lemme guess, every project involves 1 or 2 forms and they're all the friggen same. You got forms coming out the wazoo. Render fields. Connect to state. Add field validation. Detect submit. Add form validation. Send fetch request. Repeat.
April 27th, 2020
Build responsive SVG layouts with react-svg-flexbox
August 17th, 2018
ReactVR/react-360 is great, but maybe not quite there yet
August 3rd, 2018
Answering some common questions about React + D3 2018
August 2nd, 2018
Declarative D3 charts with React 16.3
April 27th, 2018
Livecoding Recap: A new more versatile React pattern
March 27th, 2018
Seamlessly render a Preact component in a React project
February 28th, 2018
Fade in lazy loaded images with React and CSS – a quick guide
January 31st, 2018
How to populate react-redux-form with dynamic default values
January 25th, 2018
Server-side rendering a D3 chart with React 16
September 28th, 2017
How you can translate any random D3 example to React
August 31st, 2017
N-body Collision Simulation with React, D3, and MobX
March 16th, 2017
Livecoding #30: Dipping my toes in React Native
January 17th, 2017
Animating 2048 SVG nodes in React, Preact, Inferno, Vue, Angular 2, and CycleJS – a side-by-side comparison
December 21st, 2016
Livecoding #29: Optimizing React choropleth map rendering
December 19th, 2016
Using HOCs to DRY up your code
December 16th, 2016
Dancing tree fractal with React
December 13th, 2016
Fun surprise: UglifyJS can't ES6
December 7th, 2016
Livecoding #28: Productizing the door-answering Slack bot, Part 1
December 5th, 2016
One awkward thing about MobX: Complex models
December 2nd, 2016
Livecoding #27: New React Indie Bundle page almost done
November 21st, 2016
Fractals in React
November 18th, 2016
Fast, searchable dropdown inputs with React
November 16th, 2016
I made a python script that converts SVG to React ?
November 15th, 2016
Livecoding #26: A new page for a new React Indie Bundle
November 14th, 2016
Modeling time in React
November 9th, 2016
How to structure your MobX app for the real world
November 4th, 2016
A tiny ES6 fetch() wrapper that makes your life easier
November 2nd, 2016
Livecoding #25: Adding MobX to a vanilla React project
October 31st, 2016
Simple MobX-driven modals
October 28th, 2016
How to use MobX with create-react-app
October 27th, 2016
Histogram in D3v3 vs D3v4
October 25th, 2016
Livecoding #24: A choropleth in React.js
October 3rd, 2016
Backbone → React: Handling state with MobX
September 22nd, 2016
Backbone → React: it's a people problem after all ?
September 21st, 2016
Backbone → React – Step 1
September 20th, 2016
Work on React+D3js ES6 v2 begins in earnest
September 8th, 2016
Animated string diffing with React and D3
August 22nd, 2016
Livecoding #19: It’s hard to package a library
August 15th, 2016
Livecoding #17: Particle physics is hard
August 4th, 2016
Livecoding #15: Reaching the limits of canvas redraw speed
July 20th, 2016
Livecoding #13: rendering React components with canvas
June 28th, 2016
Livecoding #12: towards animating 10k+ elements with React
June 16th, 2016
Using d3js transitions in React
April 28th, 2016
How to Make a Piechart using React and d3
April 15th, 2016
Animating with React, Redux, and d3
March 11th, 2016
React+Flux can do in just 137 lines what jQuery can do in 10
October 16th, 2015
React components as jQuery plugins
August 7th, 2015