The React Newsletter

Hi <<First Name>>,

useReducer vs useState in React

Since React Hooks have been released, function components in React can use state and side-effects. There are two main hooks that are used for modern state management in React: useState and useReducer. This tutorial doesn't explain both React hooks in detail, but explains their different use case scenarios. There are many people who ask me whether to use useState or useReducer; that's why I thought getting together all my thoughts in one article is the best thing to deal with it.

Read more

Building a React component as an NPM module

React is a great way to write reusable components which we can use to create complex UI. NPM provides a great way to write reusable modules and publish them online so they can be used by millions of developers from all around the world.

So why don’t use these two to write and publish React components so other developers can simply install and use our components.

Rest, GraphQL & gRPC

Watch video

Handling API request race conditions in React

Many blog articles talk about loading api/async data in React apps, with componentDidMount, useEffect, Redux, Apollo…

Yet, all those articles are generally optimistic, and never mention something important to consider: race conditions could happen, and your UI may end up in an inconsistent state.

Improving your mental model of useEffect

Hooks landed in React a few months ago, and there has been a lot of excitement around them in terms of figuring out how to best use them, best practices, and how they map to current concepts in React and the lifecycle.

Read more

React Virtual DOM Postmortem

Now that your app is mounted to DOM let’s dive deeper.

Virtual DOM & Diffing (“Reconciliation”) Algorithm

To build React apps you probably don’t <Really /> have to know the inner bells and whistles. But… I decided to create this tutorial — if for any reason — to get a better grasp of what’s going on in React under the hood… visually.

The DIFFing algorithm looks for differences between two virtual DOM. Wait. Two virtual DOMs? I thought there was just one. Well, React compares the previous virtual DOM with the newly generated one. Only if changes are detected it finally updates your browser’s DOM:

React video courses

Because I need to pay my bills 😉