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

The React Newsletter

Hi <<First Name>>,
How to properly internationalize a React application using i18next

Overcoming the language barrier for users who use your software is an important topic.
English is no longer the universal language of the internet.
As of March 2020, only 25.9% of internet users were English speakers.
The chances are high that your users will skip past your website if non-localized.
Therefore, without a multilingual website you might missing out on a large share of potential users.

In the JavaScript ecosystem, there are a lot of internationalization frameworks. Here you can find some details about some JavaScript internationalization frameworks.
In this article, we will be using the i18next framework to internationalize a React.js app.

Read more
5 Code Smells React Beginners Should Avoid

As a mentor to frontend beginners who have come from a myriad of different backgrounds, including bootcamps and other non-traditional education paths, I have observed many different approaches to coding in React. Part of the beauty of React is that it is generally pretty unopinionated relative to frameworks like Angular and Vue. This makes it flexible enough to plug into lots of existing code bases written in different frameworks. Additionally, it inspires a plethora of community libraries for different use cases, thereby pushing the whole industry forward.

However, the downside to convention-agnostic, configuration-heavy ecosystems is that it leaves a lot of room for beginners to stray from best practices. Below are five oft-violated best practices — or code smells — that I often find when reviewing pull requests from new React developers.

It should be noted that a “code smell” in this context is just a pattern I notice that draws my attention for further scrutiny. It does not mean that these are always improper implementations. There are no absolute rules in good software engineering. Every one of these code smells could make sense given the proper context in exceptional circumstances. That being said, if you find yourself using these patterns, you should stop and ask yourself, “Is this really necessary?”

Read more
How Do Serverless Functions and the Jamstack Power up Your React Apps?
The awesome Jason Lengstorf (@Jason Lengstorf) from Netlify gave us a fantastic Jamstack talk and live coded a React app and a custom serverless API from scratch *and* deployed it to production to show you how productive you can be with an optimized tech stack. This is great to check out if you want to see just how productive you can be with the Jamstack and serverless functions.

Watch video
How to Memoize with React.useMemo()

From time to time React components have to perform expensive calculations. For example, given a big list of employees and a search query, the component should filter the employees’ names by the query.

In such cases, with care, you can try to improve the performance of your components using the memoization technique.

In this post, I’m going to describe how and when to use the useMemo() React hook.

Read more
React Futures - Server Components

In a recent talk, the React team announced a new feature called React Server Components (RSC). What is that exactly, and how can we take advantage of it to write better apps?

If you are familiar with React, you know that it is a client-side library that provides developers with a set of abstractions on top of JavaScript that quickly and efficiently write the user interface to a web application. A client-side library means rendering the view in the DOM is done on the client’s browser using JavaScript. The server, in this case, is only responsible for delivering the bundles of your application containing HTML, CSS, and JavaScript and doesn’t perform any rendering.

The server sends a response back in HTML containing an empty body and script tags that reference JavaScript bundles in the head. That means JavaScript files must first be downloaded to the user’s browser before the rest of the page starts loading. This has two significant drawbacks:

  • Decreased performance as the initial load time increases
  • Lousy SEO, as many web crawlers can’t parse and read content from JavaScript files

After loading the initial JavaScript file, the content can be loaded asynchronously. The critical content is loaded first and then the non-critical content later, but this still introduces performance problems. To solve these performance issues, developers resort to reducing the bundle size of their React applications using minification, code splitting, dead code elimination, and so on. However, often this is not enough.

In this article, we’ll give you a deep dive into React Server Components, an experimental feature that can help you overcome these performance obstacles.

Read more
Time to say goodbye - Enzyme.js

Let me start with a bold statement: It's time to deprecate Enzyme.js.

While of course this is an opinion rather than a fact, I think the overall React ecosystem and community would benefit from that move.

In 2019, when I was working in AWS CloudWatch UI team, I was the person behind introduction of React Testing Library, and I was frequently and passionately advocating for replacing Enzyme with it. It's certainly never easy to get people excited to learn (yet another!) new JavaScript library that does the same thing. Yet, when I was leaving Amazon, I had impression this was a successful move, and RTL was steadily gaining traction in my team's projects.

There are however many more companies in the world using React, and they would vastly benefit from ditching Enzyme too! Let's have an honest discussion about how the React world has changed in past 5 years, and why Enzyme should be deprecated.

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