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

The React Newsletter

Hi <<First Name>>,
 
Myths about useEffect

I've taught React to tens of thousands of developers. Before and after hooks were released. One thing I've observed is people tend to struggle with the useEffect hook and there are some common hang-ups for them that I'd like to address here.

❌ Lifecycles ❌ ✅ Synchronize Side Effects ✅

The biggest struggle I've observed is developers who have experience with React class components and lifecycle hooks like constructorcomponentDidMountcomponentDidUpdate, and componentWillUnmount. You can definitely map these to function components with hooks, but that's a big mistake.


Read more
 
React Children with TypeScript
The React children prop allows components to be composed together and is a key concept for building reusable components. Visually, we can think of it as a hole in the component where the consumer controls what is rendered. This post covers different approaches to strongly-typing this powerful and flexible prop with TypeScript.

Read more
 
Testing Modern React Apps by Luke Ghenco
Learn how to test your React app like a user would interact with it. Overcome the barrier of complexity in testing React hooks, async code, and user interactions.

Watch video
 
Animating list reordering with React Hooks

A little while ago I was given a cool design for an Instagram story styled bubble component where each bubble would smoothly slide into its new position when we got its new order from the API.

While it can be straightforward to do a whole load of animations and transitions with CSS, it took me a while to find an example of animating the reordering of list items, especially with React. Since I’ve also started to get used to the concepts of React Hooks I wanted to use them to implement this animation too.

I found this difficult to do using React hooks because my component would automatically rerender, in its new order, when it got new data. I was trying to hook into the moment before rerendering to smoothly transition from one state to another. Without the componentWillReceiveProps function call from the class components, this was hard to do.


Read more
 
How to useMemo in React

React's useMemo Hook can be used to optimize the computation costs of your . We will got through an example component to illustrate the problem first, and then solve it with React's useMemo Hook.

Keep in mind that most of the performance optimizations in React are premature. React is fast by default, so every performance optimization is opt-in in case something starts to feel slow.

Note: Don't mistake React's useMemo Hook with . While useMemo is used to memoize values, React memo is used to wrap React components to prevent re-renderings.

Note: Don't mistake React's useMemo Hook with . While useMemo is used to memoize values, useCallback is used to memoize functions.


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.
My React components render twice and drive me crazy

Many frontend developers who use modern React, have been pulling their hair out from time to time trying to figure out why their components render twice during development.

Others have noticed this behaviour, but they believe this is how React works under the hood while some have opened even tickets in the React official repository, reporting this as a bug.

So there is definitely some confusion in the community about this 😬

The reason why all these happen is React.StrictMode.

Let's dive into some real examples in order to replicate this and then investigate why this is happening in the first place.


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


unsubscribe from this list    update subscription preferences 

Email Marketing Powered by Mailchimp