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

The React Newsletter

Hi <<First Name>>,
 
The Complete Guide to React Refs

The React API is fairly simple, even though it has been growing bigger. With recent features such as Context and Hooks, the whole ecosystem has become more complete. Yet, some concepts are usually a source of struggle for beginners and even experienced developers. One of them is the Refs API.

Short for “reference”, refs are a way to access underlying DOM elements in a React component. There are many reasons why you would want to access the DOM. Common use-cases are managing focus (critical for accessibility) and triggering animations. In this post, you will learn how to properly use refs, how to use the current API, and decide when to approach one over the other.


Read more
 
Micro-Frontends

Do you have a large scale UI that takes way too long to rebuild? Do you have multiple teams and frequently run into code conflicts and other integration issues? Is an app responsible for too many features? Micro-frontends can probably help you here. Micro-Frontends takes the Micro-Services architecture concept from backend engineering, and applies it to frontend development. But how can splitting the UI into multiple frontends help to scale your project?

In my previous job, from 2012 until 2016, I was the lead developer for a multinational company’s UI framework, where our team designed and implemented a micro-frontend architecture. In this article, I’ll share some of the benefits, and things I’ve learned through working with micro-frontends.


Read more
 
Rethinking reactivity
Modern JavaScript frameworks are all about reactivity. Change your application's state, and the view updates automatically. But there's a catch — tracking state changes at runtime adds overhead that eats into your bundle size and performance budgets. In this talk, we'll discover an alternative approach: moving reactivity into the language itself. Your apps have never been smaller or faster than they're about to become.

Watch video
 
5 things you didn’t know about React DevTools

If you’re into React development, chances are you’ve tried the official React DevTools. This browser extension lets you debug your components, and is available for ChromeFirefox and even as a standalone application for Safari and React Native debugging.

The React DevTools is under active development, and new features are added all of the time. This article will show you five of those features that you might not have tried out yet, or that you simply didn’t know existed! Finally, we’ll look at what the future of React DevTools will bring.


Read more
 
Taking Control of React Performance

You’ve spent months, maybe even years, building an application for your organization. It looks great, has gone through a rigorous QA process, and has gotten good reactions from your beta testers.

Launch day comes; are you certain your application can stand up to unexpected demands, high messaging rates, or slow data connections?

In software development it’s easy to push addressing performance concerns towards the end of the process (maybe even when it’s too late). However, there are tools readily available to help you identify, and mitigate performance issues early on.

As our application began to grow we started noticing our animations drop lower than 60fps and visually poor mounting/rendering performance. Our application also contains a large chat feed with multiple channels to chat in. As the messages in each channel began to grow (hundreds, or even thousands) we would notice poor scrolling performance and poor rendering performance as the user switched between channels.

By using the tools and methods below, our team was able to identify and eliminate 13,000+ wasted renders in initial application load, and thousands of additional wasted renders post-load in the Church Online Platform.


Read more
 
How To Fetch Data From An API With React Hooks

React hooks let us write pure functional components without ever using the class syntax. Usually, but not always, the less code we have to write, the faster we’re building our application.

If you’re new to hooks, check out this tutorial for hooks introduction.


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