React Best Practices

Articles & Tutorials

Common Mistakes React Developers Make – And How to Fix Them (freecodecamp.org)
May 03, 2021
In this article, we'll see some of the common mistakes that React developers make, and how you can avoid them.
  • Yogesh Chavan
How to Write Better React Components (freecodecamp.org)
Jan 20, 2021
In this article, we'll explore various ways we can write shorter, simpler and easier to understand React code. So let's get started.
  • Yogesh Chavan
5 React Shortcuts That Will Instantly Boost Your Productivity (freecodecamp.org)
Jan 19, 2021
To become a better React developer, you don't always have to learn an entirely new, challenging skill. You can instantly improve your React code in a few minutes by using the powerful features your development tools make available.
  • Reed Barger
Requisite React (epicreact.dev)
Sep 11, 2020
When was the last time you saw an error and had no idea what it meant (and therefore no idea what to do about it)? Today? Yeah, you're not alone... Let's talk about how to fix that.
5 Recommended ReactJS Tips and Best Practices (blog.bitsrc.io)
Aug 12, 2020
React.js tips from top React developers and engineers.
  • Nicolas Adrien
Methods Of Improving And Optimizing Performance In React Apps (smashingmagazine.com)
Jul 16, 2020
In this tutorial, we will discuss various methods of optimizing performance in React applications, and also the features of React that we can use to improve performance.
  • Shedrack Akintayo
React Best Practices & Tips Every React Developer Should Know Pt.1 (medium.com)
Jun 24, 2020
In this post, I will show you a handful of React best practices that will help you become a better React developer. Learn these practices so you can start writing a better React code.
  • Alex Devero
Blogged Answers: React Components, Reusability, and Abstraction (blog.isquaredsoftware.com)
Jun 21, 2020
Thoughts on the tradeoffs of trying to write "reusable components".
  • Mark Erikson
A Guide to Accessible Interactive Components using React Libraries (a11ywithlindsey.com)
May 29, 2020
I’ve wanted to write this blog post ever since I wrote a11y and JS - A Seemingly Unconventional Romance. I love JavaScript, and my job is to code in React. I often observe folks (rightly) critique that React Apps are inaccessible.
  • Lindsey Kopacz
React.js Best Practices and Tips by Toptal Developers (toptal.com)
Mar 27, 2020
This resource contains a collection of React.js best practices and React.js tips provided by our Toptal network members.
  • Leonardo Andrés Garcia Crespo
5 Recommended ReactJS Tips and Best Practices (blog.bitsrc.io)
Mar 24, 2020
React.js tips from top React developers and engineers.
  • Adam Raphael
10 Ways to Optimize Your React App’s Performance (blog.bitsrc.io)
Jan 15, 2020
How to optimize performance to deliver an awesome user experience.
  • Chidume Nnamdi
Two Lessons I Learned From Making React Components (css-tricks.com)
Dec 18, 2019
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.
  • Robin Rendle
Domain-Driven Design With React (css-tricks.com)
Dec 16, 2019
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.
  • Adam Conrad
