The React Newsletter

Hi <<First Name>>,

Replace axios with a simple custom fetch wrapper

Axios can do a ton of stuff, but here's a simpler solution that can handle most use cases

I remember being with Matt Zabriskie when he hatched the idea of a vanilla JavaScript version of AngularJS's $http service. It seemed like a brilliant idea and that night in his hotel room at MidwestJS, he put together the first iteration.

It was awesome because working with raw XMLHttpRequest to make HTTP requests was not very fun. His library, which he later called axios is a brilliant work and functioned both in NodeJS and the Browser which I remember him being really excited about (and I was too).

It's been almost six years now and if you're reading this chances are you've at least heard of it and very likely used it in the past or are using it now. It has an enormous and growing number of downloads on npm. And while Matt's long moved on from the project, it is still actively maintained.

Since it was released, the browser standard has evolved to add a new, promise-based API for making HTTP requests that provided a much nicer developer experience. This API is called fetch and if you haven't used it yet, you really ought to check it out. It's widely supported and easily polyfillable (my favorite is unfetch because the dog mascot is cute 🐶).

React Concurrent Mode - The Future of Web Apps

In a recent post, we discussed building great user experiences using React Suspense. Continuing on that post, we will have a look at how React’s new experimental Concurrent mode helps us develop responsive and fast apps.

When it comes to great UX, performance is one of the key factors. While working on large scale applications we often encounter situations where we have to compromise user experience to keep our apps fast. But what if we could find a way to build apps that are highly performant by default with smooth UX and developer-friendly APIs? React Concurrent Mode is the answer to all of these wishes.

Concurrent React is something that has been under development at Facebook for the past 2 years now. React Fiber, a complete rewrite of React, was done with concurrent mode as central motivation. Though all of the other benefits of React Fiber are worth it themselves but enabling Interruptible Rendering and concurrency is the best amongst them.

Custom Hooks in React: The Ultimate UI Abstraction Layer

Custom Hooks in React are useful for much more than just managing the local state and one-dimensional side-effects you see in almost every React Hooks example. They can be used to build sophisticated memoization pipelines and chained-effects that automatically manage local and network resources. But most importantly, they provide a new new layer of abstraction to accomplish new and amazing patterns that we couldn't have just over a year ago. On the surface, this abstraction layer is simply collection of custom hooks, but when unlocked, it can be the most powerful piece of your application architecture.

Watch video

A Comparison of React and Svelte

The fruit bowl of frontend frameworks is full and React is the fat melon taking up all the space. Do we really need another technology to learn? Rich Harris of the New York Times says yes, and SvelteJS is his offering.

As an engineer, it’s important to explore different technologies. It’s important to identify the tools available to tackle problems. And it’s important to expand your horizons because then you can look cool on your CV.

I won’t be coy. I think Svelte is incredible. But I also love React, and it’s what I use every day at work. It’s what most people use. Svelte has some definite advantages, but does it have a chance of changing that reality? The only way to find out is to view them side by side and decide for yourself.

Writing unit tests with React, Typescript, and react-testing-library

The company I work for started embracing Typescript as a go-to solution for writing React. During code reviews, I noticed a lot of people had problems while testing their components. While looking at the code, I noticed that it was written in such a way that made Typescript look more like a burden and not a tool that assists you while writing code.

Having some experience with Typescript I came up with a pattern for writing tests which, in my opinion, avoids unnecessary repetition and makes them clear.

Firebase as a React Hook

In a prior post, "How we use Firebase instead of Redux (with React)," I discussed how we created a withDbData function to load data from Firebase Realtime Database (RTDB) into React conveniently.

Now that we've switched to writing most of our components as functions, I wanted a hook equivalent for loading state. In this post, I'll explain how to use and how I implemented useDbDatum / useDbData, two hooks for generically loading data from Firebase RTDB.

React video courses

Because I need to pay my bills 😉