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

The React Newsletter

Hi <<First Name>>,
 
The Testing Trophy and Testing Classifications

How to interpret the testing trophy for optimal clarity

Allow me to indulge in a little personal history. If you're unfamiliar with the testing trophy, here it is:



Read more
 
What's new in React 18?

React 18 alpha version was just announced. The theme of React 18 is to make the UI more performant by removing janky user experiences by introducing out of the box features and improvements powered by "concurrent rendering". React 18 introduces minimal breaking changes.

Let's take a look at the major updates of React 18.


Read more
 
How to use TypeScript with React 18 alpha

React 18 alpha has been released, which is very exciting! But can we use it with TypeScript?

The answer is “yes,” but we need to do a couple of things to make that happen. This post will show you what to do.


Read more
 
Let’s Learn Modern Redux! (with Mark Erikson)
A lot has changed in Redux since it was originally created. In this episode, Mark Erikson will teach us about Redux Toolkit an React-Redux hooks.

Watch video
 
Improve the Performance of your React Forms

Forms are a huge part of the web. Literally every interaction the user takes to make changes to backend data should use a form. Some forms are pretty simple, but in a real world scenario they get complicated quickly. You need to submit the form data the user entered, respond to server errors, validate the user input as they're typing (but not before they've blurred the input please), and sometimes you even need to build custom-made UI elements for form input types that aren't supported (styleable selects, date pickers, etc.).

All this extra stuff your forms need to do is just more JavaScript the browser has to execute while the user is interacting with your form. This often leads to performance problems that are tricky. Sometimes there's a particular component that's the obvious problem and optimizing that one component will fix things and you can go on your merry way.

But often there's not a single bottleneck. Often the problem is that every user interaction triggers every component to re-render which is the performance bottleneck. I've had countless people ask me about this problem. Memoization won't help them because these form field components accept props that are indeed changing.

The easiest way to fix this is to just not react to every user interaction (don't use onChange). Unfortunately, this isn't really practical for many use cases. We want to display feedback to the user as they're interacting with our form, not just once they've hit the submit button.


Read more
 
How To Use The Vite Build Tool with React

If you haven’t heard of it yet, Vite is a new build tool for frontend apps (created by Evan You, the creator of Vue.js). It works much like Webpack and Parcel but faster (“vite” means fast in French).

Vite uses the amazing esbuild behind the scenes. esbuild is a JavaScript (and TypeScript) bundler written in Golang which is one of the reasons it’s so fast.

Often when building a new project with React it is recommended to start with create-react-app. But now that Vite is here, you can easily set up a new project from scratch yourself, because Vite is very simple to configure.

Before we start, you will need to install Node.js and NPM (bundled with Node.js) if you haven’t already. I will be using NPM in this guide but if you prefer Yarn or PNPM, feel free to use it.

Read more
 
React Hooks Tips Only the Pros Know. Get it while it's free and 🔥 on Udemy.

Are you loving React but new to the Hooks API? Are you already using React Hooks but not sure you are doing the right thing? Or maybe you are sometimes getting tripped up by some of the React Hooks details?

 

The addition of the Hooks API to React was quite a major change. Before React Hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with React Hooks. And it often turns out there are many ways where you can improve your components by a better understanding of how each React Hook can be used.

 

In this course we are not just going to look at how to use React Hooks. We are also going to go behind the scenes and dive into the source code of React and the React ESLint rules to see why hooks work the way they do.

 

My name is Maurice de Beijer and I love React. I have been using React Hooks since they first shipped. In this video course I would like to teach you all about using React Hooks. During this course you will learn quite a few things. You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better. We will also cover creating several reusable custom hooks. In the last section we will combine all we learned into a more complete utility library to show how it all comes together. And I will be using TypeScript in most of the course so maybe you can pick up a few tips there as well. So come and join me with your laptop in this interactive course.

 

Is this course for you? Never worked with React hooks before? No problem, we will start from the beginning. Already using React Hooks a bit but want to learn more? Sweet. New to TypeScript? No problem. Do you have a reasonable understanding of React? Great, you have the prerequisite knowledge. Also have a computer with a modern browser and code editor? Super, you are all set to get started.


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