The React Newsletter

Hi <<First Name>>,

How to write a React Component in TypeScript

There are plenty of ways to do it, here's how I recommend typing React Components

Read more

Dependency Injection in React

Dependency injection is a form of inversion of control. This means that a component’s dependencies are not part of a component’s internals, they are defined at the public-facing seam, or interface, of the component.

Dependency injection allows for a decoupled design and makes testing easier. It fosters clear boundaries between components and allows for the simple substitution of one concrete implementation of a dependency with another concrete implementation. It also allows for substitution of a dependency with a mock, or fake, during testing.

This blog details some techniques for using dependency injection in React.

Cypress Tutorial

Tired of having users email you that your web application is broken? Using Cypress.io, the JavaScript End to End Testing Framework, as a quality control tool will help a lot in preventing those emails. Yet Cypress.io, good as it is, is not a silver bullet.

In this upcoming video course Maurice de Beijer will teach you all about using Cypress.io. You will learn how easy it is to get started and create your first useful tests. You will also learn how to make tests for data driven applications more reliable and even faster. He will show you how to test applications using 3rd party authentications services. And you will learn how to include all that as part of your continuous integration build. Hellping you prevent errors from ever deploying.

Want to learn more? Go to https://www.cypress-tutorial.net/ and subscribe to hear about the updates and the course launch. Don’t worry, I am not going to spam you. And you can unsubscribe at any time.

Testing React: A Convert’s Journey from Enzyme to Testing Library

Testing Library's advantages over Enzyme for testing React: - Opinionated framework enforces best testing practices (test behavior, not integration) - Opinions on how to find elements (by role) encourages accessibility - jest-dom assertions lead to simple, readable tests - ESLint plugins help encourage best practices in real time - test output helps locate elusive elements There will be a few code examples, but this is largely a discussion (rather than a how-to).

Watch video

Should You Use useMemo in React? A Benchmarked Analysis.

Some of our developers recently came with the question, when should I use useMemo in React? That is an excellent question. In this article, we will have a scientific approach, define a hypothesis, and test this with real-life benchmarks in React.

Read on to find out what the performance impact of useMemo is.

Rebuild static pages on-demand with incremental static regeneration

When you load a regular React app in a browser there are a lot of things happening in the background before you can see any content on the page. The browser has to load a lot of HTML, CSS, and JavaScript before any content can be displayed to the user.

First, after the JavaScript has been downloaded and parsed we can begin fetching data from an API. This can lead to waiting times, spinners, and an overall slower experience of the website.

With static pages, we can make sure the users see the content as soon as possible, by including the content in the initial HTML from the server. This means we will not have to wait for JavaScript to load before displaying meaningful content, and the users will not have to wait for potentially slow API-calls to finish before dynamic content is visible.

A Thoughtful Way To Use React’s useRef() Hook

In a React component, useState and useReducer can cause your component to re-render each time there is a call to the update functions. In this article, you will find out how to use the useRef() hook to keep track of variables without causing re-renders, and how to enforce the re-rendering of React Components.

Read more

React video courses

Because I need to pay my bills 😉