React Newsletter #180

News

React 16.10.0 released

React DOM

• Fix edge case where a hook update wasn't being memoized.
• Fix heuristic for determining when to hydrate, so we don't incorrectly hydrate during an update.
• Clear additional fiber fields during unmount to save memory.
• Fix bug with required text fields in Firefox.
• Prefer Object.is instead of inline polyfill, when available.
• Fix bug when mixing Suspense and error handling.

Scheduler (Experimental)

• Improve queue performance by switching its internal data structure to a min binary heap.
• Use postMessage loop with short intervals instead of attempting to align to frame boundaries with requestAnimationFrame.

useSubscription

• Avoid tearing issue when a mutation happens and the previous update is still in progress.

---

Articles

Test Driven Development (TDD) with React, React Testing Library, and Jest

Test Driven Development (TDD) is a reversal in traditional thinking and coding processes. Rather than writing code, and then writing tests to verify that code, the process is reversed. This post outlines the pros and cons of utilizing TDD for developing React applications and explains how to try it out yourself.

I created the exact same app in React and Vue. Here are the differences.

This post highlights some of the subtle (and not so subtle) differences between building a basic to-do app in Vue vs. React (using React Hooks).

Keeping global state management sane

Maintaining a big and complex react app is not for amateurs. Whatever you may choose to manage your app state, chances are that it's hard to pick up, like redux, or really convoluted, like making yourself a service layer. With the goal of making it easy for new developers to jump into our projects, at Labcodes decided it was time to give this problem a little more thought. Their answer was rel-events.

---

Tutorials

Demonstrating Reusable React Components in a Form

This is a good beginners' level guide to working with reusable React components, specifically how to use them to build a login form

---

Sponsor

Easily share components across apps with bit

Bit helps you share your React components between projects,and collaborate to build your applications faster as a team. Just let Bit pack and isolate your components, so you can run and develop them anywhere. Give it a try.

---

Projects

Material-UI v4.5.0 Release

Highlights of the new release include the ability to add startIcon and endIcon props for the button and the ability to adjust table table, menu, and chip styles to match spec (among other things).

use-axios-client

his is an Apollo-inspired library for REST requests using axios and React hooks. This library's purpose is to abstract away having to manually manage the state of your network requests (loading, resolved response, rejected response) along with a few other utilities like a function to cancel inflight requests and a function to refetch for new data.

Nx Workspaced course by Nrwl

This is a free course on Nrwl Connect that shows how to build an Nx monorepo with examples in React and Angular.

---

Videos

Building a newsreader usng the HackerNews API and React

This tutorial walks through how to build a small React app that calls the Hacker News API using React Memo, Axios, styled components, and React Testing Library.

---