The React Newsletter

Hi <<First Name>>,

Rewriting Facebook's 'Recoil' React library from scratch in 100 lines

Recoil is a slick new React library written by some people at Facebook that work on a tool called “Comparison View." It came about because of ergonomics and performance issues with context and useState. It’s a very clever library, and almost everyone will find a use for it - check out this explainer video if you want to learn more.

At first I was really taken aback by the talk of graph theory and the wondrous magic that Recoil performs, but after a while I started to see that maybe it’s not that special after all. Here’s my shot at implementing something similar!

Before I get started, please note that the way I’ve implemented my Recoil clone is completely different to how the actual Recoil is implemented. Don’t assume anything about Recoil from this.

Use redux-like middleware for useReducer in React

If you have used Redux before, you would be aware of the concept of middlewares. Now that useReducer has become a commonly used react hook, we might want to replicate the idea of middleware for the useReducer hook as well.

If you do not know about middlewares, middlewares are functions that run either before or after a state transition has taken place by the reducer. It enables us to opt-in for features such as logging, crash reporting, making asynchronous API requests, etc.

In this post, we will be creating a middleware for useReducer react hook. If you want to read more about the hook and reducers in general, refer to our previous post about the useReducer React hook.

Redux is losing popularity, now what?

Is Redux Dead? Should you ignore it and find other solutions for your new projects? What if you are already working on an existing project that uses Redux? Should you refactor to get rid of it? In this new format of ReactCasts, I'll contrast the useReducer+context approach, mention some new libraries such as Redux-Toolkit and Zustand and share some concrete advice so you can make a better-informed decision.

Watch video

5 Reasons to Use TypeScript with React

TypeScript is a superset of JavaScript which primarily provides optional static typing, classes, and interfaces.

Over the past few years, TypeScript has gain immense popularity among frontend developers. Improved maintainability, code consistency, and future browser support are few reasons behind its success. Though many other frameworks and libraries adopt TypeScript by default, React remained neutral, giving the developers the option to choose between TypeScript and JavaScript.

In this article, I will be going through 5 strong reasons for you to consider TypeScript for React applications. Besides, I will also highlight common challenges for you to better prepare for the journey.

Also, here’s a Tip to those who want to introduce TS but don’t have the time or energy to do so: Using Bit (Github) you can create, compose, and publish decoupled React components with or without TS. This means you can start introducing TS into an existing React app, one component at a time.

useEffect vs useLayoutEffect

Both of these can be used to do basically the same thing, but they have slightly different use cases. So here are some rules for you to consider when deciding which React Hook to use.

Read more

What is Render in React and How Do You Force it?

What exactly is Render in React, how can we force a class or functional component to re-render, and can it be done without calling setState?

The short answer to the question of if you can force a React component to render (and without calling setState) is yes, you can. However, before we get to know how, let’s clear up a few important things first.

From the early days of React, developers worried about unnecessary re-renders of components and tried to optimize them. I can already tell you that premature optimization is not the best idea because React is very fast, and more often the problem is in the way the code is written. Therefore, worry about it when there really is a visible problem. The fact that a component did re-render doesn’t necessary mean that DOM was actually modified. If that is a surprise to you, then bear with me.

Let’s start with an explanation of what exactly happens when we update state in React.

React video courses

Because I need to pay my bills 😉