Patterns & Best Practices

73 lessons in React

• Container Forgets to Pass DataCode Quiz
• Render Prop Rendered as ElementCode 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
• Render Props PatternQuiz
• Higher-Order Components BasicsQuiz
• Container vs Presentational ComponentsQuiz
• Compound Components PatternQuiz
• Deriving State Instead of DuplicatingQuiz
• Colocating StateQuiz
• Immutable State UpdatesQuiz
• Composition over InheritanceQuiz
• Prop Drilling and ContextQuiz
• Single Responsibility ComponentsQuiz
• Fragments Avoid Wrapper DivsQuiz
• Lifting State UpQuiz
• Controlled vs Uncontrolled InputsQuiz
• Error BoundariesQuiz
• Component Folder StructureQuiz
• Inline Functions in RenderQuiz
• Accessibility in Component DesignQuiz
• Higher-Order Components (HOCs)Slides / Video
• Composition with the children PropSlides / Video
• Composition over InheritanceSlides / Video
• Container/Presentational PatternSlides / Video
• Lifting State That Stayed LocalCode Quiz
• Prop Drilling Passes Wrong NameCode Quiz
• HOC Swallows the PropsCode Quiz
• Controlled Input Without onChangeCode Quiz
• Compound Component Loses ContextCode Quiz
• Composition Ignores ChildrenCode Quiz
• Modal Rendered Without a PortalCode Quiz
• Fragment Loses the KeyCode Quiz
• State Lifted Too HighCode Quiz
• Wrong PropType for CallbackCode Quiz
• Barrel Export Missing the ComponentCode Quiz
• Component Doing Too MuchCode Quiz
• List Key on the Wrong ElementCode 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
• Card Component Ignores ChildrenCode Quiz
• Lazy Component Without SuspenseCode Quiz
• Fragments to Avoid Wrapper NodesFlashcard
• Provider Pattern for Shared StateFlashcard
• Extracting Reusable UI ComponentsFlashcard
• Default Props and Prop ValidationFlashcard
• React.memo Best PracticesFlashcard
• Compound Components PatternFlashcard
• Render Props PatternFlashcard
• Container/Presentational PatternFlashcard
• Avoiding Inline Functions/ObjectsFlashcard
• Deriving StateFlashcard
• Prop Drilling and Avoiding ItFlashcard
• Colocating StateFlashcard
• Small, Focused ComponentsFlashcard
• Lifting State UpFlashcard
• Component File OrganizationFlashcard
• Prop Naming & API DesignFlashcard