73 items
Container Forgets to Pass Data
Code QuizRender Prop Rendered as Element
Code QuizPropTypes and TypeScript for Type Safety
Slides / VideoImmutability in State Updates
Slides / VideoSeparating Business Logic from UI
Slides / VideoSmall Single-Responsibility Components
Slides / VideoNaming Conventions for Components and Files
Slides / VideoFolder and File Organization Strategies
Slides / VideoThree React Anti-Patterns to Avoid
Slides / VideoDeriving State Instead of Duplicating
Slides / VideoColocating State Near Usage
Slides / VideoReact.memo for Component Memoization
Slides / VideoCompound Component Pattern
Slides / VideoProper Use of Keys in Lists
Slides / VideoConditional Rendering Best Practices
Slides / VideoLifting State Up
Slides / VideoRender Props Pattern
QuizHigher-Order Components Basics
QuizContainer vs Presentational Components
QuizCompound Components Pattern
QuizDeriving State Instead of Duplicating
QuizColocating State
QuizImmutable State Updates
QuizComposition over Inheritance
QuizProp Drilling and Context
QuizSingle Responsibility Components
QuizFragments Avoid Wrapper Divs
QuizLifting State Up
QuizControlled vs Uncontrolled Inputs
QuizError Boundaries
QuizComponent Folder Structure
QuizInline Functions in Render
QuizAccessibility in Component Design
QuizHigher-Order Components (HOCs)
Slides / VideoComposition with the children Prop
Slides / VideoComposition over Inheritance
Slides / VideoContainer/Presentational Pattern
Slides / VideoLifting State That Stayed Local
Code QuizProp Drilling Passes Wrong Name
Code QuizHOC Swallows the Props
Code QuizControlled Input Without onChange
Code QuizCompound Component Loses Context
Code QuizComposition Ignores Children
Code QuizModal Rendered Without a Portal
Code QuizFragment Loses the Key
Code QuizState Lifted Too High
Code QuizWrong PropType for Callback
Code QuizBarrel Export Missing the Component
Code QuizComponent Doing Too Much
Code QuizList Key on the Wrong Element
Code QuizError Boundary as a Function
Code QuizDerived Value Stored in State
Code QuizInline Object Defeats Memoization
Code QuizReact.memo That Never Memoizes
Code QuizZero Leaks Into the UI
Code QuizCard Component Ignores Children
Code QuizLazy Component Without Suspense
Code QuizFragments to Avoid Wrapper Nodes
FlashcardProvider Pattern for Shared State
FlashcardExtracting Reusable UI Components
FlashcardDefault Props and Prop Validation
FlashcardReact.memo Best Practices
FlashcardCompound Components Pattern
FlashcardRender Props Pattern
FlashcardContainer/Presentational Pattern
FlashcardAvoiding Inline Functions/Objects
FlashcardDeriving State
FlashcardProp Drilling and Avoiding It
FlashcardColocating State
FlashcardSmall, Focused Components
FlashcardLifting State Up
FlashcardComponent File Organization
FlashcardProp Naming & API Design
FlashcardError Boundary as a Function
An error boundary is written as a function component and never catches errors.
function ErrorBoundary({ children }) {
const [hasError, setHasError] = useState(false);
if (hasError) return <h1>Something went wrong</h1>;
return children;
}Why will this error boundary fail to catch rendering errors?