React Best Practices

React.js tips from top React developers and engineers.

How to optimize performance to deliver an awesome user experience.

Here’s a couple of lessons I’ve learned about how not to build React components. These are things I've come across over the past couple of months and thought they might be of interest to you if you’re working on a design system, especially one with a bunch of legacy technical decisions and a lot of tech debt under the hood.

There is very little guidance on how to organize front-end applications in the world of React. The truth is that we can do better. Let’s take a look at one pattern you might consider using to architect your site.

The difference between React.createElement and calling a function component directly.

The KendoReact team curated the top productivity tips of 20+ React experts. Includes tips from Emma Wedekind, Kent C. Dodds, vjeux and many more.

A simple principle that can drastically improve your reusable code

In this article I’ll attempt to share a few tips & optimization tricks that you should consider when aiming to minimize the footprint of your React app.

How state colocation makes your app not only more maintainable but also faster.

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.

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

How to start optimizing your React app renders

Let's explore some hook gotchas and how to avoid them.

Today's post lays out my current thinking and approach to structuring React applications: the folder structure I use, my naming conventions, where I write tests, and so on.

One key factor for positive user experience is speed i.e how much time a user has to wait to first see contents from your website or application.

Without using React.memo, PureComponent, or shouldComponentUpdate.

If you aren’t measuring, you can’t even know if your optimizations are better, and you certainly won’t know if they make things worse!

The other day I was dealing with some laggy UI on a project and discovered React.memo as a way of fixing it. I don’t know how long React.memo has been a thing but it’s new to me and it’s amazing.

There are important design principles that every component should strive to follow. But I don’t think style guides capture those principles well. We’ll talk about style guides first, and then look at the principles that really are useful.

In this guide, I want to give React beginners an historical overview of different React Components and React Patterns. The goal is to give clarity about what React Component Types developers have at their disposal, which are still used in modern React applications, and why some of them are not used anymore.

This article is an opinion piece for what file structure has worked best for me and my teams after our own trial and error. You are more than welcome to adjust it for your own use case.

What it is and how to add it to your app.

This article will cover how you can continue to work on the same React apps that you build, but to consider adding a number of optimizations to it. The key point here is to try and build your React site so that more people can use it.

The second part of our React tutorial series will introduce you to more advanced concepts and demonstrate a few tricks that should save you time. It will also showcase the potential of hooks in React.

5 simple tips to improve the performance of a React application

How to make sure everyone get the right experience in your app

One of the most common issues that affects performance in React is unnecessary render cycles. React Components will re-render whenever their parents update, automatically, even when their props don’t change.

React is Just Components ™️ - but there are tons of ways to make them. Let's dive in!

Splitting a Single Page Application into layers has a set of advantages

Do your React apps need a performance boost? Check out these top five things you can do today to increase the performance of your apps.

Profiling your React components may be the most important thing you can do to improve performance. Learn how to do this using the browser's User Timing API.

In this blog post, I’ll go over some tips and tricks and eventually the best practices I’ve deployed for one of my apps coded in React Native

A React performance optimization tutorial which shows you React's shouldComponentUpdate lifecycle method and React's PureComponent API to prevent the rerendering of (child) components.

I want to walk through a new concept called Render Caching. This is a cool trick that can give users an instant performance boost just like that of SSR without having to resort to writing code on the server.

Utilizing Brad Frost’s Atomic Design principles to better architect React applications.

When building React components or components in general we sometimes need to consider that a certain property should or should not be displayed.

This is the first post of a three part series explaining some lessons learned running React in production.

I’ll talk about subscriptions first, and then we’ll move on to handling asynchronous task cancellation to avoid memory leaks in React (the main purpose of this article).

The general belief among SEO experts is that you should implement server-side rendering on your page. This way Google’s (the most popular search engine right now) web crawling bot can have access to your HTML code and index it.

In this article we’ll be covering some lessons I learned regarding this mindset from my personal experiences with React.

React 15.4.0 introduced a new performance timeline feature that lets you see exactly when components get mounted, updated, and unmounted. It also lets you visualize component lifecycles in relation to each other.

There can be no doubt that React has revolutionized the way we build user interfaces. It’s easy to learn and greatly facilitates creating reusable components that offer your site a consistent look and feel.

