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

The React Newsletter

Hi <<First Name>>,
 
React 17 delegates events to root instead of document

React has been doing event delegation automatically since its first release. It attaches one handler per event type directly at the document node.

Though it improves the performance of an application, many issues have been reported due to the event delegation on the document node.

To demonstrate one of the issues let’s take an example of a select dropdown.

CountryDropDown in the below example is a React component for country selection, which would be rendered to a div with id react-root. The react DOM container is wrapped inside a div with id main that has a change event containing stopPropagation().


Read more
 
Which To Choose in 2020: NextJS or Gatsby?

Up until a few months ago, choosing between NextJS and Gatsby was easy. Need to make a static site, like for a blog or help page where the content doesn’t change too often? Cool, choose Gatsby. Need to build a site with server-side rendering, like an e-commerce store with thousands of items? Great, NextJS it is.

With the release of NextJS 9.3, the lines have blurred. NextJS now supports next-generation static site generation. Using the new build time methods getStaticProps and getStaticPaths, users can create static sites, just like Gatsby.

So the question is: if NextJS can do everything that Gatsby can do, but Gatsby can’t do everything that NextJS can do, why choose Gatsby at all?

Let’s take a look and the strengths and weaknesses of both Gatsby and NextJs, and finally, make some recommendations of what you should use for your next project.


Read more
 
How Next.js and Gatsby work and their differences
Two React frameworks that allow to avoid dealing with routing and config, or if you need server-side rendering.

Watch video
 
React State 5 Ways

here are seemingly endless ways of dealing with state management in React. Trying to understand the options, the tradeoffs between them, and how they work can be overwhelming.

When I'm trying to learn something, seeing a side by side comparison implementing some common real-world functionality helps me understand the differences between various options as well as form a mental model around how I may use them in my own applications.

In this post I'm going to walk through how to implement global state management in a React application using the same pattern across 5 of the most popular libraries and APIs using the most modern and up-to-date versions of the libraries.


Read more
 
How to enable automatic runtime in React 17 with @babel/preset-react?

The biggest feature of React 17, as React team claims, is that there are no new features. This isn't however entirely true.

In Babel 7.9.0, a new JSX transform was announced. It could only be used in experimental React releases. Until now!

Before we dive into how to enable this feature, let's see the advantages:

No more import React from 'react'

Yes! You'll no longer need to import React to each. and. every. component. you write. Instead, it will be imported automatically!

Well, not quite. If you use hooks, lazySuspense or any other import, you will still need to import them all manually. But no more importing React if you're not using React explicitly in your code, e.g. by calling React.useState.


Read more
 
What is React Fast Refresh?

f you’ve have been working on React projects, you might have heard of React Hot Loader, a library used for hot module replacement when you make changes to your code during development. It’s been in the game since 2014 and is used by hundreds of thousands of developers.

However, it has its own set of limitations and does not provide a really great developer experience. If you’ve worked on a large-scale app, you might have experienced a fair share of troubles with the Hot Loader, like terribly slow reloads of your app on code change, import/export issues, TypeScript related issues and a lot more. Click here to know how to troubleshoot hot loader issues

React Fast Refresh is a replacement for React Hot Loader. Fast refresh makes your React app reloads slick and painless on code changes, providing a great developer experience.

Fast Refresh was initially introduced with React Native in Version 0.61 in 2019, however the idea was to make it platform independent. So, a year later, Fast Refresh is coming to React soon.


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