Table of Contents
Module Pattern SolutionLydia demonstrates the solution to the Module Pattern challenge.
Singleton PatternLydia explains the singleton pattern restricts the instantiation of a class or object to one instance. The instance is unmodifiable and can be accessed globally throughout the application.
Singleton Pattern SolutionLydia demonstrates the solution to the Singleton Pattern challenge. Questions about the pros/cons for instantiating from a class versus an object and ES2015 default singleton modules are also covered in this segment.
Proxy PatternLydia demonstrates how the proxy pattern is used to intercept requests to a targeted object and decide whether or not to forward on those requests. Proxies make it easy to add functionality such as validation, logging, formatting, notifications, and debugging.
Proxy Pattern SolutionLydia codes the solution to the Proxy Pattern challenge. Questions about higher-order functions, creating proxies for nested objects, and using the Reflect.set method are also covered in this segment.
Observer PatternLydia explains the observer pattern consists of an observable object and subscribers that will be notified by the observable object. This creates an efficient separation of concerns because the observable object has no knowledge of the subscribers. The subscribers are not aware of the underlying implementation that leads to the notification.
Observer Pattern SolutionLydia codes the solution to the Observer Pattern challenge.
Observer Pattern Q&ALydia answers questions about when to use the observer pattern, when to unsubscribe, dependent subscribers, Rx.js, and using multiple observables.
Factory PatternLydia explains the factory pattern is a function that returns an object. The function may accept parameters and use those parameters to create more properties on the returned object. This pattern is useful when creating multiple objects that share the same set of properties.
Factory Pattern SolutionLydia demonstrates the solution to the Factory Pattern challenge. The differences between factory functions and classes are also discussed in this segment.
Prototype PatternLydia outlines the prototype pattern which is more memory efficient than the factory pattern because it avoids the duplication of shared properties and methods by elevating them up the prototype chain. The prototype pattern can be used with the Object.create method or with ES6 classes.
Prototype Pattern SolutionLydia codes the solution to the Prototype Pattern challenge.
Container/Presentation PatternLydia explains how the container presentation pattern enforces a separation of concerns by abstracting the view from the application logic. Presentational components focus on how the data is shown to the user. Container components are responsible for the data passed to the presentational component.
Container/Presentation Pattern SolutionLydia codes the solution to the Container Presentation Pattern challenge.
Higher-Order Component PatternLydia demonstrates how higher-order components pass reusable logic down as a prop in React applications. This pattern is useful for maintaining a separate of concerns, however, naming collisions can occur and it can be difficult to understand which component is responsible for certain functionality.
Higher-Order Component Pattern SolutionLydia codes the solution to the Higher-Order Component Pattern challenge.
Render Props PatternLydia introduces the render props pattern and explains why it is more flexible than the higher-order pattern. With the render props pattern, a component is passed as props and is able to receive props. These props are explicitly passed so they are visible in the argument list and developers can easily see what the component expects.
Render Props Pattern SolutionLydia codes the solutions to the Render Props Pattern challenge. A question about the performance of rendering when there's a change in state is also discussed in this segment.
Hooks PatternLydia demonstrates that React hooks are special types of functions that can add state to a functional component, reuse stateful logic among multiple components, or manage a component's life cycle. Hooks simplify components by abstracting stateful logic.
Hooks Pattern SolutionLydia codes the solution to the Hooks Pattern challenge.
Provider PatternLydia explains how the provider pattern uses React's Context API to share data between components. This eliminates the need to "prop drill", or pass props from parent-to-child anytime a shared context is required. Components will re-render whenever a value changes so developers will want to be careful which components are consuming the context.
Provider Pattern SolutionLydia codes the solution to the Provider Pattern challenge.
Compound PatternLydia introduces the compound pattern and compares it to the provider pattern. With the compound pattern, multiple components work together to perform a single task. The wrapper component can be implemented either with a Provider or using the React.Children.map API.
Compound Pattern SolutionLydia codes the solution to the Compound Pattern challenge.
Bundling & CompilingLydia provides some background information about performance tools like bundlers, compilers, minifiers, and tree-shaking techniques. These tools can reduce the size of the code base, split the code base into pieces, and remove sections of code that are not being used.
Static & Dynamic ImportsLydia explains the difference between static and dynamic imports. Static imports are immediately available in the application bundle and are easy to optimize and tree shake. Dynamic imports provide a faster initial load but can lead to layout shifts or a decreased user experience if they are not loaded by the time they are needed. The React useInView hook and route-based splitting are also demonstrated in this segment.
Browser Hints: Prefetch & PreloadLydia demonstrates how browser hints inform the browser about critical resources. The prefetch hint tells the browser to fetch and cache resources that will be used soon. The preload hint can be used to fetch resources that are critical to the current page navigation.
Core Web VitalsLydia introduces the core web vitals which include the time to first byte, first contentful paint, largest contentful paint, time to interactive, cumulative layout shift, and first input delay.
Client-Side & Static RenderingLydia shares the benefits and tradeoffs of client-side and static rendering. Client-side rendering only needs a single request from the server and allows content to be immediately interactive. Static rendering utilizes the server to pre-render the html which is more beneficial for SEO and cachability since the client is not waiting for any additional requests to the backend.
Incremental Rerendering & SSRLydia explains that static rendering might lead to long build times if pages need to be pre-rendered. Incremental static generation allows developers to only pre-render a subset of pages. If the user requests a page that hasn't been pre-rendered, the page get server-rendered and then cached by the CDN. Server-side rendering and streaming server-side rendering are also discussed in this segment.