React Newsletter #157

6 tips for better React performance, a deep dive on how React hooks really work, and a closer look at React Memoize Hooks


Articles

6 tips for better React performance

This article walks through 6 tips for improving your React app's performance.

  • Utilize render bail-out techniques\r\n+ Avoid inline objects\r\n+ Avoid anonymous functions
  • Lazy load components that are not instantly needed
  • Tweak CSS instead of forcing a component to mount & unmount
  • Memoize expensive calculations

Deep dive: How do React hooks really work?

In this article, you'll reintroduce closures by building a tiny clone of React Hooks. This will serve two purposes – to demonstrate the effective use of closures, and to show how you can build a Hooks clone in just 29 lines of readable JS. Finally, you'll arrive at how Custom Hooks naturally arise.

A Closer Look at React Memoize Hooks: useRef, useCallback, and useMemo

As the title suggests, this post takes a deep dive into what Christian is calling the "Memoize hooks", useRef, useCallback, and useMemo.

React Hooks - A deeper dive featuring useContext and useReducer

The main purpose of this article is to help you get an understanding of useContext and useReducer and how they can work together to make React applications and their state management clean and efficient.


Sponsor

Get 40% off your entire Manning.com order!

Looking to make your web apps shine? Whether you use React every day, or are looking to build up your web dev skills with the latest modern techniques, at Manning Publications we’re always looking for ways to help developers grow. To help, we’d like to offer you 40% off everything in our entire catalog, including the following selection of books and video courses!

Just use the code reactnews40 when you checkout to save 40%. When you click the Add to Cart buttons below, we’ll enter the coupon code for you automatically.


Projects

React95

Refreshed Windows95 UI components for your modern React apps, because, why not?

wouter

A tiny 1KB alternative to React Router (with Hooks!)

react-usefetch

React hook for making isomorphic http requests.


made with ❤️ by ui.dev