React Tutorial: Components, Hooks, and Performance

In recent years, React has established itself as the most popular library in the JavaScript universe. However, rather than rest on its laurels, the React team is still working hard to make it better. In this tutorial, the second of a two-part React tutorial series, Toptal JavaScript Developer Kamil Jakubczak takes a closer look at some of its features, including hooks.

Use React.memo() wisely

Users enjoy fast and responsive user interfaces (UI). An UI response delay of less than 100 milliseconds feels instant to the user. A delay between 100 and 300 milliseconds is already perceptible.

React Spaces

React Spaces allow you to divide a page or container HTML element into spaces. These spaces know how to behave in relation to each other and can also be divided into further nested spaces.

Shallow Testing Hooks with Enzyme

It’s easy to dive right into using hooks – until you try to test your fancy new components. If you’re used to using Enzyme’s shallow rendering, you’re going to find yourself really confused when none of your tests pass, even though everything’s working perfectly in your browser. Don’t worry! The problem probably isn’t with your code, and it doesn't take much to get those tests working again.

Do React Hooks Replace Redux?

In my view, there is little overlap between hooks and Redux. Hooks didn’t give us magical new state capabilities. Instead, it enhanced the API for things we could already do with React. However, the hooks API has made the native React state API a lot more usable, and because it’s easier than the class model it replaces, I use component state a lot more than I used to when it’s appropriate.

How to fix the ugly focus ring and not break accessibility in React

Creating beautiful, aesthetic designs while maintaining accessibility has always been a challenge in the frontend. One particular barrier is the dreaded “:focus” ring.