Don't call a React function component (kentcdodds.com)
Dec 09, 2019
The difference between React.createElement and calling a function component directly.
Tried & True Tips from 25 React Experts to Make You More Productive (telerik.com)
Nov 19, 2019
The KendoReact team curated the top productivity tips of 20+ React experts. Includes tips from Emma Wedekind, Kent C. Dodds, vjeux and many more.
    Inversion of Control (kentcdodds.com)
    Nov 19, 2019
    A simple principle that can drastically improve your reusable code
    10 Tips & Tricks for smaller bundles in React apps (itnext.io)
    Sep 27, 2019
    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.
    • Aggelos Arvanitakis
    State Colocation will make your React app faster (kentcdodds.com)
    Sep 24, 2019
    How state colocation makes your app not only more maintainable but also faster.
    10 mistakes React developers make (blog.logrocket.com)
    Sep 19, 2019
    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.
    • Ogundipe Samuel
    Your React App Is a Mess Before You Even Know It (codeburst.io)
    Sep 17, 2019
    This is how you separate infrastructure, content, style, layout, and state from each other.
    • Frank Zickert
    5 Tips to Help You Avoid React Hooks Pitfalls (kentcdodds.com)
    Aug 05, 2019
    Let's explore some hook gotchas and how to avoid them.
    Structuring React applications (javascriptplayground.com)
    Jul 08, 2019
    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.
    7 optimization techniques in React (blog.logrocket.com)
    Jun 30, 2019
    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.
    • Ogundipe Samuel
    One simple trick to optimize React re-renders (kentcdodds.com)
    Jun 24, 2019
    Without using React.memo, PureComponent, or shouldComponentUpdate.
    Ending the debate on few anti-patterns in React (medium.com)
    May 11, 2019
    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!
    • Nitesh Soni
    Fixing laggy UI with React.memo (swizec.com)
    Mar 18, 2019
    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.
    Writing Resilient Components (overreacted.io)
    Mar 16, 2019
    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.
    React Component Types: A complete Overview (robinwieruch.de)
    Mar 12, 2019
    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.
    Optimal file structure for React applications (medium.com)
    Mar 05, 2019
    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.
    • Charles Stover
    How to Enable React Strict Mode (kentcdodds.com)
    Mar 04, 2019
    What it is and how to add it to your app.
    Progressive React (houssein.me)
    Feb 20, 2019
    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.
    • Houssein Djirdeh
    React Tutorial: Components, Hooks, and Performance (toptal.com)
    Feb 18, 2019
    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.
    • Kamil Jakubczak
    Yeah hooks are good, but have you tried faster React Components? (medium.freecodecamp.org)
    Feb 15, 2019
    5 simple tips to improve the performance of a React application
    • Seif Ghezala
    Achieving Accessibility in React Applications (blog.bitsrc.io)
    Feb 14, 2019
    How to make sure everyone get the right experience in your app
    • Nwose Lotanna
    Improving React Application Performance by Avoiding Unnecessary Updates (itnext.io)
    Feb 05, 2019
    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.
    • Marcello Marques de Oliveira
    How to create components (react.christmas)
    Dec 22, 2018
    React is Just Components ™️ - but there are tons of ways to make them. Let's dive in!
    • Kristofer Selbekk
    How to create a three layer application with React (medium.freecodecamp.org)
    Nov 23, 2018
    Splitting a Single Page Application into layers has a set of advantages
    • Cristi Salcescu
    Top 5 Performance Tips for React Developers (telerik.com)
    Oct 19, 2018
    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.
    • Blanca Mendizábal Perelló
    Profiling React Components with the User Timing API (telerik.com)
    Oct 15, 2018
    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.
    • Blanca Mendizábal Perelló
    Here are my favorite hacks for creating production level apps with React Native (medium.freecodecamp.org)
    Sep 18, 2018
    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
    • Mehul Mohan
    How to prevent a rerender in React (robinwieruch.de)
    Sep 11, 2018
    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.
    Render Caching for React (css-tricks.com)
    Sep 04, 2018
    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.
    • Atishay Jain
    Thinking About React, Atomically (blog.usejournal.com)
    Aug 29, 2018
    Utilizing Brad Frost’s Atomic Design principles to better architect React applications.
    • Katia Wheeler
    Make Your React Views Explicit! (medium.com)
    Aug 11, 2018
    When building React components or components in general we sometimes need to consider that a certain property should or should not be displayed.
    • Ali Sharif
    Real world React learnings, part one (blog.usejournal.com)
    Aug 02, 2018
    This is the first post of a three part series explaining some lessons learned running React in production.
    • Thiago Murakami
    How to work with React the right way to avoid some common pitfalls (medium.freecodecamp.org)
    Jul 30, 2018
    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).
    • Adeel Imran
    Testing SEO in React apps using Fetch as Google (blog.pusher.com)
    May 30, 2018
    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.
    The most important lessons I’ve learned after a year of working with React (medium.freecodecamp.org)
    May 30, 2018
    In this article we’ll be covering some lessons I learned regarding this mindset from my personal experiences with React.
    • Tomas Eglinskas
    Make React Fast Again [Part 1]: Performance Timeline (blog.logrocket.com)
    May 25, 2018
    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.
    • Ben Edelstein
    5 React Architecture Best Practices (sitepoint.com)
    Apr 25, 2018
    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.
    • Sebastian Deutsch
    React + Redux — Best Practices (medium.com)
    Apr 20, 2018
    This article mainly focuses on implementing some good practices I follow when building large scale applications with React and Redux.
    • Ravi Teja Kumar Isetty
    React Code Style Guide (css-tricks.com)
    Mar 27, 2018
    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.
    • Daniel Jauch
    How to NOT React: Common Anti-Patterns and Gotchas in React (codeburst.io)
    Mar 16, 2018
    We are going to learn from the collective wisdom of thousands of programmers and developers who learnt those things the hard way.
    • Arfat Salman
    How To Share React UI Components Between Projects And Apps (blog.bitsrc.io)
    Mar 12, 2018
    A simple 5 minute walkthrough to easily organize, share and sync your favorite React components between all team’s your different projects and applications.
    • Jonathan Saring
    How to Architect complex UI components in React (medium.com)
    Mar 09, 2018
    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.
    • Rohan Bagchi
    Habits of Successful React components (javascriptplayground.com)
    Mar 07, 2018
    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.
    React.js Frequently Faced Problems (dev.to)
    Feb 20, 2018
    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.
    • Samer Buna
    React performance tips (medium.com)
    Jan 31, 2018
    Make your React app fly!
    • João Miguel Cunha
    React.js Commonly Faced Problems (edgecoders.com)
    Jan 18, 2018
    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.
    • Samer Buna
    How to write highly readable React code — 10 coding style tips (medium.freecodecamp.org)
    Jan 03, 2018
    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.
    • Nirmalya Ghosh
    How to greatly improve your React app performance (medium.com)
    Nov 21, 2017
    A review of common React performance pitfalls and how to avoid them.
    • Noam Elboim
    Clean Code vs. Dirty Code: React Best Practices (americanexpress.io)
    Nov 16, 2017
    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.
    • Donavon West
    Performance-tuning a React application (codeburst.io)
    Nov 10, 2017
    This blog post is a case-study in the specific techniques I tried, and how well they worked.
    Avoiding Unnecessary Renders in React (kirupa.com)
    Oct 28, 2017
    You are probably really tired of me saying this, but fast DOM performance is one of the biggest feathers in React's cap.
    • Kirupa Chinnathambi
    I wish I knew these before diving into React (engineering.opsgenie.com)
    Oct 19, 2017
    Some of my learnings are subjective, but I thought they may help other people to learn React and avoid making the same mistakes.
    • Canberk Morelli
    A React journey: from vanilla, to type-safe, to monadic (medium.com)
    Oct 15, 2017
    In this article we will discuss the possible evolution steps of a simple React application, featuring some clickable counters.
    • Giuseppe Maggiore
    How to structure components in React? (reallifeprogramming.com)
    Oct 13, 2017
    There are many ways we can structure components. We want components to be reusable, but only to the degree that is reasonable.
    • Bartek Witczak
    React, Inline Functions, and Performance (cdb.reacttraining.com)
    Oct 06, 2017
    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.”
    8 Key React Component Decisions (medium.freecodecamp.org)
    Oct 02, 2017
    Standardize your React development with these key decisions
    7 architectural attributes of a reliable React component (dmitripavlutin.com)
    Sep 26, 2017
    Luckily, reliable components have common characteristics. Let's study these 7 useful criterias, and detail into case studies.
    • Dmitri Pavlutin
    Are large components an anti-pattern? (blog.jakoblind.no)
    Sep 18, 2017
    Are we missing out on the real benefits of React when using large components?
    Optimize React Performance (levelup.gitconnected.com)
    Aug 12, 2017
    How to improve React performance in production and avoid common mistakes.
    • Trey Huffine
    Techniques for decomposing React components (medium.com)
    Jun 18, 2017
    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.
    • David Tang
    Make React Fast Again [Part 3]: Highlighting Component Updates (blog.logrocket.com)
    Jun 01, 2017
    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.
    • Ben Edelstein
    Make React Fast Again [Part 2]: why-did-you-update (blog.logrocket.com)
    May 30, 2017
    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.
    • Ben Edelstein
    Session Storage and Local Storage in React (robinwieruch.de)
    Apr 27, 2017
    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.
    React is Slow, React is Fast: Optimizing React Apps in Practice (medium.com)
    Feb 06, 2017
    The good news is: If you care about performance, it’s fairly easy to make any React application super fast.️ Here’s how.
    • François Zaninotto
    Share Code between React and React Native Apps (hackernoon.com)
    Jan 30, 2017
    I’ll focus on using HOC and Functional Stateless Components to achieve reuse.
    • Christian Sepulveda
    Our Best Practices for Writing React Components (engineering.musefind.com)
    Jan 27, 2017
    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.
    • Scott Domes
    How To Scale React Applications (smashingmagazine.com)
    Sep 08, 2016
    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.

    Video Guides & Talks

    Simply React (youtube.com)
    May 11, 2020
    There are patterns that have emerged in React that allow you to promote code reuse without sacrificing the simplicity or flexibility of the component. In this talk we'll go over several of these patterns that will make your React components and hooks more useful.
    Mastering the basics of SEO in React and Next.js (youtube.com)
    Jan 27, 2020
    SEO from a technical perspective is nothing more than adding a few meta tags, right? Sorta... in this video we'll take a basic Next.js application, and get it to a score of 100 in Lighthouse Audit.
    Parallel computing in React (youtube.com)
    Dec 29, 2019
    In this session, I am going to show my experience running jobs in parallel on a React application that will provide a pleasant user experience and exciting development.
    • Majid Hajian
    Using monorepos to supercharge development (youtube.com)
    Sep 13, 2019
    Dmitri has spent 6 months researching monorepos so you don't have to. In this talk you will learn all you need to know about what a monorepo is, the benefits it provides, pitfalls to watch out for and how to make it work for you.
    • Dmitri Grabov
    Beyond the React Native Benchmark (youtube.com)
    Jul 31, 2019
    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.
    • Ankita Kulkarni
    Modern React - The Essentials (youtube.com)
    Jul 04, 2019
    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.
    • Liad Yosef
    Web Delivery Experience for React Native (youtube.com)
    Jul 04, 2019
    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.
    • Elad Bezalel
    • Elad Aviv
    Move fast with confidence (youtube.com)
    May 28, 2019
    Tools and strategies for growing your state-of-the-art React PWA to a global scale.
    • Paul Armstrong
    Scaling Applications with Microfrontends (youtube.com)
    May 03, 2019
    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.
    • Max Gallo
    Tech Regrets at Spectrum (youtube.com)
    May 03, 2019
    With the benefit of hindsight, let's talk about the technology choices I regret and the lessons I have learned.
    Building resilient frontend architecture (youtube.com)
    May 02, 2019
    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.
    • Monica Lent
    Practical Performance for React Native (youtube.com)
    May 01, 2019
    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.
    • Anna Doubková
    Codecrumbs in React (youtube.com)
    May 01, 2019
    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?
    • Bohdan Liashenko
    12 Tips For More Accessible React Apps (youtube.com)
    May 01, 2019
    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.
    • Manuel Matuzović
    Mind Reading with Adaptive and Intelligent UIs in React (youtube.com)
    May 01, 2019
    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.
    • David Khourshid
    Append only development with React (youtube.com)
    May 01, 2019
    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".
    • Luca Matteis
    Practical Performance for React (Native) (youtube.com)
    Apr 24, 2019
    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.
    • Anna Doubková
    Rendering large lists with react-virtualized or react-window (youtube.com)
    Mar 05, 2019
    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").
    • Addy Osmani
    The React Cookbook: Advanced Recipes to Level Up Your Next App (youtube.com)
    Feb 22, 2019
    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!
    • Simon Bloom
    Moving Beyond Virtual DOM and State Management (youtube.com)
    Feb 16, 2019
    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.
    • Sindre Osen Aarsaether
    Troubleshooting a slow app, a practical guide to great React Native performance (youtube.com)
    Jan 07, 2019
    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.
    • Jean-Remi Beaudoin
    Optimizing the Critical Rendering Path in React (youtube.com)
    Jan 07, 2019
    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.
    • Alex Moldovan
    React Component Organization Tips (youtube.com)
    Jan 04, 2019
    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.
    Feature Driven Architecture (youtube.com)
    Dec 17, 2018
    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.
    • Oleg Isonen
    Improve a11y and usability of an icon component (youtube.com)
    Nov 16, 2018
    Someone wanted my feedback on an icon component. Here it is!
    Confident React (youtube.com)
    Sep 02, 2018
    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?
    Simply React (youtube.com)
    Aug 09, 2018
    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.
    Immutable Application Architecture (youtube.com)
    May 21, 2018
    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.
    • Lee Byron
    5 Common React Beginner Problems 2018 (youtube.com)
    May 03, 2018
    In this video I give 5 common problems React beginners might face.
    Making The DOM Declarative (youtube.com)
    Nov 19, 2017
    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!
    8 Tips For Getting Better At React (youtube.com)
    Nov 07, 2017
    Learn 8 things that will make you a better React Dev
    Fun With Fiber Custom Renderers (youtube.com)
    May 14, 2017
    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.
    How To Convert Components To Functional Stateless Components (youtube.com)
    Dec 02, 2016
    In this React.js Tutorial, I show you how to convert a normal component into a functional stateless component.

    Books & Guides

    web.dev React guide (web.dev)
    May 08, 2019
    Build performant and progressive React applications.
    • Houssein Djirdeh

    Courses & Video Series

    React in Five (javascriptplayground.com)
    Aug 14, 2018
    A series of 5 minute videos to level up your React skillset
    Beautiful and Accessible Drag and Drop with react-beautiful-dnd (egghead.io)
    Jul 28, 2018
    In this course, we will create a highly interactive task management application from scratch
    • Alex Reardon
    React: Components, Context, and Accessibility (lynda.com)
    Jul 17, 2018
    Learn about the enhancements found in React 16 and how to leverage key features to build better React apps
    React Recipes (lynda.com)
    Jul 16, 2018
    This course provides tested, easy-to-follow instructions to solve the most common challenges that React developers face every day
    • Diego Muracciole
    React: Securing Applications (lynda.com)
    Jan 31, 2018
    Learn how reinforce the security of your React applications, protecting your code, data, users, servers, and more
    React: Replacing Legacy Projects (lynda.com)
    Oct 10, 2017
    Learn how to upgrade legacy apps or websites to React
    React: Building Large Apps (lynda.com)
    Aug 21, 2017
    Build bigger and bolder applications. Explore tools and techniques for large-scale app development with React.
    Advanced React.js (pluralsight.com)
    Jul 20, 2017
    Take a deep dive into full-stack JavaScript with React.js and learn advanced concepts like the context API, HOCs, external state, performance optimization, asynchronous APIs, testing, deployment, and more.
    • Samer Buna
    Building and Deploying a Full-Stack React Application (lynda.com)
    Jun 26, 2017
    Discover how to architect, create, and deploy a scalable, full-stack React application
    • Carl Peaslee
    Creating Reusable React Components (pluralsight.com)
    Jun 04, 2017
    Learn how to design, create, and publish a reusable React component library that you can share with your team, your company, or the world.

    Podcast Episodes

    Decide with Your Human Brain, with Brian Vaughn (reactpodcast.com)
    Feb 28, 2019
    Brian Vaughn is a member of the React Core team and creator of libraries like react-virtualized and react-window. He's a wealth of knowledge in React performance and application profiling. Chantastic asks Brian about the new profiler tools he's been working on (available to React v16.5 apps), React Core team dynamics, and the future of windowing in React and browsers.
    Did You Just Screw Up the UI? with Ryan Burgess of Netflix (realtalkjavascript.simplecast.fm)
    Jan 15, 2019
    Ryan Burgess from Netflix talks with us about how to do better A/B testing so we don't screw up the UI - whether you've got Netflix sized data or doing smaller client work, A/B testing can help give you the data you need to make better decisions.
    • John Papa
    • Ward Bell
    • Dan Wahlin
    • Ryan Burgess
    • Netflix
    Just Use a Button with Jen Luker (reactpodcast.com)
    Jan 09, 2019
    Jen Luker is a lead software engineer at Formidable Labs, keynote speaker, host of @BookBytesFM, and expert knitter. Chantastic asks her about the Fiber Arts Corner at React Conf, the history that textiles and programming share, and how we can make our apps more accessible.
    The most important lessons I’ve learned after a year of working with React (devchat.tv)
    Oct 09, 2018
    In this episode, the panel talks with guest speaker, Tomas Eglinskas, and the panel talks to him about an article he wrote via Free Code Camp Medium. Currently, Tomas is a software developer at Zenitech. The panel and the guest dive-into lessons that not only apply to being a developer, but great life lessons that everyone can learn from. Check-out today’s episode!
    Promise Accessibility with Ryan Florence (reactpodcast.com)
    Sep 26, 2018
    Chantastic talks with Ryan Florence about Reach UI and why accessibility is important for everyone. They discuss the balance of physical and mental activity, Ryan’s foray into programming and entrepreneurship, the inspiration behind his accessibility-first component library, and why none of us are really full-stack developers.
    Delete Your Components with Kent C. Dodds (reactpodcast.com)
    Sep 18, 2018
    Chantastic talks with Kent C. Dodds about his adventures in React development and why we should be optimizing code for delete-ability. They discuss React Rally, managing your career, taming your ego, keeping healthy and happy on Twitter, tools for composing components well and when to use them, and what’s next for React.
    Ryan Florence - Building Accessible UI Components (fullstackradio.com)
    Sep 12, 2018
    In this episode Adam talks to Ryan Florence about the challenges of making custom UI components accessible, and how Ryan is trying to make that easier with Reach UI.
    The React Episode (syntax.fm)
    Aug 15, 2018
    In this episode Wes and Scott do a deep dive into React - what it is, best practices and all the ins and outs of how the framework works.
    Simple React Patterns with Lucas Reis (devchat.tv)
    May 15, 2018
    In this episode of React Round Up, the panel discusses simple React patterns with Lucas Reis. He recently wrote a blog post about simple React patterns that really took off and became popular on the web. They talk about this blog post, what defines a successful pattern, and then they discuss the different patterns that he has discovered in his years of React programming.
    Best Practices with React and Redux with Samuel Mendenhall (devchat.tv)
    May 08, 2018
    In this episode of React Round Up, the panel discusses best practices with React and Redux with Samuel Mendenhall. They talk about what has led him to React, as well as some of the most common mistakes that people make in React. They also talk about the amazing power of TypeScript and when you may not want to use Redux.