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

The React Newsletter

Hi <<First Name>>,
 
Before You memo()

There are many articles written about React performance optimizations. In general, if some state update is slow, you need to:

  1. Verify you’re running a production build. (Development builds are intentionally slower, in extreme cases even by an order of magnitude.)
  2. Verify that you didn’t put the state higher in the tree than necessary. (For example, putting input state in a centralized store might not be the best idea.)
  3. Run React DevTools Profiler to see what gets re-rendered, and wrap the most expensive subtrees with memo(). (And add useMemo() where needed.)

This last step is annoying, especially for components in between, and ideally a compiler would do it for you. In the future, it might.

In this post, I want to share two different techniques. They’re surprisingly basic, which is why people rarely realize they improve rendering performance.

These techniques are complementary to what you already know! They don’t replace memo or useMemo, but they’re often good to try first.


Read more
 
Demystifying useEffect's clean-up function

When you're starting to write React hooks, it can be hard to understand what's going on with useEffect, particularly if you're trying to translate Hooks to lifecycle methods in class components.

You read everywhere that you shouldn't compare useEffect to lifecycle methods, but then where do you start?

Thankfully, not knowing how useEffect's clean-up function works isn't as bad as getting the dependency array wrong, or passing constantly redeclared functions into useEffect.

That being said though, there are some nifty uses of the clean-up function that you should know about.


Read more
 
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.
An alternative to ejecting in Create React App
Create-react-app is the most popular React project starter, but if you want access to the project setup & configuration files, you have to run eject - and deal with over a dozen configuration and script files. There is a Middle ground: you can fork the react-scripts library on git (the library that contains all those script and configuration files to begin with). You will still have dozens of files to deal with, but at least they will be on git, with an upstream connection that allows you to merge any new developments back in your own config. To spicy things up a little bit, it this video, I'll also use git subtree to get a clean and organized repository containing only your configuration.

Watch video
 
TDD in a React frontend

Nowadays, only a few professional developers are left that seriously doubt the value of test-driven-development and test-driven-design (tdd). But the reality of many codebases I have seen is that tdd is often limited to the backend, where the "business logic" lives.

Part of this is due to a stigma that frontend development is not "real software development", even though in most cases a fully functional backend is completely unusable without the matching frontend. But part of it is due to missing skills on how to tdd in the frontend. This is what this article is about.

I'm taking React as an example because it is the framework I am most familiar with and the declarative style makes it easier to some of the tests than when using pure JavaScript, HTML, and CSS. But most of the ideas from this article hold also in other contexts.


Read more
 
Next.js Guide - How to learn and master this React framework

Next.js is a very powerful framework powered by React and created by awesome engineers at Vercel. In this guide, we will discuss how you should approach Next.js as a complete beginner and what all is required.

Introduction

Let us understand the "framework" first. Next.js is a framework. At its very core, Next.js is built on the top of React, rendered on server-side, which in turn is built on top of Node.js, and JavaScript. What makes Next.js interesting is the level of abstraction it provides you as a developer.

Next.js solves UX and DX

User eXperience (UX) and Developer eXperience (DX) are two big hurdles of building software. Next.js addresses both. It allows you to create very smooth websites, thanks to lightweight Server-Side-Generated (SSG) pages with HTML/JSON files, and at the same time allows you as a developer to not care about internals of server side rendering, which trust me, is not something you'd want to do as a startup/business focused on business logic.


Read more
 
Building a Pannable, Zoomable Canvas in React

Recently, I was tinkering on a side-project where I wanted to build a sort of canvas of very large dimensions that I could zoom in on and pan around, similar to zooming and panning around in a map application.
 

In this post, I'm going to detail how I built this in React and what challenges I had to overcome in doing so. The components I was building were only intended to be used in a desktop browser, so on touch-enabled devices, the examples have been replaced with illustrative video clips.

In my first attempts at building this pannable and zoomable canvas, I bound the canvas's pan and zoom state directly to the canvas's DOM element itself. Ultimately, this caused a lot problems, because there were certain elements visually laid out on the canvas that I either did not want to scale, or did not want to pan (such as some user interface elements on the canvas).

Ultimately, I decided to try an approach that decoupled the desired pan and zoom state entirely from the canvas component itself. Instead of binding the pan and zoom state to the canvas, I wanted to create a React context that reported the user's desired pan and zoom state, but didn't actually manipulate the DOM in any way.


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