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

The React Newsletter

Hi <<First Name>>,
Why you should avoid using state for computed properties

I have often seen many people (including my past self) creating state variables for any kind of value that can change across renders including the ones that can be directly dervied from existing state or props. This pattern can often lead to some nasty and hard to debug state synchronization bugs, which can be easily avoided by computing those properties on the fly instead.

Let's try to understand with an example of what I meant in the above paragraph. Consider this example where we have a form with a field for name, and a submit button, which remains disabled until the user enters a name (A much better way to do this would be using HTML form validation, but don't forget this is a contrived example 😅). Right now, it has two state variables, one for keeping track of the name and the other for error.

Read more
React Fragments: A Simple Syntax to Improve Performance

React Fragments were introduced in November 2017 with React 16.2.0. Although they’ve been around for a while, many React developers avoid using them or employ them without knowing what they are. React Fragments are an entry-level but key feature, and every React developer should master them, regardless of their skill level. Also, considering how long they’ve been part of React, they can no longer be ignored.

So, let’s see everything you need to master React Fragments, by diving into the Why, the What, the How, and the When.

Read more
Vue explained to React Developers in 6 mins
Using your React.js skills you can learn the basics of Vue in less than 6 mins. Vue has become even more similar to React but still maintains some tricks ups its sleeve.

By the end of this video, we'll convert some React components into Vue components to explain how Vue works. We'll also look at why so many developers enjoy and use Vue.

Watch video
How To Implement Authentication In Next.js With Auth0
At the moment of adding authentication and authorization to our web applications, there are some things that we should evaluate, e.g. whether we need to create our own security platform or whether we can rely on an existing third-party service. Let’s see how we can implement authentication and authorization in Next.js apps, with Auth0.

Read more
Understanding React's useReducer Hook

We’re going to start this post off exactly how you’d expect, by talking about JavaScript’s forEach method. forEach lives on Array.prototype and every instance of Array has access to it. It allows you to invoke a provided function once for each element in an array.

const friends = ['Jake', 'Mikenzi', 'Jacob']

friends.forEach((friend) => addToDOM(friend))

Now, say you had an array of numbers, [2,4,6]. Using forEach to iterate through each number, how would you add all of the numbers together to get a single value, 12? One approach might look like this.

Read more
React State Management Libraries and How to Choose

The idea of state is one of the trickier things to nail down when you’re starting with React, and as your app grows, so do your state management needs.

In this post I’ll give you the Grand Tour of state management options in React and help you decide which one to use in your project.

What is State?

Just so we’re on the same page, let’s talk about state for a second.

Every interactive app involves responding to events, like when the user clicks a button, and a sidebar closes. Or someone sends a message, and it appears in a chat window.

As these events happen, and the app is updated to reflect them, we say the state of the app has changed. The app looks different than it did before, or it’s in a new mode behind the scenes.

Things like, “whether the sidebar is open or closed” and “the messages in the chat box” are pieces of state. In programming terms, you’d probably have an isSidebarOpen variable somewhere in the app set to true, and a chatMessages array with the messages you’ve received.

At any given moment, broadly speaking, the “state of your app” is determined by all of that data. All those individual variables, whether they’re stored in local component state or some third-party state management store – that’s your app’s state.

This is the high-level concept of “app state”. We aren’t talking about React-specific stuff like useState or Context or Redux or anything yet.

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