This article mainly focuses on implementing some good practices I follow when building large scale applications with React and Redux.

I’ve had a hard time finding good code style guidelines to keep the mix of JSX and JS clean and readable. I've been coming up with my own style guides that I'd love to share.

We are going to learn from the collective wisdom of thousands of programmers and developers who learnt those things the hard way.

A simple 5 minute walkthrough to easily organize, share and sync your favorite React components between all team’s your different projects and applications.

If proper attention is not given, a reasonably large react app can quickly succumb to a mess of stateful components, each with a mind of it’s own, quickly violating the react way of doing things.

That said, over the last few years of writing React components I’ve come up with a set of guidelines that I tend to follow, and in this post I wanted to share those below.

I am creating this resource to write detailed instructions for the common problems beginner React.js learners usually face so that I can refer them to here instead of typing it over and over.

Make your React app fly!

I am creating this resource to write detailed instructions for the common problems beginner React.js learners usually face so that I can refer them to here instead of typing it over and over.

This article will give you a quick introduction to certain techniques I use while designing my components, and show you how you can do the same.

A review of common React performance pitfalls and how to avoid them.

This article will focus on clean code practices as they apply to modern React software development. I’ll also talk about some of the “sugar” that ES6/ES2015 brings to the table.

This blog post is a case-study in the specific techniques I tried, and how well they worked.

You are probably really tired of me saying this, but fast DOM performance is one of the biggest feathers in React's cap.

Some of my learnings are subjective, but I thought they may help other people to learn React and avoid making the same mistakes.

In this article we will discuss the possible evolution steps of a simple React application, featuring some clickable counters.

There are many ways we can structure components. We want components to be reusable, but only to the degree that is reasonable.

Are React’s Functional Components Worth The Cost?

I’ll be getting through the first lecture of a workshop, showing off some cool new OSS, and invariably somebody says: “inline functions? I heard those are slow.”

Standardize your React development with these key decisions

Luckily, reliable components have common characteristics. Let's study these 7 useful criterias, and detail into case studies.

Are we missing out on the real benefits of React when using large components?

How to improve React performance in production and avoid common mistakes.

React components have a lot of power and flexibility. With so many tools at your disposal, it is incredibly easy for components to grow over time, become bloated and do too much.

In my last post, I discussed how unnecessary render cycles can negatively affect performance in React apps. However, in a large-scale app, it can be tricky to know which components are updating at any point in time.

One of the most common issues that affects performance in React is unnecessary render cycles. By default, React components will re-render whenever their parent renders, even if their props didn’t change.

An article to showcase the usage of the session storage and local storage in React to persist your local state, to cache it for browser reloads and to make it expire.

The good news is: If you care about performance, it’s fairly easy to make any React application super fast.️ Here’s how.

I’ll focus on using HOC and Functional Stateless Components to achieve reuse.

Over the past year at MuseFind, our team has written a lot of React components. We’ve gradually refined our approach until we’re happy with it. This guide represents our suggested best practices.

The team spoke with hundreds of developers about how they build and scale their web applications, and I want to share some things we learned along the way.

In this talk, I will go through some of the best practices you should consider from setting up a project, challenges most react native app faces to scalability. At the end of this talk, you will go home with practices you can apply to your projects and feel more confident doing so.

What are the essentials that every React developer needs to know today in order to keep up with the times? React has come a long way since its early days. New features are constantly added, and with them code patterns emerge.

You noticed a button in your app is in the wrong color. You fix it and merge the code to your production branch. Congratulations! now it’s time for your code to meet your users.

Tools and strategies for growing your state-of-the-art React PWA to a global scale.

At DAZN we battle-tested the Microfrontends architecture leveraging feature like blue-green deployments in the frontend, framework agnostic teams and drastically reduced cross-team dependencies.

With the benefit of hindsight, let's talk about the technology choices I regret and the lessons I have learned.

In this talk we’ll look at specific techniques you can use today to keep your app from turning into that infamous ball of mud.

In this talk you’ll find out how some commonly used patterns have an adverse effect on the speed of your app, and how to avoid using them. We’ll mainly explore UI and state management but we’ll also dive into some native-specific issues and look at how to prevent them.

