Stay up to date with the latest news on React.
View this email in your browser

The React Newsletter

Hi <<First Name>>,
Gatsby Serverless Functions And The International Space Station
Gatsby recently announced the launch of “functions”. In this article, Paul Scanlon explains how to get the current location of the International Space Station (ISS) as it orbits the Earth in realtime using Gatsby Functions and then display it on a 3D interactive globe using React Three Fibre.

Read more
How to model application flows in React with finite state machines and XState

Application state in front-end clients is a complexity that is at best managed, and at worst the reason you can't deliver new features.

There are many ways to handle application state in modern front-end applications. You may be familiar with React's useState/useReducer hooks, Redux or one of the many other state management libraries. But, when you pair that state with business logic, a finite state machine can be a much better way to manage it.


A finite state machine is a mathematical model of computation. It is an abstract "machine" that can be in exactly one of a finite number of states at any given time. The machine can transition from one state to another in response to some inputs known as events.

You define a finite state machine by a list of its states, its initial state and the events that trigger each transition.

  • We can define a number of states a machine can be in.
  • The machine can transition from one state to another given some triggered events.
  • The machine can be in exactly one state at a time.

Read more
Rules of Hooks - Custom hook names
Watch video
How to useContext in React

React's  come with  these days. Not only can React Hooks be used for  (e.g.  and ) but also for consuming React's Context.

This tutorial shows you how to use React's useContext Hook. Before, make sure to read my  tutorial which offers answers to the following questions:

  • Why React Context?
  • What is React Context?
  • How to use React Context?
  • When to use React Context?

Read more
Using Next.js and Vercel to instantly load a data-heavy website

A React application is JavaScript code that gets transformed into static HTML. This transformation is called "rendering".

Whenever you build a React application, you're inevitably making a decision on when to render it and you usually have 3 choices:

  • Client-side rendering: the application is rendered on the browser when the script loads.
  • Server-side rendering: the application is rendered on the server at every page request.
  • Static site generation: the application is rendered on the cloud provider (e.g. AWSVercelNetlify) at every deployment.

A while ago, we faced this scenario when building illuminem, an energy news aggregator that showcases thousands of posts daily.

In this article, we'll talk about the performance problems we faced and how we ended up leveraging Next.js and Vercel to solve them.

Read more
React Table with server-side Data

In this tutorial, I want to show you how to use React Table Library for server-side data featuring examples of server-side pagination, server-side search & filter, and server-side sort. Let's start with the foundation by installing React Table Library via your command line:

npm install @table-library/react-table-library

We will use the feature rich Hacker News API for fetching server-side data, but also for performing server-side operations like paging, searching/filtering, and sorting. Let's start by  in our React component. We will be using , but feel free to use something else. If you want to use axios as well, do not forget to install it on the command line.

Read more
React video courses
Because I need to pay my bills 😉
Copyright © 2021 ABL - The Problem Solver, All rights reserved.

unsubscribe from this list    update subscription preferences 

Email Marketing Powered by Mailchimp