The React Newsletter

Hi <<First Name>>,

Discovering Next.js with Guillermo Rauch

In this episode of Semaphore Uncut, we talk to Guillermo Rauch. Guillermo is CEO and co-founder of Vercel. We talk about how React has emerged as a de-facto standard for the front-end. Guillermo describes Vercel’s Next.js framework that is built around React. And we also discuss front-end testing and microservices engineering trends.

Read more

Optimizing the Performance of a React Progressive Web App

In the last quarter, I started working in a new team with different business goals. It was a great team, really fun to work with, and we did a lot of amazing work that I'm proud of.

One of the projects we managed in the last 4 months was web performance improvements for the application we were working on. This post intends to share the improvements we made and the things we learned throughout this process.

AHA Programming

Are you the kind of programmer who prefers to never see the same code in two places, or do you make liberal use of copy/paste? Many developers swear by the Don't Repeat Yourself (DRY) philosophy while others prefer to Write Everything Twice (WET). But which of these produces more maintainable codebases? I've seen both of these approaches lay waste to codebases and I have a new ideology I would like to propose to you: Avoid Hasty Abstractions (AHA). In this keynote, we'll talk about abstraction and how you can improve a codebase by applying and creating abstractions more thoughtfully as well as how to get yourself out of a mess of over or under-abstraction.

Watch video

How to force-refresh your app every once in a while

Today's users tend to keep your web site open for ages. No, not because they love using it all the time, but because they opened it in a tab - most likely on their phone - and now it's there forever.

Read more

Testing Hooks - Hooks for code organization

The first category of hook usage is code organization to make our code easier to read. This is usually in the form of breaking a component into smaller parts, just like we might do with a regular non-React function.

Read more

Better Redux Reducers with TypeScript Builders

In my last blog post, I introduced the builder pattern in TypeScript and discussed how you can use it to get more accurate types in your code. It was all very abstract, so I thought it might be useful to show another more complex example. If you haven’t read my last blog, I’d recommend it, but I’m the kind of person to ignore that warning so no judgement here!

In this post, I show how the builder pattern can be used to create Reducers in a TypeScript React-Redux app. I discuss the benefits of that approach before walking through the code and explaining what it does at each step.

It’s not perfectly type-safe, but that’s not the goal. Instead, we use the builder pattern to create a type-safe boundary around unsafe code. That way, we can get the best of both worlds - a utility method that is both safe and maintainable.

React video courses

Because I need to pay my bills 😉