Programming Languages


Advanced React (Render Performance Best Practices Patterns)

2020 Advanced Reactjs - Theory, React Patterns, Industry Best Practices, Performance, Render Issues, Hooks, Core

3.86 (153 reviews)


9 hours


Aug 2020

Last Update
Regular Price

Blue Host
Fast, easy, and secure WordPress hosting in minutes + 1 free domain name
65%OFF : $2.95/month

What you will learn

High Quality Web Applications

Best Practices used by Expert Programmers

React Redux Saga Pattern

Bundle Splitting & Lazy Loading

Software Engineering Principles

Webpack & Babel

Working with Themes

Focusing on Application Performance for Better UX

Rendering Performance

React Core Concepts


Advanced React & Web Development For Intermediate/Advanced Developers

At last, A React PerformanceBest Practices Course

Become an Advanced React Developer

This course is UP-TODATE with the latest React version 16.13+

This course is UP-TODATE with the latest ES2020 version

This IS NOT FOR YOU if you just want to build some nice and good looking application.

If you just passed this level of building nice and good looking application and want to focus on best practices and performance so this course is fo you.

This course contains a lot of theoritical materials and diagrams for deeper understanding.

In this course, bonus lectures continuously will be added in the future, like CONCURRENT React Mode and more

At the end of the course you will be able to:

1. Write high quality React components

2. Master React CORE concepts

3. Build applications with high PERFORMANCE

4. Write React applications with Patterns

5. Know the What? Why? & How?

6. Master the best PRACTICES used in the industry

7. Build Powerful, Scalable, Fast & Maintainable Web Applications

Who is this course for:

1. React Developers who want to sharpen their skills

2. React Developers who want to become advanced/expert developers

3. Developers who seek how to write high quality code

4.  Developers who seek to aquire best practices

5.  Developers who want to learn about application performance

6. Developers who want to learn not only the technical stuff, but also the important theory behind

7. React developers who want to learn about lazy loading

7. React developers who want to learn about software principles


1. Basic React knowledge, like components, state, props, render MUST

2. HTML, JSX, JavaScript MUST

3. Redux Saga Optional

This course includes:

1. Redux overview

2. Redux-saga overview

3. Software principles in web application

4. Bundle Splitting

5. Lazy Loading

6. Anti-Patterns & Bad Practices to avoid

7. Render Performance

8. Why rendered

9. Avoid Reconciliation

10. React Core Concepts

11. Routing

12. Styling with Themes

13. Material-UI

14. ES2020

15. Design Pattern

16. Files Generators

17. High Quality boilerplate

18. Data Flow Diagrams for deep understanding

19. DevTools


Advanced React (Render Performance Best Practices Patterns)
Advanced React (Render Performance Best Practices Patterns)
Advanced React (Render Performance Best Practices Patterns)
Advanced React (Render Performance Best Practices Patterns)





How To Make The Maximum Of This Course

Setting Our Project

Section Goal


Cloninng Our Project

Folder Structure



Redux Overview

Redux Store

Redux Actions

Redux Reducers

How Redux Works

Redux Saga

Section Goal

Redux Middleware

Saga Effects

React Patterns

High Order Component

Container Component

Examples Code

React Hooks

Preparation (DO NOT SKIP)

Preserving State

Updating State

Using Refs

Component Mount

Observing Props Changes

Component Cleanup

Creating YOUR own Hook (Part 1)

Creating YOUR own Hook (Part 2)

Design Pattern

Section Goal

Important Note

What is High Quality Application

Component Container Pattern

Authentication Data Flow

Authentication (Redux & Saga)

Network Service

Server Communication

Storing Credentials

Removing Credentials

Final Code (updated project files)

Software Principles

Section Goal

Modularity in Modern Applications

DRY Principle

SOLID Principles

Reusability in Modern Applications

Modern Styling

Section Goal

Consistency in Modern Applications

Setting Up Styling

Adding Theme

Power Of Themes


Section Goal

Application Architecture

React Router Overview

Navigation & Routing

Securing Routes: Public & Private

Navigation Bar

Vacation Details Page

URL Params 1

URL Params 2

React Core


Commit & Render

Mount vs Update

React Performance

Section Goal

Why Performance?

Debugging: DevTools 1

Debugging: DevTools 2

Render Profiling


Memoizing Computation

Memoizing Selectors

Overloading DOM and Virtual DOM

React Memo

Avoid Reconciliation

Render Performance

Bad Practice 1 (PART 1)

