Latest Articles & Tutorials

There are two React hooks, useEffect and useLayoutEffect, that appear to work pretty much the same.

Drag and drop UI has become an integral part of most modern applications. It provides richness in UI without comprising the UX.

React team launched a new version of the React Dev Tools (v4) a few weeks ago and it’s fantabulous. It gives you debugging superpowers to navigate through your tree, trace data flow, spot weak links and optimise for perf.

Expo SDK v35.0.0 is out today and is based on React Native 0.59.8, the same React Native version as SDKs 33 and 34.

However you put your app together, it’s always a good idea to ensure your components and state changes are triggering re-rendering as expected. That’s especially important if you have costly components to re-render.

React introduced hooks one year ago, and they've been a game-changer for a lot of developers. There are tons of how-to introduction resources out there, but I want to talk about the fundamental mindset change when switching from React class components to function components + hooks.

Keep components in a monorepo. Build, test, publish and update independent components and their dependents. Get adoption.

Certain mistakes have become pretty common among developers working on React applications. These mistakes may be the result of an oversight, pressure to meet a deadline, or a lack of experience with React/JavaScript.

In this post, we’ll take a closer look at some of the best ways you can go about testing your React applications.

Gatsby ships with some incredibly powerful plugins for image manipulation, performing operations that would normally require a designer (or an external 3rd-party software) to perform.

We’ve been working on several improvements to React Navigation, such as improving animation performance with gesture-handler and reanimated libraries, migrating to TypeScript, and more.

I've been testing several React animation libraries and Framer Motion made the highest impression on me. In this post we'll explore how to use Framer Motion to animate Next.js page transitions.

Last week, we took a closer look at the useEffect Hook, but we still have yet to touch on one of the function's most important features: the dependency array.

Here we will explore an opinionated approach to setting up Electron: TypeScript, React and Webpack. We’ll start with a basic Electron project and progressively build it into an enterprise-ready solution.

This is how you separate infrastructure, content, style, layout, and state from each other.

In this tutorial we will go through and setup a full stack search engine with React as the front end, Node and Express for the server, and PostgreSQL for the database.

How to use the React DevTools and React's profiling build to properly profile a production app.

By the end of this article, you should be able to manage your application’s state in a predictable manner without any third-party package.

Run Redux in Web Workers

In learning React, one of the first challenges I faced was figuring out state management. State is a vital part of any application that has more complexity than a simple blog or brochure site.

How to use Hover, Focus, and Active states in your universal app.

In this article, we’ll cover the following: Context: basic usage and strategies for injecting data anywhere in your component tree; Refs: what they are and why our use case calls for them.

An article providing concrete examples of why and how one uses most of the React Hooks.

When interacting with a backend, a JAMstack app can do everything a mobile app can do, without the tyranny of the app store. This is a fundamental insight that goes as deep as the fight for a more open, secure, decoupled, faster web.

In this tutorial I will walk you through a fairly complex production-level AWS deployment setup from scratch. I will assume very little prior knowledge about AWS and assume you are a beginner.

Have you ever been tasked with extending a component that has a ton of branching logic, and realize that the component requires some state to make that new feature you’re adding come to life?

Image optimization — at least in my experience — has always been a major pain when building speedy websites. Balancing image quality and bandwidth efficiency is a tough act without the right tools.

Rendering is the heartbeat of a React application. When something changes (props, state), the component tree re-renders, reflecting that change in the user interface. But what happens when we need to do something after a render? As you might imagine, there's a Hook for that.

Now that the mobile apps have been live in production for over a year, we’d like to share our development experience with the broader community, including a deep dive into a few internal tools powered by Expo JavaScript bundles and app manifests.

Why duplication in state management is a recipe for disaster

I decided to build my own simple hamburger with sidebar. No pickles, onions or ketchup. Just meat, bun, and a side of menu items.

After making an update to your component’s state using either useState or this.setState, parts of the component re-renders depending on the update.

Stories are now a trending feature of most social media applications, including WhatsApp, Snapchat, Instagram, and others.

How to start optimizing your React app renders

Before I detail my current frustrations with Hooks I do want to state for the record that I am, for the most part, a fan of Hooks.

You could say this topic has been done to death, but lately I’ve started using a technique that I don't recall having come across elsewhere.

In this post, we'll explore how to create a Next.js app with one global layout and multiple (dynamic) sub-layouts for different sections of the website.

For this article, we will be working with a pattern for managing state using two very important Hooks, useContext and useReducer, to build a simple music gallery app. The application will have only two views: one for login and the other to list the songs in that gallery.

Making Use of Async Generators

The onChange event in React detects when the value of an input element changes. Let’s dive into some common examples of how to use onChange in React.

Zeit has great documentation, but it took me a while to understand the difference between environment variables (secrets) on the serverless side vs how to get env vars exposed and available to the React code which runs client side, in the browser.

This article covers the way me and the team I am working with migrate a React application from JavaScript to TypeScript over the last couple of months and onwards. The goal is to help developers with the same idea to get a hold on where to start.

We are going to create a simple React component library which we can publish via npm and use it in other React projects.

Lately, I’ve been trying to level up my JavaScript and React/React Native skills so I’ve been making silly side projects. The past week or so I have been working on a random cat gif app using the Giphy API in an Expo project.

Form Development in React comes down to three things: Data, Validations, and Submission. See how to handle these yourself or using Formik to make things simpler.

In this post, I'll try to uncover some interesting things about React which you, as a React developer would find fascinating. Let's start with the very start, the point of initialization.

Before, we went over how to create single animations with react-spring. Now we’ll be looking over the different methods for combining multiple springs for more complicated animations.

To make your web projects more interactive and user-friendly, you may find you want to add some additional features like notifications, or a spinner that shows a loading state.

We’ll learn how model-based testing can eliminate the need to manually write integration and end-to-end tests, by automatically generating full tests that keep up-to-date with an abstract model for any app.

One of the biggest pain points when developing an app is the tricky business of managing state. Many bugs are caused by things getting into unexpected states, or by race conditions. Finite state machines can help eliminate both types of bugs entirely, while providing a welcome, structured way to build components.