The React Newsletter

Hi <<First Name>>,

Writing Resilient Components

When people start learning React, they often ask for a style guide. While it’s a good idea to have some consistent rules applied across a project, a lot of them are arbitrary — and so React doesn’t have a strong opinion about them.

You can use different type systems, prefer function declarations or arrow functions, sort your props in alphabetical order or in an order you find pleasing.

This flexibility allows integrating React into projects with existing conventions. But it also invites endless debates.

There are important design principles that every component should strive to follow. But I don’t think style guides capture those principles well. We’ll talk about style guides first, and then look at the principles that really are useful.

useTypescript — A Complete Guide to React Hooks and TypeScript

React v16.8 introduced Hooks which provide the ability to extract state and the React lifecycle into functions that can be utilized across components in your app, making it easy to share logic. Hooks have been met with excitement and rapid adoption, and the React team even imagines them replacing class components eventually.

Previously in React, the way to share logic was through Higher Order Components and Render Props. Hooks offer a much simpler method to reuse code and make our components DRY.

This article will show the changes to TypeScript integration with React and how to add types to hooks as well as your own custom hooks.

Rendering large lists with react-virtualized or react-window

If you use React and need to display large lists of data efficiently, you may be familiar with react-virtualized. It's a windowing library by Brian Vaughn that renders only the items currently visible in a list (within a scrolling "viewport"). This means you don't need to pay the cost of thousands of rows of data being rendered at once. react-window is a recent rewrite with a focus on being smaller, faster and more easily tree-shakeable.

Watch video

Progressive React

Performance advocates, like me, spend a lot of time “advocating” for faster sites. Sometimes, it’s a bit overwhelming.

I’m going to take a leaf out of this panda’s book and tell you why you should stop using React today.

Okay, that’s just a joke. This article will actually cover how you can continue to work on the same React apps that you build, but to consider adding a number of optimizations to it. The key point here is to try and build your React site so that more people can use it.

React Testing tutorial for beginners using jest

In this tutorial, we are going to learn about how to test react components by using a jest testing framework.

What is Jest?

Jest is a JavaScript testing framework created by Facebook it works with React, Angular, Vue.

Did you know — createReducer Works with React Hooks. Here’s how.

The React docs have a counter app example demonstrating the useReducerHook.

For demo purposes, I styled it just a bit.

The component code

The JSX is simple: it displays the current count with 3 buttons.

The Counter component calls useReducer with a reducer and initial state, which gives back an array with the current state and a dispatch function.

Clicking any of the buttons calls dispatch with an action object.

React video courses

Because I need to pay my bills 😉