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

The React Newsletter

Hi <<First Name>>,
 
How to useCallback in React

React's useCallback Hook can be used to optimize the rendering behavior of your . We will go through an example component to illustrate the problem first, and then solve it with React's useCallback 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.


Read more
 
Create a React Teleprompter using the Web SpeechRecognition API
In this post we are going to build a teleprompter web application using the Web Speech API. In particular, we'll use the SpeechRecognition interface to build this app. The idea is that we'll be able to recognize the user's voice, match the words to a predefined script, and then automatically scroll to the next unspoken position.

Read more
 
Creating a TypeScript React application using Snowpack
A quick demo on how to get started with React application using Snowpack.

Code: https://github.com/mauricedb/react-snowpack-2020-07-01

Watch video
 
5 Alternatives to React Redux in 2020

Redux has become the popular state management solution for most applications using React, Vue, or Angular as front-end frameworks. One of the main reasons for the popularity of Redux is its lightweight size of a mere 2KB.

Redux works on the simple principle of storing the entire state of the application is a single central store. This store can be accessed by all components and as such, removes the need to pass parameters and properties between components. The main building blocks of Redux are its actions, reducers, and store.

Let’s look at how Redux works to understand better the difference between it and its alternatives.


Read more
 
Don't know what to test on your React App? Learn how to make a test list

How in general should I know what to test?

During the daily meeting with your team, you find out that the client wants a new feature, and you’re in charge of implementing it. You’ve wanted to write automated tests for a while, and this seems like an excellent opportunity. But where do you start? What tests should you even write?

In this article, we’ll go over a process to turn a feature request into a list of tests that we can automate and use to help us in our development process. We’ll start by looking at the requirements for the feature, and then go over the goals we want to achieve with the tests we’ll be writing. After that, we’ll make a more thorough analysis of the requirements that will allow us to write the test list.


Read more
 
React debugging session - Why is this function called hundreds of times?

Every developer knows this situation: You're writing your code, hammering your keyboard all day long. Your code seems to work. Until it doesn't. Either it's not working as expected at all or only in some situations.

You try to find the problem. You have a close look at the code. But nothing seems wrong! So why the heck is this happening?

With time you will have found debugging strategies to deal with these kinds of problems. You will have some intuition that tells you where to look.

But for beginners, code that's not working can feel like a black hole. You don't know where to start. You're poking around and maybe, if you're lucky, you find a solution. But that can take hours or days.

At the beginning of my career, it was always great to learn by watching more experienced people doing their work. This is why I want to share the way I debugged a problem that another developer had in their project.

Be aware that debugging is not always a linear process. All roads lead to Rome. Some developers have a very logical step by step debugging process. Some are rather chaotic and jump around to find leads.

You can read this post like a protocol of the debugging process for this particular problem. I recommend you follow along step by step for better understanding. Simply clone this repository as a starting point.


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