React JS Best Practices - Beginner To Advanced

Name: React JS Best Practices - Beginner To Advanced
Rating: 4.4 (30 reviews)

Improve your skills in React and Typescript with concise and to the point lessons.

Created byCodeLicks Academy

Last updated 12/2024

English

What you'll learn

Prevent wasted renders.
Understand the main difference and use cases for hooks, such as useEffect and useLayoutEffect.
How to avoid mistakes most of React developers make, like listening for ref changes in useEffect.
Learn advanced concepts, like Error Boundaries and async routes.

Course content

8 sections • 106 lectures • 8h 31m total length

Good to know1:10

Introducing impossible state6:50
Encapsulating components6:41
Optimizing another wasted re-render2:13
Introducing impossible state #23:33
a ref tip1:36
Grouping states1:22
State reset4:04
Redundant state2:28
Caching2:17
Conditional rendering2:21
Improving conditional rendering8:08
Currying handler1:59
Enums2:38
Factory pattern in React3:16
Clean if statements5:32
Refactor a nested if statement into a single, cleaner return by inlining branches, combining checks, and using destructuring for stock and payment status.
Normalizing states3:41
a Form tip4:04
React Portals7:18
Forwarding Refs5:14
Error Boundaries11:50
Keys Explained7:04
Capture Event Listeners3:02
Optimized Context API16:50

Fetching inside useEffect3:53
Race conditions in useEffect4:45
Learn how to prevent race conditions in useEffect by using an abort controller to cancel stale fetch requests and clean up with an effect cleanup function.
Another wasted re-render3:56
Identify a wasted re-render in a parent–toggle pattern and prevent it by updating local state and notifying the parent inside an event handler, instead of triggering updates via useEffect.
Creating custom hooks2:43
Making useCallback act like useRef4:27
useEffect and infinite loops4:32
Using useCallback properly2:11
a Useful custom hook4:20
Increasing readability with custom hooks4:16
Labeled functions with useEffect1:19
Separating business logic from UI3:21
a useEffect mistake2:04
Unnecessary useEffect2:15
Centralized state updates5:38
useReducer pattern4:37
useLayoutEffect7:47
useId6:58
useImperativeHandle11:15
useDeferredValue10:24
useTransition9:09
Async React Router20:08
Learn to fetch data asynchronously with React Router v6 using Suspense, Await, and defer to render delayed data alongside static UI, plus lazy load routes like club.

Partial4:16
Exhaustiveness checking4:46
keyof1:05
Record5:40
Conditionals8:34
Satisfies3:15
let vs const1:41
Mapping5:47
Renaming Keys3:28
Unions vs Intersections6:32
Intersecting with string literals2:54
typeof3:45
Generics2:05
Generics cheat sheet1:02
a Case-study8:50
any vs unknown2:07
Omit1:22
Nullish operator1:49
Pick2:29
ReturnType1:54
Index Access types2:18
Mapped union types3:51
Required1:42
Discriminated Unions2:25
as const2:41
tsconfig settings2:02
Another tsconfig tip1:45
NonNullable1:17

Requirements

Basic knowledge in React.
Basic knowledge in Typescript.

Description

Hi, welcome to another course from Codelicks Academy!

As the title of the course suggests, this course is all about React best practices for anyone who want to write React components the React way and also tech interview candidates who have little time to review the most common React topics.

It consists of a series of independent lectures. In each lecture, I demonstrate a common best practice that will help you write clean, maintainable, and performant React components.

This course is beginner friendly. If you have finished a course or two about React, have at least +1 year of experience developing React projects, and want to quickly learn about common mistakes and best practices in React, you may find this course useful.

Additionally, if you are preparing for a technical interview that involves React concepts, you will find this course a valuable resource for reviewing the most common tips and tricks in React in a very short time.

This course is not about building a large project from scratch to deployment. Instead, it is meant to be a quick review of the most common best practices in React at a beginner level.

It starts immediately with some common mistakes that React developers often make and solutions for avoiding them.

Then we discuss numerous best practices, each demonstrated with simple yet informative code examples.

We also cover many tips and tricks about hooks.

The final section discusses a scalable project structure that can be used for production-ready projects.

We even touch on some advanced Typescript features and Typescript in React by developing some cool components in Typescript.

You can take a look at the course outline and see if the course fits you. If it does, then let's go!

Who this course is for:

Beginner to intermediate developers looking to level-up their react skills.
Technical interviews candidates that are preparing for tech interviews.

React JS Best Practices - Beginner To Advanced

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 1min

Common Mistakes to Avoid10 lectures • 45min

Common Best Practices23 lectures • 1hr 54min

React Hooks Tips21 lectures • 2hr

Typescript Tips28 lectures • 1hr 31min

Some Tips on React with Typescript17 lectures • 1hr 48min

Styling Tips3 lectures • 11min

Scalable Project Structure3 lectures • 21min

Requirements

Description

Who this course is for: