The React Newsletter

Hi <<First Name>>,

Always useMemo your context value

Why and how you can optimize your context provider's value to avoid performance issues

NOTE: I want to add that the times it's important to optimize your context value is when a certain combination of the following conditions are met:

Your context value changes frequently
Your context has many consumers
You are bothering to use React.memo (because things are legit slow)
You've actually measured things and you know it's slow and needs to be optimized

If that explains your situation, then read on (and don't miss the alternative solution which is honestly probably better anyway).

When I explained how I create and use context for my React applications, I touched briefly on the importance of using React's useMemo hook.

Deep dive: How do React hooks really work?

Hooks are a fundamentally simpler way to encapsulate stateful behavior and side effects in user interfaces. They were first introduced in React and have been broadly embraced by other frameworks like Vue, Svelte, and even adapted for general functional JS. However, their functional design requires a good understanding of closures in JavaScript.

In this article, we 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, we arrive at how Custom Hooks naturally arise.

Fun with React Hooks - Michael Jackson and Ryan Florence

Michael and Ryan from ReactTraining.com will give a joint presentation covering hooks and some of the concepts from their training.

Deepen your fundamental understanding of React's composition model and dig into some advanced, real-world use cases like animating route transitions, manage data caching, and real-time updates.

We'll also be covering React's latest feature, hooks, in depth. Hooks promise to simplify your React code and make building clean, reusable abstractions easier and faster than ever.

Watch video

Advanced blog system in Gatsby

Today, static site generators are one of the most popular ways to build websites. You get a complete build done quickly without complications, hosted cheaply or even for free. That’s why the community started creating different ways to build static site generators

The React community has a couple of tools/frameworks that can generate a static website. My favorite, and yours probably too, is Gatsby: “a free and open source framework based on React that helps developers build blazing fast websites and apps.”

Accessibility auditing with react-axe and eslint-plugin-jsx-a11y

Your React site is not progressive if it's not accessible. Auditing during development can help you spot any issues.

react-axe is a library that audits a React application and logs any accessibility issues to the Chrome DevTools console. It uses the open-source axe testing library to flag any issues and their severity.

eslint-plugin-jsx-a11y is an ESLint plugin that identifies and enforces a number of accessibility rules directly in your JSX. Using this in combination with a tool that tests the final rendered DOM, such as react-axe, can help you find and fix any accessibility concerns on your site.

React Hooks in TypeScript

Released in React v16.8.0, React Hooks address a number of issues with React, and perhaps most notably for TypeScript users, provide a first-class solution for reusing stateful logic, built with typing in mind. Due to this, a lot of the types for Hooks can be inferred, but in some cases explicit types must be set.

This article assumes some knowledge of the Hooks that are available. For this refer to the React documentation.

React video courses

Because I need to pay my bills 😉