Bad Practice 1 (PART 2)

Bad Practice 2 (PART 1)

Bad Practice 2 (PART 2)

Bad Practice 3

Webpack Overview

Section Goal

What is Webpack

How is Webpack

Exploring the Entry

Exploring the Output

Exploring the Loaders

Lazy Loading

Section Goal

Lazy Loading

Production Build

Loading Dynamically

Lazy & Suspense

Bundle Splitting

Dependency Reference Common Issue

Extending Our Container

Finally Bundle Splitting


Brent9 October 2020

Valuable information. Production could use some polishing, but the tips and patterns presented are useful.

Self18 September 2020

The explanation could be better, more elaborative and detailed. Topics chosen are good but there is very little explanation, I would have to read everything again. Code is incomplete. I was facing this issue that in the videos the code was different, which is neither provided anywhere like in GitHub or for downloading, nor it was written in the video lectures itself. Overall, the tutorial seemed incomplete.

Marco15 September 2020

I recommend the course to all who wants to become proficient with advanced react techniques, it is the only course of this type that I found around and the content presented is really valuable as, contrary to most courses, it shows a real professional React setup and not a beginner/pre-intermediate one. Pace (at 1.25x) of the course is appropriate, and arguments are appropriately explained but not over-explained. The reason why I didn't give 5 starts is that material is a big rough. - course appears way more natural at 1.25x speed, to me seems almost like the videos are slowed down in post-production. - videos 83 and 84 are the same - some refactoring to be done in the repository, like the many unused vars or the debugger left in the 'final' branch. - audio is not the best, seems that the laptop microphone is used as you can hear the typing of the keyboard. Overall the author seems that he really knows what he is doing, I will keep an eye on him in case he decide to publish other courses.

Yogesh12 September 2020

Overall great experience with the course , learned a lot of new concepts, but wanted to provide feedback for improve and making it a great course , I think you should start developing the application from scratch and how you setup all the things like generators webpack and all , you should explain why you arranged saga in the way you do and all the stuff you have to build so that students can follow along and learn a lot. I think if you implemented all this stuff than your course will be the best advanced react course in the world.

Hieu17 August 2020

Great course, great codebase. A little bit confuse with the teaching style but knowledge is valuable to push you to the next level as a React developer.

Mr6 August 2020

This course is amazing. I have finally found a course that has some practical examples that you would actually use in production rather than just some example app that you would never do. As for all those who thought the speech was too slow I would agree, but thankfully you can speed that up so I don't see a reason to deduct stars for that

Aaron27 July 2020

Fantastic! This is the course I need to make my front end coding faster, easier, more efficient and more manageable. The delivery could be better - he has a tendency to speak too slowly with lengthy pauses, but this is a minor issue.

Mateus15 July 2020

Simplesmente "Excelente" !!! Procurei por muito tempo um curso sobre React, Redux e, principalmente, o uso "correto e performático" do WebPack, porém, todos os que encontrei estavam absurdamente desatualizados e/ou não demonstravam como extrair o máximo dos mesmos. Finalmente encontrei !!!

Amir14 June 2020

I'm half way through the course, and I'm implementing the concepts which are being covered in the course right in my live projects, which have improved the performance of my web apps tremendously. I highly recommend this course!

William11 June 2020

I love the data flows diagrams for deep understanding There is a lot of theoretical explanation and then the practical. Happy to take this course

Marko8 June 2020

I loved the combination of high quality software principles with REACT and Front End development Genius

Amit8 June 2020

not at all.. its tooo slow with pauses and didn't learn any advance things yet.. somehow pushing myself to watch next video and hope will get at-least something good to learn.

HarshilPatel0000044 June 2020

I got this course for free from the creator himself. So, thanks Eyas. The course covers all the thing that what described in description. The only reason I gave 4 STARS is the instructors accent. It feels slow and I'm feeling bored by listening him. Other than that, there is no complain about course materials. Hope, Eyas will improve this in his next course.

Firas1 June 2020

One of the better courses I've ever had! Very well structured with on point examples which makes you understand deeply what you are learning in the course. I've took some other courses on this topic but none of them comes close to how good this course is. Waiting for more courses from this lecturer to take!

Mais27 May 2020

An amazing & unique course! At last I found a High Quality course that digs deep into advanced concepts and in high quality. I loved the combination between the theory and the code. The explanations were very clear and precise! very recommended.


Udemy ID


Course created date


Course Indexed date
Course Submitted by