The React Newsletter

Hi <<First Name>>,

React Server Components in 5 Minutes

The Big Idea

Render React components in one of 3 ways:

On the server – Use a .server.js extension.
On the client – Use a .client extension.
On both client and server – Use a plain .js extension. This is called a shared component.

So you can think of your React app as a single tree that’s a mix of client, server, and shared components.

This currently works with Webpack and Next.js. Parcel support is coming soon.

It’s still in research and development, but being used at Facebook in prod. Initially will be consumable solely via frameworks (since need server and routing opinions to pull this off). Longer term, no framework required.

How To Write Better Functional Components in React

Those of us who have worked with functional components in React know that the introduction of Hooks has made our lives a lot easier. However, functional components have their own set of complexities and gotchas. As a result, it can sometimes be difficult to write readable and optimized functional components. Today, we will look at five simple tips to help us do just that.

Read more

A glance at React Server Components

Server Components might represent the future of how we create React Applications. Right now, it's just a proposal, so in this video, I will show a glance at what the future might look like.

Watch video

Optimize React Apps PageSpeed Insights Score

We will be working on optimizing the website of the company I work for coatconnect.com.

PageSpeed Insights is a very powerful tool by Google. It allows us to analyze our website’s performance and figure out ways we can improve it.

The problem with SPAs (Single-Page Applications) is that they show content after loading JavaScript chunks first, so it takes a little while on the client before it can actually render content and that can destroy PageSpeed Insights score.

Our app has to be an SSR (Server-Side Rendered) app. We are using React for this project, but really you can use any framework you like, the same concepts apply. This is a framework-agnostic article. It works with:

You can go about this in a lot of different ways. You can use:

React and Express (which I’m using)
Next.js for React
Nuxt.js for Vue
Sapper for Svelte
Angular Universal
Gatsby
JAM Stack
…etc

Making sounds with React and Tone.js

By utilizing Tone.js one could easily produce some sounds, and if you’re lucky it could be quite musical. In this article we’ll look at combining React with Tone.js to make a simple sequencer.

Tone.js is, by their own description, a “Web Audio framework for creating interactive music in the browser”. Its API is quite low level, with good flexibility with regards to asynchronous tasks and extensibility of sounds to produce. Today we’ll create what’s known as a music sequencer, which is a way to sequence a series of notes.

Intelligent fetching and caching with SWR

Every now and then, a library surfaces that change the way you're used to thinking. In this case, it is rethinking the data flow in your React app. SWR provides a complex data store with a simple interface, helping you write simple patterns with less code.

SWR has quickly become one of my favorite tools in my toolbox. The name SWR refers to the caching strategy stale-while-revalidate, and in its essence, the library provides just this, a caching strategy. The library is made by Vercel, the creators of Next.js, and has excellent documentation.

SWR has interfaces to easily cache resources from your backend, regardless of which underlying data fetching library you're using. You provide the data fetching, SWR handles the caching, and stores it for you. Simple as that. However, SWR delivers a much more useful set of tools to manage the whole process of using remote resources.

React video courses

Because I need to pay my bills 😉