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

The React Newsletter

Hi <<First Name>>,
Why is it so difficult to modify a deeply nested state in React?
It’s not uncommon to see a code like that in React world. All this effort just to update a single to-do item inside a nested state.

But how come that such a popular, widely spread tool as React makes such a hustle from something that a beginner may bump into during the first project? Is that really so that solo React can not tackle deeply nested state updates with less boilerplate? Isn't it a bit disappointing?

Read more
Effective React Query Keys

Query Keys are a very important core concept in React Query. They are necessary so that the library can internally cache your data correctly and refetch automatically when a dependency to your query changes. Lastly, it will allow you to interact with the Query Cache manually when needed, for example when updating data after a mutation or when you need to manually invalidate some queries.

Let's quickly have a look what these three points mean before I'll show you how I personally organize Query Keys to be able to do these things most effectively.

Caching Data

Internally, the Query Cache is just a JavaScript object, where the keys are serialized Query Keys and the values are your Query Data plus meta information. The keys are hashed it in a deterministic way, so you can use objects as well (on the top level, keys have to be strings or arrays though).

The most important part is that keys need to be unique for your queries. If React Query finds an entry for a key in the cache, it will use it. Please also be aware that you cannot use the same key for useQuery and useInfiniteQuery. There is, after all, only one Query Cache, and you would share the data between these two. That is not good because infinite queries have a fundamentally different structure than "normal" queries.

Read more
Cypress Tutorial
Tired of having users email you that your web application is broken? Using, the JavaScript End to End Testing Framework, as a quality control tool will help a lot in preventing those emails. Yet, good as it is, is not a silver bullet.
In this upcoming video course Maurice de Beijer will teach you all about using 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 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.
A Beginner's Guide to Next.js | Build a SSG Site with React
Get started with Next.js, an awesome platform for server-side rendering and static site generation with React. We'll talk through the differences between SSR and SSG, how to create a Next.js app, and how routing works within it.

Watch video
Don't Stop Me Now: How to Use React useTransition() hook

Some UI updates should be performed as quickly as possible (typing into an input field, select a value from dropdown), while others can have lower priority (filtering a list).

Until now, React hasn’t provided a tool to prioritize UI updates.

Fortunately, starting React 18 (which is in alpha as of June 2021) you can enable the concurrent mode — which allows you to mark UI updates as high or interruptible-low priority.

In this post, you’ll learn how to use useTransition() hook to mark UI updates as low priority, which is especially useful for heavy non-urgent updates.

Read more
Beginners' Introduction to React Testing

Being a software developer the need to write code and deploy working code to production quickly and safely is needed especially on products that have crazy deadlines and delivery schedules. And it's a known fact that things do break!

No matter the many years of experience one has things get complicated and a change made at some part of the code base like the way a function appends data to an object or processes a text could cause a bug in the system that could take days before an engineer can fix it, the need to monitor our codebase to make sure changes made to it do not affect the way the code base works currently is why we have tests.

Read more
Migrating an existing Next.js project to Netlify


So, you have a Next.js project that works flawlessly, and you want to put it on Netlify for the first time. Fun! Here’s some things you might have to do.

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