Patterns & Best Practices

72 lessons in React

• Component Composition with children PropSlides / Video
• Render Prop Rendered as ElementCode Quiz
• Container Forgets to Pass DataCode Quiz
• PropTypes and TypeScript for Type SafetySlides / Video
• Immutability in State UpdatesSlides / Video
• Separating Business Logic from UISlides / Video
• Small Single-Responsibility ComponentsSlides / Video
• Naming Conventions for Components and FilesSlides / Video
• Folder and File Organization StrategiesSlides / Video
• Three React Anti-Patterns to AvoidSlides / Video
• Deriving State Instead of DuplicatingSlides / Video
• Colocating State Near UsageSlides / Video
• React.memo for Component MemoizationSlides / Video
• Compound Component PatternSlides / Video
• Proper Use of Keys in ListsSlides / Video
• Conditional Rendering Best PracticesSlides / Video
• Lifting State UpSlides / Video
• Container vs Presentational ComponentsQuiz
• Fragments Avoid Wrapper DivsQuiz
• Accessibility in Component DesignQuiz
• Inline Functions in RenderQuiz
• Error BoundariesQuiz
• Immutable State UpdatesQuiz
• Colocating StateQuiz
• Deriving State Instead of DuplicatingQuiz
• Single Responsibility ComponentsQuiz
• Component Folder StructureQuiz
• Composition over InheritanceQuiz
• Prop Drilling and ContextQuiz
• Lifting State UpQuiz
• Controlled vs Uncontrolled InputsQuiz
• Compound Components PatternQuiz
• Render Props PatternQuiz
• Higher-Order Components BasicsQuiz
• Higher-Order Components (HOCs)Slides / Video
• Container/Presentational PatternSlides / Video
• HOC Swallows the PropsCode Quiz
• Compound Component Loses ContextCode Quiz
• Controlled Input Without onChangeCode Quiz
• Lifting State That Stayed LocalCode Quiz
• Prop Drilling Passes Wrong NameCode Quiz
• Composition Ignores ChildrenCode Quiz
• Barrel Export Missing the ComponentCode Quiz
• State Lifted Too HighCode Quiz
• Component Doing Too MuchCode Quiz
• Modal Rendered Without a PortalCode Quiz
• Wrong PropType for CallbackCode Quiz
• Fragment Loses the KeyCode Quiz
• List Key on the Wrong ElementCode Quiz
• Card Component Ignores ChildrenCode Quiz
• Lazy Component Without SuspenseCode Quiz
• Error Boundary as a FunctionCode Quiz
• Derived Value Stored in StateCode Quiz
• Inline Object Defeats MemoizationCode Quiz
• React.memo That Never MemoizesCode Quiz
• Zero Leaks Into the UICode Quiz
• Provider Pattern for Shared StateFlashcard
• Default Props and Prop ValidationFlashcard
• Fragments to Avoid Wrapper NodesFlashcard
• Extracting Reusable UI ComponentsFlashcard
• Prop Drilling and Avoiding ItFlashcard
• Lifting State UpFlashcard
• Colocating StateFlashcard
• React.memo Best PracticesFlashcard
• Compound Components PatternFlashcard
• Deriving StateFlashcard
• Prop Naming & API DesignFlashcard
• Render Props PatternFlashcard
• Small, Focused ComponentsFlashcard
• Container/Presentational PatternFlashcard
• Component File OrganizationFlashcard
• Avoiding Inline Functions/ObjectsFlashcard