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

The React Newsletter

Hi <<First Name>>,
One simple trick to optimize React re-renders

Without using React.memo, PureComponent, or shouldComponentUpdate

I was preparing a blog post on a subject related to React re-renders when I stumbled upon this little React gem of knowledge I think you'll really appreciate:


Kent C. Dodds@kentcdodds

If you give React the same element you gave it on the last render, it wont bother re-rendering that element.

6:53 PM - Jun 24, 2019
Twitter Ads info and privacy

See Kent C. Dodds's other Tweets


Let's break that down with a simple contrived example and then talk about what practical application this has for you in your day-to-day apps.

Read more
JavaScript and React unit tests basics

This is the first part of a two-article series where we will cover all you need to know to get started on writing your first Javascript and React unit tests.

Why do we need unit tests?

Unit tests give us a high degree of confidence that our code behaves like we expect it to.

This is important in two moments: when first writing a piece of code and when we need to change the code later on.

What are unit tests?

Unit tests verify that the functions in the project produce the outputs we expect for a given input.

Lets drill down on that a bit.

The unit tests should not be on a separate project. This is important because unit tests are closely related to the source code, and having them on a separate project would make it much harder to implement and maintain the tests.

The purpose of unit tests is to validate individual functions. The fact that they only test individual functions increases test speed so we can easily run the whole test suite locally. That also makes them easier to write, maintain, and debug. This is not to say that other types of tests, like integration tests, are not important. We just don’t want to mix unit testing with other types of tests. If we do, we risk losing the advantages of unit tests.

Unit tests fulfil their purpose by performing assertions. Assertions are equality checks. We check that the output of a function is what we expect given the passed input. In modern libraries, assertions are a bit fancier. We’ll expand on this later.

Read more
React Fiber Deep Dive with Dan Abramov
Jani and Phil got a problem. There are too many damn divs! With the help of Jenn Creighton and special guest Dan Abramov, we learn how to hack React Fiber reconciler internals to make the world a less div-ided place.

In this deep dive you'll learn how to contribute to React Fiber, and implement a new rendering mode for React.

Watch video
Gotchas of working with React Hooks and Concurrent mode
While in this series, I’ve painted a very rosy picture of the functional world of react hooks, including part 1: why do we care about hooks in the first place; part 2: how to manage state in stateless components when working with react hooks; part 3: how to work with complex states and stores from redux with react hooks and stateless components; and part 4: asynchronous functional programming with the useEffect hook, it’s not always sun and roses when working with hooks. There are a few key issues and “gotchas” that you should be aware of in this paradigm, and this piece will explore those fully.

Read more
Why I Love useReducer

Read more

This post is the first of a trilogy. Check out the other two posts as well:

I didn't realize until recently how much I loved the React Hook useReducer. It's one of those advanced hooks, and while I read the documentation about it and already have a good amount of experience with Redux, it took a little while for me to fully understand just how powerful useReducer can make your components.

I made a video about this. To show my love for useReducer. I encourage you to take a watch. The first 10 minutes are me setting the scene. Together we're building a pretty generic Login Form, one that has been written countless times. In the first half of the video I make the component using multiple useState calls, as I normally would with a React Class Component.

Then at around the 11 minute mark I start migrating my code to use useReducerinstead - and the fireworks fly!

Read more
The React Developer Pocketbook: Learn to develop React 2019

The inspiration for this guide came about after realizing that the blog article I had read the most was ‘A Complete Guide to Flexbox’. There are two reasons for this, firstly, I am very forgetful, and secondly, it is a quick and simple way to find the information I need. This list aims to give you the best guides on how to do almost anything in the world of React, and general web development. Keep reading to find the tools you’ll need to become a great react developer!


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

unsubscribe from this list    update subscription preferences 

Email Marketing Powered by Mailchimp