Advanced Concepts

Code splitting with React.lazy and Suspense

Code splitting is a performance optimization technique that breaks your React application into smaller bundles, loading only the code needed for the current view. This improves initial load times and overall app responsiveness.

What Is React.lazy

React.lazy is a built-in React function that enables dynamic import of components. It allows you to load components lazily when they are rendered, rather than including them in the main bundle.

What Is Suspense

Suspense is a React component that lets you specify a fallback UI (like a loading spinner) to display while a lazy-loaded component is being fetched and rendered.

How It Works

• Wrap the lazy-loaded component using React.lazy(() => import('./Component'))
• Use <Suspense fallback={...}> to wrap the lazy component in your JSX
• The fallback UI renders while the lazy component is loading

Benefits of Code Splitting

• Reduces the size of the initial JavaScript bundle
• Speeds up page load and improves perceived performance
• Delays loading of non-critical components until needed
• Improves user experience, especially on slower networks

Best Practices

• Use code splitting for large components or routes
• Combine with React Router to lazily load pages
• Provide meaningful fallback UI to maintain engagement
• Test loading states to avoid blank screens or jank

Using React.lazy and Suspense allows React developers to efficiently implement code splitting and enhance application performance with minimal setup.

Error boundaries

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of crashing the entire app.

Purpose of Error Boundaries

They help improve the user experience by preventing the whole app from unmounting when a component throws an error, allowing graceful error handling and recovery.

How Error Boundaries Work

• Implemented as class components that define componentDidCatch(error, info) lifecycle method
• Also implement static getDerivedStateFromError(error) to update state and render fallback UI
• Catch errors during rendering, lifecycle methods, and constructors of child components

Limitations

• Do not catch errors inside event handlers
• Do not catch errors in asynchronous code, server-side rendering, or errors thrown in error boundary itself

Typical Usage

• Wrap error-prone components or routes with an error boundary
• Show fallback UI to inform users and offer retry options
• Log errors to monitoring services for debugging

Benefits

• Improves app stability and user experience
• Prevents complete app crashes due to component errors
• Provides centralized error handling for parts of the UI

Error boundaries are essential for building resilient React applications by handling unexpected runtime errors gracefully without breaking the entire interface.

Portals and Modals

Portals in React provide a way to render components outside of the main DOM hierarchy, which is particularly useful for UI elements like modals, tooltips, and dropdowns that require separate layering from their parent components.

What Are Portals

React Portals allow you to render children into a DOM node that exists outside the root component’s hierarchy. This is done using the ReactDOM.createPortal method, which takes two arguments: the JSX to render and the target DOM node.

Why Use Portals

• Prevent styling and z-index issues by placing content outside parent containers
• Maintain proper positioning and behavior for overlays or popups
• Improve accessibility by avoiding nesting issues

Modals in React

Modals are popup components used to display content or prompt users without navigating away from the current page. They are commonly implemented using portals to ensure they render above all other elements.

Typical Modal Behavior

• Appears centered on the screen with a backdrop
• Blocks interaction with the underlying UI
• Closes when clicking outside or pressing Escape

Best Practices

• Use portals to keep modals outside the app root for proper layering
• Manage modal visibility with state
• Handle accessibility with focus trapping and keyboard support
• Reuse modal components to maintain consistency

Portals are a powerful feature in React for rendering components like modals that need to break out of the usual parent-child DOM structure while maintaining seamless functionality and styling control.

Refs and use Imperative Handle

Refs and the useImperativeHandle hook in React are used to access and customize the behavior of child components from a parent component. They allow direct manipulation of DOM nodes or component instances, typically for advanced use cases.

What Are Refs

Refs (short for references) provide a way to access DOM elements or React components directly. You create refs using the useRef hook or React.createRef in class components. They are often used for focusing inputs, controlling animations, or integrating with third-party libraries.

When to Use Refs

• Managing focus or text selection in input fields
• Triggering imperative animations
• Reading or modifying DOM elements directly
• Accessing child component methods

What Is Use Imperative Handle

useImperativeHandle is a React Hook used with forwardRef to customize the values and functions exposed to parent components when a ref is attached to a child component. It enables the child to control exactly what the parent can access through the ref.

Typical Use Case

• Expose specific functions (like focus or reset) from a custom input component to a parent
• Encapsulate internal logic while still giving limited external access

How It Works

• Wrap the child component with forwardRef
• Inside the child, use useImperativeHandle(ref, () => ({ ... }))
• Return an object that defines the instance values or methods you want to expose

Best Practices

• Use refs and useImperativeHandle sparingly and only when necessary
• Prefer declarative code over imperative logic whenever possible
• Keep the exposed API small and focused to maintain component encapsulation

Refs and useImperativeHandle provide a way to handle advanced component interactions and control, especially when working with reusable components that require limited imperative access from parent components.