Swizec Teller - a geek with a hatswizec.com

Senior Mindset Book

Get promoted, earn a bigger salary, work for top companies

Senior Engineer Mindset cover
Learn more

    Take your React beyond the tutorial

    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.

    Latest React articles from Swizec

    Why useSuspenseQuery works

    A reader asked 'Wtf why does this work?'

    Cleaner components with useSuspenseQuery

    Sick of complex states in your code? React Suspense can simplify your components for more readable, robust code!

    TanStack Router – modern React for the rest of us

    TanStack Router puts the router in control of data, state, and UI and it's ... really good.

    People like me are why you shouldn't run a hosting company

    A daring adventure of manipulating GET parameters in a NextJS 14 project, pushing hosting limits and avoiding the need for data storage. Dive into the chaos of compressing inputs to keep the project delightfully storage-free.

    Don't neglect your upgrades

    Regular software updates may seem tedious, but they save you from the nightmare of a massive overhaul down the line.

    A few thoughts on tRPC

    Discover tRPC's potential in building end-to-end type safe RPC APIs in this insightful blog post. Perfect for developers seeking innovative solutions for server-client separation in webapp development.

    Update state during render, better explained

    A few readers wrote in to say that the React Can Update State During Render email last week made no sense. Here's a better explanation.

    React can update state during render

    An unexpected feature of React: updating state during render. It's a UX and performance optimization

    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

    My biggest React App performance boost was a backend change

    Performance lives in the unlikliest of places. Follow the metrics.

    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.

    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

    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 😍

    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 πŸ‘†

    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

    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.

    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.

    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.

    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.

    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 😱

    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.

    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.

    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

    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.

    A fun security bug with static rendering – CodeWithSwiz #31

    The flash of unlocked content is great fun for any paywall

    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. πŸ’©

    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.

    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.

    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.

    A TypeScript trick for reusable hooks

    Reusable hooks are all fun and games until TypeScript starts yelling at you about incompatible types.

    React Bricks - visual blocks editor for NextJS #CodeWithSwiz 22

    Tried a new visual editor for NextJS and CreateReactApp. Got a site up in 20min 🀘

    SSR, SSRwR, SSG, CSR, WTFBBQ???

    These abbreviations are getting out of hand. It's like a bad interviewer's wet dream.

    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.

    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 😍

    Using JavaScript to commit to Github – CodeWithSwiz 7

    Update code with a JavaScript function? Easier than you think 😍

    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

    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 ❀️

    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.

    Created by Swizec with ❀️