Advanced React Concepts

Articles & Tutorials

A deep dive into React Fiber internals (blog.logrocket.com)
Nov 11, 2019
We know that ReactDOM builds up the DOM tree under the hood and renders the application on the screen. But how does React actually build the DOM tree? And how does it update the tree when the app’s state changes?
  • Karthik Kalyanaraman
React - Under the hood (freecodecamp.org)
Sep 04, 2019
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.
  • Mehul Mohan
Advanced Patterns in React (telerik.com)
May 09, 2019
Understand why patterns in React is such an important topic, and learn why they are used and what problems they came to solve.
  • Leonardo Maldonado
React as a UI Runtime (overreacted.io)
Feb 02, 2019
I’ve written about the challenges of creating user interfaces before. But this post talks about React in a different way — more as a programming runtime.
How to develop your React superpowers with the HOC Pattern (medium.freecodecamp.org)
Dec 27, 2018
2018 has reached its end and it makes sense for me to start the new year with an article about Higher-Order Components!
  • Eduardo Vedes
How to develop your React superpowers with the Render Props Pattern (medium.freecodecamp.org)
Nov 24, 2018
This time I’m going to tell you about this great superpower called “render props”
  • Eduardo Vedes
How to use React.lazy and Suspense for components lazy loading (medium.freecodecamp.org)
Nov 14, 2018
React 16.6 brought code-splitting to a new level. You can now load your components when it’s really needed without installing additional libraries.
  • Boris Sever
Why React Hooks, and how did we even get here? (medium.freecodecamp.org)
Nov 12, 2018
Hooks have learned from the trade-offs of mixins, higher order components, and render props to bring us new ways to create contained, composable behaviors that can be consumed in a flat and declarative manner.
  • Ryan Yurkanin
These are the concepts you should know in React.js (after you learn the basics) (medium.freecodecamp.org)
Nov 12, 2018
In the following article, I’m going to discuss 5 concepts that will bring your React skills and knowledge to the next level.
  • Chris Chuck
How to develop your React superpowers with the Container Pattern (medium.freecodecamp.org)
Oct 28, 2018
This time I’m going to tell you about this very useful pattern in React called the container pattern or container component pattern.
  • Eduardo Vedes
React's Render Props Pattern - Children as a Function (robinwieruch.de)
Aug 08, 2018
The concept of children as a function or child as a function, also called render prop in general, is one of the advanced patterns in React.
Using Composition and Render Props instead of Context API (medium.com)
Aug 05, 2018
If what you are trying to achieve is to just pass down some props without dealing with passing it to every component in between, you don’t have to use Redux or Context API.
  • Baris Ozcetin
Learn advanced React patterns by developing a game with sprite animation (medium.freecodecamp.org)
Aug 02, 2018
Have you ever wanted to learn some advanced React patterns? Or build your own game engine? If at least one answer is yes, then this article is for you.
  • Pavel Vlasov
Five Ways to Advanced React Patterns (medium.com)
Jul 03, 2018
What I have learned after I watch Kent C. Dodds “Advanced React Patterns” course at Frontend Masters.
  • Yazan Aabed
Render Props, Render Callbacks And Higher-Order Components Are All Interchangeable (medium.com)
Jun 12, 2018
All three mentioned patterns solve the same thing that mixins used to solve.
  • Ali Sharif
Mixing Component Patterns (blog.kentcdodds.com)
May 07, 2018
Let’s make a component that supports Render Props, Component Injection, Compound Components, the Provider Pattern, and Higher Order Components!
How To Master Advanced React Design Patterns  -  Render Props (itnext.io)
Apr 17, 2018
This design pattern can be a bit of a head scratcher at first and in order to truly grasp how it exactly works, we need a in-depth understanding of the top level React API and how the JSX code we write is converted to javascript.
  • Shaun David Hutch
How To Master Advanced React Design Patterns  -  Context API (itnext.io)
Apr 09, 2018
Using Context, we no longer need to loop through and clone each child to pass down required props.
  • Shaun David Hutch
How To Master Advanced React Design Patterns  -  Compound Components (itnext.io)
Apr 02, 2018
To celebrate the official release of React 16.3, I have decided to share some techniques I have been using recently which have completely changed my approach to creating React components.
  • Shaun David Hutch
Ultimate React Component Patterns with Typescript 2.8 (levelup.gitconnected.com)
Feb 28, 2018
Stateful, Stateless, Default Props, Render Callbacks, Component Injection, Generic Components, High Order Components, Controlled Components
  • Martin Hochel
Evolving Patterns in React (medium.freecodecamp.org)
Feb 04, 2018
Let’s take a closer look at some of the patterns that are emerging in the React ecosystem. These patterns improve readability, code clarity, and push your code towards composition and reusability.
  • Alex Moldovan
