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

The React Newsletter

Hi <<First Name>>,
 
React lazy, Suspense and Concorrent React Breakdown with Examples

There are some major new features and enhancements coming up for the React framework; exciting for us developers, rewarding for the end user. In this article we will be exploring the usage of lazy() and <Suspense />, but for these features to be fully beneficial we also need to understand concurrent React and the benefits of its support for multi threading.

Let’s start with what these terms mean:

  • Concurrent React: An update to the underlying React framework that allows it to work on multiple tasks (renders) at the same time. Not only this, these tasks can be switched between according on their priority, on a real-time basis.
  • lazy(): lazy is a new API in React to aid in code splitting and importing components into your scripts — very easily.
  • <Suspense />: Suspense is like an error catcher, which allows us to define fallback JSX if part of the content it is wrapping has not loaded. If you think of a try catch block, the catch block is our Suspence fallback, and everything within <Suspense></Suspense> is our try block. This example feels a bit contrived as catch blocks should generally not execute business logic, but the underlying process is very similar.

Suspense also lets us define a threshold to hold off showing a spinner in the event a component has not loaded in a certain time period. Think of using apps with a fast internet speed that flash in a spinner for a split second, before the loaded content is displayed. We can prevent this with fallbacks.


Read more
 
The Ultimate VSCode Setup for JS/React

My The Ultimate Atom Editor Setup (+for JS/React) post is pretty popular, but not long ago I migrated to VSCode.

Why? Speed, stability and TypeScript.

Overall, I’m very happy with the switch. As with Atom, for me, out-of-the-box the editor has a lot of missing functionality. However, it is covered by extensions.

I divided this list into Utilities and HTML/CSS/JS/React specific extensions, sorted alphabetically.


Read more
 
Create a custom useLocalStorage React hook
Let's just make a quick little useLocalStorage hook (note, hooks are not stable, but by the time they are, every hook conceivable will have been written and open sourced already... I'm pretty sure there are at least 10 localstorage hooks on npm already).

Watch video
 
React Anti-Pattern: Prop-Drilling

The Anti-Pattern

In this example, we have an application with two features:

  • Three buttons, AB, and C, change out a content area, e.g., Apple, Banana, and Cantaloupe (the navigation feature)
  • Swap Colors button swaps the background and foreground colors of the content areas (the color management feature)

Read more
 
How to improve the build speed in React-Typescript, when using material ui

you are using material - ui in react typescript and having trouble with the performance? Well i stumpled upon the same issue.
The build takes like forever, since i started to use material-ui and i was really no fun to code against such a lame project.

But lets go in medias res and describe the scenario:

I wrote a header component like this
Header. Pretty staright forward, right?

While coding i went really unhappy, because the build and the livereolad grew pretty slow. So i played around with the Typescript compiler and found this little command
tsc --diagnostics --listFiles which i made an alias healtcheck in my package.json.


Read more
 
Techniques for animating on the canvas in React
I recently experimented with audio visualisation in React on the Twilio blog. While I meant to teach myself more about the web audio API I found that I picked up a few techniques for animating in canvas within a React project. If you’re creating a canvas animation in React then perhaps this will help you too.

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


unsubscribe from this list    update subscription preferences 

Email Marketing Powered by Mailchimp