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

The React Newsletter

Hi <<First Name>>,
 
React useRef Hook By Example: A Complete Guide

useRef is a built-in React Hook. Perhaps you have used it to access DOM nodes (If not, don't worry. It's covered in this post).

But do you know it can do way more? It's a hidden gem 💎. Trust me, it can become a powerful tool in your arsenal.

This is a deep dive into useRef. With an example-driven approach, this article covers:

  • What it is used for
  • Its mental model
  • Simple examples
  • More practical examples
  • Anti-patterns
  • Related concepts
    • ref and useRef
    • useRef vs. useState
    • useRef vs. createRef

Read more
 
6 React Best Practices For 2021

Writing clean and readable code is essential to improve your code’s quality. On top of that, clean code is easier to test. There’s no reason not to spend five extra minutes refactoring your code to make it more readable.

This article looks at six React best practices for 2021 to improve your code. We’ll cover the following items:

  1. Make use of event.target.name for event handlers
  2. How to avoid manually binding event handlers to this?
  3. Make use of React hooks to update your state
  4. Cache expensive operations with useMemo
  5. Decouple functions into functional functions to improve code quality
  6. How do you create custom hooks in React?

Read more
 
Scalable React Development for Large Projects
Scaling React development across multiple teams can be incredibly difficult. Teams need to share core functionality while staying autonomous. Changes need to propagate through many projects while being tested. [Nx](https://nx.dev/​) is an open-source toolkit that allows organizations to scale development more easily than before! Nx makes setting up Cypress, Prettier, Storybook, Next.js, and Gatsby faster than ever. You can also develop full-stack by using Node frameworks like Apollo and Nest.js and share code between frontend and backend. In this talk you’ll learn how large organizations like Facebook, Microsoft, and Google are able to successfully scale across multiple teams, business units, and products.

Watch video
 
How to Use useCallback to Write Better React Code

React hooks, a new method to manage state in functional components, was introduced in React v16.8. With hooks like useState , useEffect , and others, developers could finally work with side effects in functional components.

In this article, we’ll be taking a close look at useCallback , one of the introduced React hooks, and how we can use it to write better React code.


Read more
 
React Performance Optimization Tips

In this post, we will look into how we can improve the performance of React apps that need to render a lot of components on the screen.

We generally consider using pagination or virtualization for most of our apps to provide a better user experience and that works for most of the use cases, but what if we have a use case where we need to render a lot of components on the screen while not giving up on the user experience and performance.

For the demonstration, I have considered a simple app that renders 30k squares on the screen, and we update the count when the squares are clicked. I am using react 17.0.0 and functional components with hooks.

Here is the preview of the app. It has an App component and a Square component. There is a noticeable lag on clicking the squares.


Read more
 
How Lyft is Migrating 100+ Frontend Microservices to Next.js

In 2019, Lyft’s frontend architecture needed a reckoning. We were growing quickly as a company, and new teams were creating new software systems daily. At that point in time, we were generating new frontend services from a service generator template — complete with a copy of our bespoke, zero-config frontend build platform. Having such an easy means of service creation led to an explosion of new services with heterogeneous code built upon our React-based frontend architecture.

At the same time, we were running into headwinds trying to maintain our own frontend platform — an internal set of Webpack configurations, ESLint libraries and framework code — and finding ourselves bogged down troubleshooting cryptic build errors and generally finding our productivity sapped by such support requests. Because codebases began to diverge (as they do in microservice architectures), our developers found the task of upgrading to new versions of our frontend platform to be time-intensive and frustrating.

With over 100 frontend services and nearly as many frontend engineers, it was clear something needed to be done in order to ensure that our platform was maintainable for Lyft’s growth.


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