The granular approach of designing components helps us to build reusable and encapsulated features. On another hand, it also makes a codebase much more complex by extra added abstractions and drastically increased amount of source code files. How can we navigate the maze of hundreds of React-atoms now?

If you want to improve the accessibility of your React apps but you don't know how or where to start, this talk is just what you need. Manuel shares 12 tips that will help you build web sites and applications that can be used by anyone. Each tip fits on one slide and you'll be able to put them into practice right away without having to learn anything fundamentally new.

In this talk, we will explore how we can make adaptive and intelligent UIs in React that learn from how individual users use your apps, and personalize the interface and features just for them, in real-time.

In this talk I will explain this paradigm in the context of developing a React app. Furthermore I will show how changes can be made to the app without having to understand how old code was written; hence I describe this method as "append-only development".

In this talk you’ll find out how some commonly used patterns have an adverse effect on the speed of your app, and how to avoid using them. We’ll mainly explore UI and state management but we’ll also dive into some native-specific issues and look at how to prevent them.

If you use React and need to display large lists of data efficiently, you may be familiar with react-virtualized. It's a windowing library by Brian Vaughn that renders only the items currently visible in a list (within a scrolling "viewport").

It’s finally happened: your React project has grown from fledgling side-hobby into serious web application! Will your architecture hold up to your project’s new found scale, or will you let it become an incomprehensible jumble of tangled wires? Come learn simple, practical, and tangible patterns for making your current (and next) React application more composable, easier to reason about, and just overall more pleasurable to work with!

The virtual DOM was a fantastic innovation. It brought about a much more productive way of writing web applications by allowing us to write our views in a declarative manner. This big benefit has little to do with performance of the initial render. Instead, it is the process of updating the DOM to reflect changes in your state has become much faster. This process of bringing the DOM in sync with the state is often referred to as DOM reconciliation.

React Native is amazing at helping you deliver in production live apps very quickly. But to get there, you sometimes have to cut corners. Once you have a successful app loved by thousands of users, you start to wonder how to tackle performance issues. Figuring out where to start can be tricky. This will be a practical guide about tools that can help you identify bottlenecks and quickly find ways to increase your app’s performance.

One of the crucial elements of performance is to ship relevant content to your users as soon as possible. But in modern web applications, figuring out what to ship and what to prioritize can be hard. Framework driven applications have the big disadvantage of being pretty heavy for the initial load. We will start from understanding how the browser works, then we will explain what the critical rendering path is and how we can optimize it.

Someone asked me a question about destructuring custom `this` methods in the `render` method. I'm going to answer their question in addition to talk about why I don't like using methods like that at all.

Large applications cannot be structured the same way as small applications. Many good decisions you make for a small application suddenly become bad once it grows in code and organization size. Let me walk you through a number of challenges and good decisions for scalable applications.

Someone wanted my feedback on an icon component. Here it is!

We want to make sure that when we ship new code, our users can use the application. The best way we've found to do that is to write automated tests that run before we deploy a new version of the app. But if our tests aren't doing exactly what the user will do, then how do we really know that things will work when users interact with our apps?

One of the things I love about React is how easy it is to encapsulate UI code into a component. I love this because it makes reuse of those components easy. But is it simple? I've made my fair share of components that had to accept a bunch of props to handle a growing list of different use cases resulting in a complex render function full of conditional statements and a confusing API for people using this "reusable" component.

I want to talk about building apps (of all kinds), the kind of problems we often confront, and how we can embrace immutability to rethink established best practices.

In this video I give 5 common problems React beginners might face.

React gave us a great tool for building UIs declaratively by abstracting away the details of putting DOM trees together and adding events to them. When you use React, you rarely have to use imperative methods like appendTo and addEventListener directly. But what about the rest of the DOM's imperative APIs? In this talk, we'll explore how we can extend what React taught us about making the DOM declarative to other imperative APIs as well!

Learn 8 things that will make you a better React Dev

In this talk I will be detailing how to create custom renderers using the new Fiber architecture, and showing examples exploring some fun things you can do with them.

In this React.js Tutorial, I show you how to convert a normal component into a functional stateless component.