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

The React Newsletter

Hi <<First Name>>,
What's new in React 18?

As the React 18 version alpha is ready-to-go, and a stable beta version will probably be available in a few months, it is about time to talk about the new features that are being added. If you know nothing about React, this is not the article for you.

Before we move on to the new features of React 18, let's understand some concepts that you might not be familiar with, such as Server Side RenderingSuspense, and Hydration. If you already know what these are, you can directly go and read the changes section.

Read more
6 use cases of the useEffect ReactJS hook

Whenever we need to make use of side effects in our application, useEffect is the way to go. This hook doesn't present many complications, except for non-primitive data types, due to how JavaScript handles them.

According to the official documentation, effects run after every completed render, but you can choose to fire them only when certain values have changed. This hook uses an array of "dependencies": variables or states that useEffect listen to for changes. When their values change, the main body of the useEffect hook is executed.

The return statement of this hook is used to clean methods that are already running, such as timers. The first time this hook is called, its main body is the one that is going to be evaluated first. All other subsequent times the hook is called, the return statement will be evaluated first, and, after that, the hook's main body. This behaviour is especially useful for cleaning code that is already running before run it again, which enable us to prevent memory leaks.

Read more
React + RxJS = Reactive Global Goodness
Let's fuse together React and RxJS to build a Pokemon deck builder application and use that as an opportunity to learn about RxJS and how it can play nicely with React.

Watch video
How Readable Are Your React Component's TypeScript Props Typing?

TypeScript is one of React’s most iconic partners. Some would even argue that TypeScript and React are a match made in heaven. One of the most common usages of TypeScript in a React codebase is typing a component’s props. It’s most likely that every React project with TypeScript will have props typing implemented for at least one component in some way. In a properly typed project, it’s not out of the ordinary that every component has props typings defined.

But despite it being so common and such a big part of a TypeScript React project, have you ever thought about how readable your component’s props typing is?

Read more
A Visual Guide to React Rendering - useCallback
You can often see an event handler passed to a React component as an anonymous function. This will cause the child component to re-render when the parent renders, even if you wrap the child in memo. Let’s figure out why.

Read more
How to use finite state machines in React?

Finite state machines in React might be an unusual topic since they are not often linked with frontend development. However, I have this really awesome trick that works miracles in complicated software projects, especially by boosting security.

What are finite state machines?

A finite state machine is a mathematical model that describes the system’s behaviour. It consists of all possible states of the given object and transitions between them.

Read more
React video courses
Copyright © 2021 ABL - The Problem Solver, All rights reserved.

unsubscribe from this list    update subscription preferences 

Email Marketing Powered by Mailchimp