Advanced React: Design System, Design Patterns, Performance

Explore layout components in React, learn how they organize page structure, and separate layout styles from core components to decouple logic from placement, enabling flexible, reusable designs.

Study the split screen pattern in React by building a two-panel layout with the styled components library, passing left and right components, and applying flex styling.

Enhance the split screen component by adding left width and right width props (with defaults), pass values to a styled component, and switch to using children for cleaner, subcomponent composition.

Explore building reusable list components in React by composing small and large list items for authors and books, using maps and props to control display and usability.

Build reusable list components by implementing small and large book list items, render book details from props, and extend with a numbered list to illustrate React design patterns.

Design and implement a modal component from scratch in React, applying a modal design pattern with useState, styled-components, and click handling to open, close, and stop propagation.

Explore React design patterns that address common challenges, from reusable layouts and modals to shared data fetching, form management, and functional programming principles for maintainable code.

Explore container components that handle data loading and management for child components, extracting shared logic and passing data via props to keep children unaware of data sources.

Build a current user loader container that fetches the current user from the server endpoint using useState and useEffect and axios, then passes the user to children via props.

Create a flexible user loader component by replacing the current user loader to fetch data by id from the endpoint users/{id}, and pass the id as a prop.

Design a generic resource loader container in React that fetches data from a given URL for any resource, like user or book, and passes it to a corresponding info component.

Design a data source container that is data-agnostic, accepts a getData function, and passes fetched data as props to children, separating fetching logic from UI, from server or local storage.

Explore container components and the render prop pattern to pass data to children without relying on clone elements, improving maintainability, readability, and code clarity.

Fetch data from the browser local storage with a get data from local storage function and a data source component, then display it via a message component in React.

Explore controlled and uncontrolled components in React, a fundamental design pattern, understand state management with useState, and learn why controlled components improve usability and testability.

Explore uncontrolled components in React by building a simple form that uses refs to access input values and to prevent default submission, while contrasting with later controlled forms.

Build a controlled React form by tracking inputs with useState, wiring each input's value and onChange, and adding useEffect-based validation with real-time error messages.

Transform an uncontrolled modal into a controlled component by moving state management to the parent and passing shouldDisplay and onClose as props.

Build an uncontrolled onboarding flow in React that collects step data, tracks the current step index, and advances with a go next function, finishing with an on done callback.

Collect data across an onboarding flow by updating a data object in the go next function, logging updates, and moving from an uncontrolled to a controlled flow with on done.

Transform an uncontrolled onboarding flow into a controlled flow component by lifting state to the parent, wiring current index and on next props, and using data-driven conditions to render steps.

Explore higher order components in React, a pattern where components return another component rather than JSX, acting as factories that enable shared behavior and adding functionality without modifying original code.

Create a higher order component to log and validate props by wrapping the user info component, then test with sample props to confirm console output.

Learn to extend a higher-order component to fetch, display, and post or update a user via server endpoints, with initial user state, editing, and reset functionality.

Build a user form with a higher-order component, passing core props like user, onChangeUser, onPostUser, and onResetUser to enable fetching, updating, and posting data.

Leverage an enhanced higher-order component to build a generic include updatable resource that fetches and updates any server resource, using resource url and resource name for dynamic props.

Explore custom hooks as a React design pattern, combining useState and useEffect to create reusable logic, such as a useUsers hook for fetching data.

Create a useCurrentUser custom hook to fetch and expose current user data with axios and useEffect, returning the user for display in the user info component.

Create a use user custom hook to fetch a user by id from a dynamic url, reload data on id changes, and reuse the component to render multiple users.

Extend the use resource hook to fetch data from any resource, such as users or books, by passing a resource url as an argument and reusing the hook across resources.

Generalize the use resource hook into a use data source, accepting a data-fetching function to pull from server or local storage, and use callback to prevent infinite rerenders.

Learn functional programming in React, with pure functions and minimal mutation, using functions as first class citizens, and patterns like recursive components, partially applied components, and component composition for modularity.

Learn to implement the recursive pattern in React by rendering nested data with a recursive component that iterates object keys and values, using a stopping condition for non-objects.

Explore the composition pattern in React by building a reusable button component and specialized red and green buttons, showing how props and inline styles enable composition over inheritance.

Explore the partial pattern as a step beyond composition, using a higher order component to create partially applied components with partial props. Apply it to reusable red and small buttons.

Master compound components in React by breaking a card into header, body, and footer, then composing them as attached subcomponents. Use context to share state across parts.

Demonstrate the observer (subscriber) pattern by using a shared emitter to let two sibling components communicate, with increment and decrement buttons emitting events while a counter listens and updates.

Explore React portals with createPortal to render a component into a different DOM node while preserving its React placement, and learn about attaching to a dedicated div and event bubbling.

Master error boundaries in React by using a class boundary with getDerivedStateFromError and componentDidCatch to show a fallback interface and log errors, wrapping components or the whole app.

Explore how keys in React differentiate components and trigger fresh renders to preserve or reset state across dynamic UIs, with practical examples using shirts and shoes counters.

explores when to use useLayoutEffect versus useEffect in a React app, showing how to calculate layout before render to prevent UI lag and ensure correct positioning.

Master the useId hook in React to generate unique, server-side rendering safe IDs for labels and inputs, avoiding duplicates with template literals, and ensuring accessible forms.

Use a callback ref with useCallback to focus an input after render, handle mounting and unmounting, and switch to a real useRef when you need a current property.

Apply useDeferredValue with a memoized heavy component to smooth typing delays and keep the input responsive. See how the deferred value prioritizes fast input renders while deferring heavier work.

Learn how useTransition enables non immediate state updates with startTransition, letting you override a pending update (like switching from reviews to cover) while showing a loading indicator and improving responsiveness.

Explore asynchronous data handling in React Router v6 with defer, await, and suspense fallbacks, and implement lazy loading and loaders to optimize performance.

Use the as prop to render a button as an anchor tag while preserving modular styles and anchor tag props, and pass size and other props for consistency.

Optimize context API in a React TypeScript app by splitting state and dispatch into separate contexts, wrapping with a cart provider, and using targeted hooks to reduce re-renders.