You learned the basics of React, now what? (engineering.opsgenie.com)
Dec 21, 2017
I’ve encountered some concepts of React which I believe will take you a step forward in mastering React.
  • Canberk Morelli
React Component Patterns (levelup.gitconnected.com)
Oct 26, 2017
Stateful x Stateless, Container x Presentational, HOCs, Render Callbacks and more
  • Gustavo Matheus
Simple React Patterns (lucasmreis.github.io)
Oct 08, 2017
Dealing With Side-Effects In React
  • Lucas Reis
Build Your Own React  -  A Step By Step Guide (hackernoon.com)
Sep 22, 2017
In this post I’ll create a full working version of react step by step. It won’t be an efficient version but it give you a glimpse to how react works under the hood.
  • Ofir Dagan

Video Guides & Talks

Resolving real-world problems by mixing several advanced React patterns and features (youtube.com)
Oct 03, 2019
In this talk we will see in depth how to put together most of the recent React advanced patterns and features (Compound Components, High-Order Components, State Initializers, Context API, Refs and -of course- Hooks!) to solve complex real-world problems in a simple, yet elegant way, including proper automated tests for them.
  • Mario Beltran
Refactoring React (youtube.com)
Apr 24, 2019
Learn which component pattern will make your codebase better in which use case.
Advanced patterns in building React Components (youtube.com)
Nov 21, 2018
This talk is going to focus on some advanced patterns in building your react components. More over we do not know what the best way to do things and we end up feeling stressed out.
  • Manjula Dube
Implementing Control Props in custom React Components (youtube.com)
Jul 12, 2018
This is a livestream of part of my Advanced React Component Patterns in Portland at ChainReactConf 2018.
Simply React - OpenWest 2018 (youtube.com)
Jun 08, 2018
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 5 of these patterns that will make your React components more useful.
Advanced React Component Patterns workshop @ PayPal (Part 2) (youtube.com)
May 12, 2018
Making React components that can be used in multiple places is not hard. What is hard is when the use cases differ. Without the right patterns, you can find yourself with a highly complex component that requires a lot of configuration props and way too many if statements. With this course, you'll not only learn great patterns you can use, but also the strengths and weaknesses of each so you know which to reach for to provide your components the flexibility and power you need.
Mixed Mode React (youtube.com)
Apr 25, 2018
This talk will focus on the creative exploitation of React component architecture to render not only to DOM elements, but other targets as well, at the same time. We will explore techniques you can use to achieve this, common pitfalls, useful applications of these patterns and not so useful, but wildly entertaining applications of these patterns.
Patterns for component reuse (youtube.com)
Apr 24, 2018
You build components with the linux philosophy. Do one thing and do it well. 👆Then assemble for bigger things. Higher order components, render props, function as children, and composite components take a different approach.
5 Patterns to make your React Components more useful (youtube.com)
Apr 11, 2018
This is a livestream/recording of a (remote) talk by me at Phoenix ReactJS.
Advanced Redux Patterns - ReactNYC (youtube.com)
Jan 31, 2018
In this talk, we will explore advanced patterns and techniques in Redux inspired by old and proven design principles of large scale messaging-based systems.
  • Nir Kaufman

Books & Guides

Build your own React (pomb.us)
Nov 13, 2019
We are going to rewrite React from scratch. Step by step. Following the architecture from the real React code but without all the optimizations and non-essential features.
  • Rodrigo Pombo
Hands-On Design Patterns with React Native (packtpub.com)Get it on Amazon
Sep 29, 2018
Learn how to write cross platform React Native code by using effective design patterns in the JavaScript world
  • Mateusz Grzesiukiewicz
Complete Intro to React v4 Notes (btholt.github.io)
Sep 13, 2018
Notes for the Complete Intro to React v4 course on Frontend Masters.
React in patterns (krasimir.gitbooks.io)
Apr 18, 2018
A book about common design patterns used while developing with React. It includes techniques for composition, data flow, dependency management and more.
  • Krasimir Tsonev
SurviveJS - React (survivejs.com)
Mar 13, 2018
SurviveJS - React shows you how to build a simple Kanban. The idea is that if you can build a simple application, you can probably build something more complex after that. The first application is always the hardest.
  • Juho Vepsäläinen
Under the hood: React (bogdan-lyashenko.github.io)
Nov 02, 2017
Entire React code base explanation by visual block schemes (Stack version).
  • Bohdan Liashenko
Fullstack React (fullstackreact.com)
Oct 17, 2017
The up-to-date, in-depth, complete guide to React and friends.
  • Tyler McGinnis
  • Anthony Accomazzo
  • Ari Lerner
  • David Guttman
  • Nate Murray
  • Clay Allsopp
React Bits (vasanthk.gitbooks.io)
Jun 01, 2017
A compilation of React Patterns, techniques, tips and tricks
  • Vasa

Courses & Video Series

Intermediate React, v3 (frontendmasters.com)
May 04, 2021
This course is modular, where you can pick and choose various react ecosystems you want to learn. You’ll learn hooks in-depth, CSS-in-JS with TailwindCSS, increase performance with code splitting and server-side rendering, add TypeScript, state management with Redux, test your app with Jest …and more!
Epic React (epicreact.dev)
Sep 29, 2020
Confidently ship well-architected production ready React apps like a pro.
TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL (newline.co)
Nov 13, 2019
Learn advanced React, Node, TypeScript, and GraphQL by building a production-ready application in this 8-week, online course.
  • Hassan Djirdeh
  • Jing Chen
Reintroducing React: V16 and Beyond (educative.io)
Nov 05, 2019
This course is your one-stop reference to most important React updates since V16 was released. We’ll walk through all the major features of modern React so you can stay in sync with the most recent changes while learning to write better software.
  • Ohans Emmanuel
Complete React Developer in 2019 (w/ Redux, Hooks, GraphQL) (udemy.com)
Jul 01, 2019
Become a Senior React Developer! Build a massive E-commerce app with Redux, Hooks, GraphQL, ContextAPI, Stripe, Firebase.
  • Andrei Neagoie
  • Yihua Zhang
React Front To Back 2019 (udemy.com)
Jun 04, 2019
Lean Modern React 16.8+ Including Hooks, Context API, Full Stack MERN & Redux By Building Real Life Projects.
Full Stack Advanced React & GraphQL (advancedreact.com)
Oct 11, 2018
Learn everything you need to build a full stack application with React.js and GraphQL
Hands-on Web Development with React (packtpub.com)
Sep 26, 2018
Boost your JavaScript skills by building a real-world SPA with React
  • Filip Danić
Intermediate React (frontendmasters.com)
Sep 14, 2018
Learn to build scalable React applications using the tools and techniques available in the React ecosystem
React in Five (javascriptplayground.com)
Aug 14, 2018
A series of 5 minute videos to level up your React skillset
Basic React (basicreact.com)
Aug 06, 2018
Start building real ReactJS apps. Jump in with best practices, solid understanding and confidence.
  • Maksim Ivanov
Complete React Tutorial (& Redux ) (youtube.com)
Jul 29, 2018
In this course we'll be learning what React is and how to use it to make awesome, reactive SPA's. We'll also look at how we can use Redux to help with our app's state management.
  • Shaun Pelling
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 Catch-up (reach.tech)
Jul 03, 2018
This course is designed to quickly catch you up on the "how" and the "why" of all the new stuff
Advanced React Component Patterns (egghead.io)
Jun 01, 2018
The goal of this course is to give you the knowledge of advanced patterns you can use to make React components that are more flexible, simpler, and more fun to build, use, and maintain.
Advanced React and Redux (udemy.com)
May 30, 2018
Detailed walkthroughs on advanced React and Redux concepts - Authentication, Testing, Middlewares, HOC's, and Deployment.
  • Stephen Grider
Level 2 React (leveluptutorials.com)
May 23, 2018
In this series, we dive into intermediate React concepts where you'll learn things like, how to use the React Context API, how to make a portal in React, how to use and understand render props as well as animated transitions and interactive animations in React.
Advanced React Component Patterns Workshop @ PayPal (youtube.com)
May 11, 2018
With this course, you'll not only learn great patterns you can use, but also the strengths and weaknesses of each so you know which to reach for to provide your components the flexibility and power you need.
Advanced React Patterns (frontendmasters.com)
May 02, 2018
In this course, Kent C. Dodds shows how to separate component logic, state and display properties to make your components more flexible and usable across large React applications.
MERN Stack Front To Back: Full Stack React, Redux & Node.js (udemy.com)
Apr 15, 2018
Build and deploy a social network with Node.js, Express, React, Redux & MongoDB. Learn how to put it all together.
Node with React: Fullstack Web Development (udemy.com)
Jul 26, 2017
Build and deploy fullstack web apps with NodeJS, React, Redux, Express, and MongoDB.
  • Stephen Grider
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
Higher Order Components with Functional Patterns Using Recompose (egghead.io)
May 12, 2017
In this course, you will learn to use many of the most powerful and convenient higher-order components within Recompose by coding several real-world examples.
  • Tim Kindberg

Podcast Episodes

Inside React with Sophie Alpert (reactpodcast.com)
May 29, 2018
Sophie Alpert is a core contributor to React and is currently the engineering manager for the React team at Facebook. She has been contributing to React for over 3 years now, making her first contributions while she was working as an engineer at Khan Academy.
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.
Advanced Component Patterns and Downshift with Kent C. Dodds (devchat.tv)
Mar 20, 2018
In this episode of React Round Up, the panel discusses advanced component patterns and Downshift. They talk about different component patterns, especially render prop patters, and the fact that Downshift allows for your components to be much more useful generally for more people. They also note that the render prop patterns can help to separate logic from view, which makes things easier to develop.