Advanced Controlled Form with Validation:

import React, { useState, useCallback, useMemo } from 'react';

function AdvancedForm() {
  const [formData, setFormData] = useState({
    username: '',
    email: '',
    password: ''
  });
  const [errors, setErrors] = useState({});
  const [touched, setTouched] = useState({});
  
  // Memoized validators to prevent recreation on each render
  const validators = useMemo(() => ({
    username: (value) => value.length >= 3 ? null : 'Username must be at least 3 characters',
    email: (value) => /\S+@\S+\.\S+/.test(value) ? null : 'Email is invalid',
    password: (value) => value.length >= 8 ? null : 'Password must be at least 8 characters'
  }), []);
  
  // Efficient change handler with function memoization
  const handleChange = useCallback((e) => {
    const { name, value } = e.target;
    
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
    
    setTouched(prev => ({
      ...prev,
      [name]: true
    }));
    
    const error = validators[name](value);
    setErrors(prev => ({
      ...prev,
      [name]: error
    }));
  }, [validators]);
  
  const handleSubmit = (e) => {
    e.preventDefault();
    
    // Mark all fields as touched
    const allTouched = Object.keys(formData).reduce((acc, key) => {
      acc[key] = true;
      return acc;
    }, {});
    setTouched(allTouched);
    
    // Validate all fields
    const formErrors = Object.keys(formData).reduce((acc, key) => {
      const error = validators[key](formData[key]);
      if (error) acc[key] = error;
      return acc;
    }, {});
    
    setErrors(formErrors);
    
    // If no errors, submit the form
    if (Object.keys(formErrors).length === 0) {
      console.log('Form submitted with data:', formData);
    }
  };
  
  const isFormValid = Object.values(errors).every(error => error === null);
  
  return (
    <form onSubmit={handleSubmit} noValidate>
      {Object.keys(formData).map(key => (
        <div key={key}>
          <label htmlFor={key}>{key.charAt(0).toUpperCase() + key.slice(1)}</label>
          <input
            type={key === 'password' ? 'password' : key === 'email' ? 'email' : 'text'}
            id={key}
            name={key}
            value={formData[key]}
            onChange={handleChange}
            className={touched[key] && errors[key] ? 'error' : ''}
          />
          {touched[key] && errors[key] && (
            <div className="error-message">{errors[key]}</div>
          )}
        </div>
      ))}
      <button type="submit" disabled={!isFormValid}>Submit</button>
    </form>
  );
}
        

Uncontrolled Form with FormData API:

import React, { useRef } from 'react';

function EnhancedUncontrolledForm() {
  const formRef = useRef();
  
  const handleSubmit = (e) => {
    e.preventDefault();
    
    // Using the FormData API for cleaner data extraction
    const formData = new FormData(formRef.current);
    const formValues = Object.fromEntries(formData.entries());
    
    // Validate on submit
    const errors = {};
    if (formValues.username.length < 3) {
      errors.username = 'Username must be at least 3 characters';
    }
    
    if (Object.keys(errors).length === 0) {
      console.log('Form data:', formValues);
    } else {
      console.error('Validation errors:', errors);
    }
  };
  
  return (
    <form ref={formRef} onSubmit={handleSubmit} noValidate>
      <div>
        <label htmlFor="username">Username</label>
        <input 
          type="text" 
          id="username" 
          name="username" 
          defaultValue="" 
        />
      </div>
      <div>
        <label htmlFor="email">Email</label>
        <input 
          type="email" 
          id="email" 
          name="email" 
          defaultValue="" 
        />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}
        

Internal Context Implementation:

// Creating context with associated Provider and Consumer
import React, { createContext, useState, useContext, useMemo } from 'react';

// Type-safe context with TypeScript
type UserContextType = {
  user: {
    id: string;
    username: string;
    permissions: string[];
  } | null;
  setUser: (user: UserContextType['user']) => void;
  isAuthenticated: boolean;
};

// Default value should match context shape
const defaultValue: UserContextType = {
  user: null,
  setUser: () => {}, // No-op function
  isAuthenticated: false
};

// Create context with proper typing
const UserContext = createContext<UserContextType>(defaultValue);

// Provider component with optimized value memoization
export function UserProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<UserContextType['user']>(null);
  
  // Memoize the context value to prevent unnecessary re-renders
  const value = useMemo(() => ({
    user,
    setUser,
    isAuthenticated: user !== null
  }), [user]);
  
  return (
    <UserContext.Provider value={value}>
      {children}
    </UserContext.Provider>
  );
}

// Custom hook for consuming context with error handling
export function useUser() {
  const context = useContext(UserContext);
  
  if (context === undefined) {
    throw new Error('useUser must be used within a UserProvider');
  }
  
  return context;
}

// Example authenticated component with proper context usage
function AuthGuard({ children }: { children: React.ReactNode }) {
  const { isAuthenticated, user } = useUser();
  
  if (!isAuthenticated) {
    return <Navigate to="/login" />;
  }
  
  // Check for specific permission
  if (user && !user.permissions.includes('admin')) {
    return <AccessDenied />;
  }
  
  return <>{children}</>;
}
        

Context Composition Pattern:

// Composing multiple contexts for separation of concerns
function App() {
  return (
    <AuthProvider>
      <ThemeProvider>
        <LocalizationProvider>
          <NotificationProvider>
            <Router />
          </NotificationProvider>
        </LocalizationProvider>
      </ThemeProvider>
    </AuthProvider>
  );
}
        

Context with Reducer Pattern:

import React, { createContext, useReducer, useContext } from 'react';

// Action types for type safety
const ActionTypes = {
  LOGIN: 'LOGIN',
  LOGOUT: 'LOGOUT',
  UPDATE_PROFILE: 'UPDATE_PROFILE'
};

// Initial state
const initialState = {
  user: null,
  isAuthenticated: false,
  isLoading: false,
  error: null
};

// Reducer function to handle state transitions
function authReducer(state, action) {
  switch (action.type) {
    case ActionTypes.LOGIN:
      return {
        ...state,
        user: action.payload,
        isAuthenticated: true,
        error: null
      };
    case ActionTypes.LOGOUT:
      return {
        ...state,
        user: null,
        isAuthenticated: false
      };
    case ActionTypes.UPDATE_PROFILE:
      return {
        ...state,
        user: { ...state.user, ...action.payload }
      };
    default:
      throw new Error(`Unhandled action type: ${action.type}`);
  }
}

// Create context with default values
const AuthStateContext = createContext(initialState);
const AuthDispatchContext = createContext(null);

// Provider component that manages state with useReducer
export function AuthProvider({ children }) {
  const [state, dispatch] = useReducer(authReducer, initialState);
  
  return (
    <AuthStateContext.Provider value={state}>
      <AuthDispatchContext.Provider value={dispatch}>
        {children}
      </AuthDispatchContext.Provider>
    </AuthStateContext.Provider>
  );
}

// Custom hooks for consuming the auth context
export function useAuthState() {
  const context = useContext(AuthStateContext);
  if (context === undefined) {
    throw new Error('useAuthState must be used within an AuthProvider');
  }
  return context;
}

export function useAuthDispatch() {
  const context = useContext(AuthDispatchContext);
  if (context === undefined) {
    throw new Error('useAuthDispatch must be used within an AuthProvider');
  }
  return context;
}
        

Context Splitting for Performance:

// Split context by update frequency
const UserDataContext = createContext(null);     // Rarely updates
const UserPrefsContext = createContext(null);    // May update often
const NotificationsContext = createContext(null); // Updates frequently

function UserProvider({ children }) {
  const [userData, setUserData] = useState(null);
  const [userPrefs, setUserPrefs] = useState({});
  const [notifications, setNotifications] = useState([]);
  
  // Components only re-render when their specific context changes
  return (
    <UserDataContext.Provider value={userData}>
      <UserPrefsContext.Provider value={userPrefs}>
        <NotificationsContext.Provider value={notifications}>
          {children}
        </NotificationsContext.Provider>
      </UserPrefsContext.Provider>
    </UserDataContext.Provider>
  );
}
        

1. useRef in Function Components:

import React, { useRef, useEffect } from 'react';

function MeasureExample() {
  const divRef = useRef(null);
  
  useEffect(() => {
    if (divRef.current) {
      const dimensions = divRef.current.getBoundingClientRect();
      console.log('Element dimensions:', dimensions);
      
      // Demonstrate mutation - useRef object persists across renders
      divRef.current.specialProperty = 'This persists between renders';
    }
  }, []);
  
  return <div ref={divRef}>Measure me</div>;
}
        

2. createRef in Class Components:

import React, { Component, createRef } from 'react';

class CustomTextInput extends Component {
  constructor(props) {
    super(props);
    this.textInput = createRef();
  }
  
  componentDidMount() {
    // Accessing the DOM node
    this.textInput.current.focus();
  }
  
  render() {
    return <input ref={this.textInput} />;
  }
}
        

3. Callback Refs for Fine-Grained Control:

import React, { Component } from 'react';

class CallbackRefExample extends Component {
  constructor(props) {
    super(props);
    this.node = null;
  }
  
  // This function will be called when ref is attached and detached
  setNodeRef = (element) => {
    if (element) {
      // When ref is attached
      console.log('Ref attached');
      this.node = element;
      // Set up any DOM measurements or manipulations
    } else {
      // When ref is detached
      console.log('Ref detached');
      // Clean up any event listeners or third-party integrations
    }
  };
  
  render() {
    return <div ref={this.setNodeRef}>Callback ref example</div>;
  }
}
        

// ForwardedInput.js
import React, { forwardRef } from 'react';

// forwardRef accepts a render function
const ForwardedInput = forwardRef((props, ref) => (
  <input ref={ref} {...props} />
));

export default ForwardedInput;

// Usage
import React, { useRef } from 'react';
import ForwardedInput from './ForwardedInput';

function Form() {
  const inputRef = useRef(null);
  
  const focusInput = () => {
    inputRef.current.focus();
  };
  
  return (
    <div>
      <ForwardedInput ref={inputRef} placeholder="Type here..." />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}
        

1.1 Memo, PureComponent, and shouldComponentUpdate

// Functional component with React.memo
const MemoizedComponent = React.memo(
  function MyComponent(props) {
    /* render using props */
  },
  // Optional custom comparison function (returns true if equal, false if needs re-render)
  (prevProps, nextProps) => {
    return prevProps.complexObject.id === nextProps.complexObject.id;
  }
);

// Class Component with PureComponent (shallow props/state comparison)
class OptimizedListItem extends React.PureComponent {
  render() {
    return <div>{this.props.item.name}</div>;
  }
}

// Manual control with shouldComponentUpdate
class HighlyOptimizedComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // Custom deep comparison logic
    return this.props.value !== nextProps.value || 
           !isEqual(this.props.data, nextProps.data);
  }
  
  render() {
    return <div>{/* content */}</div>;
  }
}
        

1.2 Preventing Recreation of Objects and Functions

import React, { useState, useCallback, useMemo } from 'react';

function SearchableList({ items, defaultSearchTerm }) {
  const [searchTerm, setSearchTerm] = useState(defaultSearchTerm);
  
  // Bad: Creates new function every render
  // const handleSearch = (e) => setSearchTerm(e.target.value);
  
  // Good: Memoized function reference
  const handleSearch = useCallback((e) => {
    setSearchTerm(e.target.value);
  }, []);
  
  // Bad: Recalculates on every render
  // const filteredItems = items.filter(item => 
  //   item.name.toLowerCase().includes(searchTerm.toLowerCase())
  // );
  
  // Good: Memoized calculation
  const filteredItems = useMemo(() => {
    console.log("Filtering items...");
    return items.filter(item => 
      item.name.toLowerCase().includes(searchTerm.toLowerCase())
    );
  }, [items, searchTerm]); // Only recalculate when dependencies change
  
  return (
    <div>
      <input type="text" value={searchTerm} onChange={handleSearch} />
      <ul>
        {filteredItems.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}
        

2.1 State Colocation

// Before: State in parent causes entire tree to re-render
function ParentComponent() {
  const [value, setValue] = useState("");
  
  return (
    <>
      <input 
        type="text" 
        value={value} 
        onChange={(e) => setValue(e.target.value)} 
      />
      <ExpensiveTree />
    </>
  );
}

// After: State moved to a sibling component
function OptimizedParent() {
  return (
    <>
      <InputComponent />
      <ExpensiveTree />
    </>
  );
}

function InputComponent() {
  const [value, setValue] = useState("");
  return (
    <input 
      type="text" 
      value={value} 
      onChange={(e) => setValue(e.target.value)} 
    />
  );
}
        

2.2 Component Splitting and Props Handling

// Before: A change in userData causes both profile and posts to re-render
function UserPage({ userData, posts }) {
  return (
    <div>
      <div className="profile">
        <h2>{userData.name}</h2>
        <p>{userData.bio}</p>
      </div>
      
      <div className="posts">
        {posts.map(post => (
          <div key={post.id}>{post.title}</div>
        ))}
      </div>
    </div>
  );
}

// After: Separated components with specific props
function UserPage({ userData, posts }) {
  return (
    <div>
      <UserProfile userData={userData} />
      <UserPosts posts={posts} />
    </div>
  );
}

const UserProfile = React.memo(({ userData }) => {
  return (
    <div className="profile">
      <h2>{userData.name}</h2>
      <p>{userData.bio}</p>
    </div>
  );
});

const UserPosts = React.memo(({ posts }) => {
  return (
    <div className="posts">
      {posts.map(post => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
});
        

3.1 Virtualization for Long Lists

import { FixedSizeList } from 'react-window';

function VirtualizedList({ items }) {
  const Row = ({ index, style }) => (
    <div style={style}>
      Item {items[index].name}
    </div>
  );

  return (
    <FixedSizeList
      height={500}
      width="100%"
      itemCount={items.length}
      itemSize={35}
    >
      {Row}
    </FixedSizeList>
  );
}
        

3.2 Code Splitting and Dynamic Imports

// Route-based code splitting
import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const Dashboard = lazy(() => import('./routes/Dashboard'));
const Settings = lazy(() => 
  import('./routes/Settings')
    .then(module => {
      // Perform additional initialization if needed
      return module;
    })
);

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/dashboard" component={Dashboard} />
          <Route path="/settings" component={Settings} />
        </Switch>
      </Suspense>
    </Router>
  );
}

// Feature-based code splitting
function ProductDetail({ productId }) {
  const [showReviews, setShowReviews] = useState(false);
  const [ReviewsComponent, setReviewsComponent] = useState(null);
  
  const loadReviews = async () => {
    // Load reviews component only when needed
    const ReviewsModule = await import('./ProductReviews');
    setReviewsComponent(() => ReviewsModule.default);
    setShowReviews(true);
  };
  
  return (
    <div>
      <h1>Product Details</h1>
      {/* Product information */}
      <button onClick={loadReviews}>Show Reviews</button>
      {showReviews && ReviewsComponent && <ReviewsComponent productId={productId} />}
    </div>
  );
}
        

4.1 Optimizing Context API

// Split contexts by update frequency
const UserContext = React.createContext();
const ThemeContext = React.createContext();

// Before: One context for everything
function AppBefore() {
  const [user, setUser] = useState({});
  const [theme, setTheme] = useState('light');
  
  return (
    <AppContext.Provider value={{ user, setUser, theme, setTheme }}>
      <Layout />
    </AppContext.Provider>
  );
}

// After: Separate contexts by update frequency
function AppAfter() {
  return (
    <UserProvider>
      <ThemeProvider>
        <Layout />
      </ThemeProvider>
    </UserProvider>
  );
}

// Context with memoized value
function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  
  // Memoize context value to prevent needless re-renders
  const themeValue = useMemo(() => ({ 
    theme, 
    setTheme 
  }), [theme]);
  
  return (
    <ThemeContext.Provider value={themeValue}>
      {children}
    </ThemeContext.Provider>
  );
}
        

4.2 State Normalization (Redux Pattern)

// Before: Nested state structure
const initialState = {
  users: [
    {
      id: 1,
      name: "John",
      posts: [
        { id: 101, title: "First post" },
        { id: 102, title: "Second post" }
      ]
    },
    {
      id: 2,
      name: "Jane",
      posts: [
        { id: 201, title: "Hello world" }
      ]
    }
  ]
};

// After: Normalized structure
const normalizedState = {
  users: {
    byId: {
      1: { id: 1, name: "John", postIds: [101, 102] },
      2: { id: 2, name: "Jane", postIds: [201] }
    },
    allIds: [1, 2]
  },
  posts: {
    byId: {
      101: { id: 101, title: "First post", userId: 1 },
      102: { id: 102, title: "Second post", userId: 1 },
      201: { id: 201, title: "Hello world", userId: 2 }
    },
    allIds: [101, 102, 201]
  }
};
        

Using the React Profiler Programmatically:

import { Profiler } from 'react';

function onRenderCallback(
  id, // the "id" prop of the Profiler tree
  phase, // "mount" (first render) or "update" (re-render)
  actualDuration, // time spent rendering
  baseDuration, // estimated time for entire subtree without memoization
  startTime, // when React began rendering
  commitTime, // when React committed the updates
  interactions // the Set of interactions that triggered this update
) {
  // Log or send metrics to your analytics service
  console.log(`Rendering ${id} took ${actualDuration}ms`);
}

function MyApp() {
  return (
    <Profiler id="App" onRender={onRenderCallback}>
      <!-- Your app content -->
    </Profiler>
  );
}
        

1. Context API with Performance Optimization:

import React, { createContext, useContext, useMemo, useState } from "react";

// Create separate contexts for different data domains
const UserContext = createContext(null);

// Create a custom provider with memoization
export function UserProvider({ children }) {
  const [user, setUser] = useState(null);
  
  // Memoize the context value to prevent unnecessary re-renders
  const value = useMemo(() => ({ 
    user, 
    setUser 
  }), [user]);
  
  return (
    <UserContext.Provider value={value}>
      {children}
    </UserContext.Provider>
  );
}

// Custom hook to consume the context
export function useUser() {
  const context = useContext(UserContext);
  if (context === null) {
    throw new Error("useUser must be used within a UserProvider");
  }
  return context;
}
        

2. Component Composition with Render Props:

function App() {
  const userData = { name: "John", role: "Admin" };
  
  return (
    <Page
      header={<Header />}
      sidebar={<Sidebar />}
      content={<UserProfile userData={userData} />}
    />
  );
}

function Page({ header, sidebar, content }) {
  return (
    <div className="page">
      <div className="header">{header}</div>
      <div className="container">
        <div className="sidebar">{sidebar}</div>
        <div className="content">{content}</div>
      </div>
    </div>
  );
}
        

3. Atomic State Management with Recoil:

import { atom, useRecoilState, useRecoilValue, selector } from "recoil";

// Define atomic pieces of state
const userAtom = atom({
  key: "userState",
  default: null,
});

const isAdminSelector = selector({
  key: "isAdminSelector",
  get: ({ get }) => {
    const user = get(userAtom);
    return user?.role === "admin";
  },
});

// Components can directly access the state they need
function UserProfile() {
  const user = useRecoilValue(userAtom);
  return <div>Hello, {user.name}!</div>;
}

function AdminControls() {
  const isAdmin = useRecoilValue(isAdminSelector);
  return isAdmin ? <div>Admin Controls</div> : null;
}
        

React's Internal Component Model:

// This JSX
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// Is transformed to this createElement call
function Welcome(props) {
  return React.createElement(
    'h1',
    null,
    'Hello, ',
    props.name
  );
}

// Which produces this element object
{
  type: 'h1',
  props: {
    children: ['Hello, ', props.name]
  },
  key: null,
  ref: null
}
        

React 18 Concurrent Rendering:

// React 18's createRoot API enables concurrent features
import { createRoot } from 'react-dom/client';

        //
        Create a root
            const
        root = createRoot(document.getElementById('root'));

        // Initial render
root.render(<App />);

        // Unlike ReactDOM.render, this can interrupt and prioritize updates
//
        when using features like useTransition or useDeferredValue
            

Custom Renderer Implementation Pattern:

// Simplified example of how a custom renderer connects to React
import Reconciler from 'react-reconciler';

        //
        Create a custom host config
            const
        hostConfig = {
            createInstance(type, props) {
            //
        Create platform-specific UI element
            },
            appendChild(parent, child) {
            // Platform-specific appendChild
            },
            // Many more methods required...
            };

        //
        Create a reconciler
        with your host config
const reconciler = Reconciler(hostConfig);

        //
        Create a renderer that uses the reconciler
            function render(element, container, callback) {
            //
        Create a root fiber and
        start reconciliation process
            const
        containerFiber = reconciler.createContainer(container);
        reconciler.updateContainer(element, containerFiber, null, callback);
        }

// This is your platform's equivalent of ReactDOM.render
export { render };
        

Event Bubbling Through Portals:

// This demonstrates how events bubble through the React tree, not the DOM tree
function Parent() {
  const [clicks, setClicks] = useState(0);
  
  const handleClick = () => {
    setClicks(c => c + 1);
    console.log('Parent caught the click!');
  };
  
  return (
    <div onClick={handleClick}>
      <p>Clicks: {clicks}</p>
      <PortalChild />
    </div>
  );
}

function PortalChild() {
  // This button is rendered in a different DOM node
  // But its click event still bubbles to the Parent component
  return ReactDOM.createPortal(
    <button>Click Me (I'm in a portal)</button>,
    document.getElementById('portal-container')
  );
}
        

Portal with Clean Lifecycle Management:

function DynamicPortal({ children }) {
  // Create portal container element on demand
  const [portalNode, setPortalNode] = useState(null);
  
  useEffect(() => {
    // Create and append on mount
    const node = document.createElement('div');
    node.className = 'dynamic-portal-container';
    document.body.appendChild(node);
    setPortalNode(node);
    
    // Clean up on unmount
    return () => {
      document.body.removeChild(node);
    };
  }, []);
  
  // Only render portal after container is created
  return portalNode ? ReactDOM.createPortal(children, portalNode) : null;
}
        

Comprehensive Error Boundary Implementation:

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      hasError: false,
      error: null,
      errorInfo: null 
    };
  }

  static getDerivedStateFromError(error) {
    // Called during render, must be pure
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    // Called after render is committed, can have side effects
    this.setState({ errorInfo });
    
    // Report to monitoring service like Sentry, LogRocket, etc.
    // reportError(error, errorInfo);
    
    // Log locally during development
    if (process.env.NODE_ENV !== 'production') {
      console.error('Error caught by boundary:', error);
      console.error('Component stack:', errorInfo.componentStack);
    }
  }

  resetErrorBoundary = () => {
    const { onReset } = this.props;
    this.setState({ hasError: false, error: null, errorInfo: null });
    if (onReset) onReset();
  };

  render() {
    const { fallback, fallbackRender, FallbackComponent } = this.props;
    
    if (this.state.hasError) {
      // Priority of fallback rendering options:
      if (fallbackRender) {
        return fallbackRender({
          error: this.state.error,
          errorInfo: this.state.errorInfo,
          resetErrorBoundary: this.resetErrorBoundary
        });
      }
      
      if (FallbackComponent) {
        return ;
      }
      
      if (fallback) {
        return fallback;
      }
      
      // Default fallback
      return (
        

          
Something went wrong:
          
{this.state.error && this.state.error.toString()}
          {process.env.NODE_ENV !== 'production' && (
            

              {this.state.errorInfo && this.state.errorInfo.componentStack}
            
          )}
          Try again
        
      );
    }

    return this.props.children;
  }
}
        

Strategic Error Boundary Placement:

function Application() {
  return (
    /* App-wide boundary for catastrophic errors */
    
      
        

        
        
        {/* Route-level boundaries */}
        
          
            
              
            
          
          
          
            
              
            
          
          
          {/* Widget-level boundaries for isolated components */}
          
            
              
                
              
              
              
                
              
            
          
        
        
        

Handling Non-Component Errors:

// For event handlers
function handleClick() {
  try {
    risky_operation();
  } catch (error) {
    logError(error);
    // Handle gracefully
  }
}

// For async operations
function AsyncComponent() {
  const [error, setError] = useState(null);
  
  useEffect(() => {
    let isMounted = true;
    
    fetchData()
      .then(data => {
        if (isMounted) setData(data);
      })
      .catch(error => {
        if (isMounted) setError(error);
      });
      
    return () => { isMounted = false };
  }, []);
  
  if (error) {
    return  setError(null)} />;
  }
  
  return ;
}
        

Error Handling Hooks:

// Custom hook for handling async errors
function useAsyncErrorHandler(asyncFn, options = {}) {
  const [state, setState] = useState({
    data: null,
    error: null,
    loading: false
  });
  
  const execute = useCallback(async (...args) => {
    try {
      setState(prev => ({ ...prev, loading: true, error: null }));
      const data = await asyncFn(...args);
      if (options.onSuccess) options.onSuccess(data);
      setState({ data, loading: false, error: null });
      return data;
    } catch (error) {
      if (options.onError) options.onError(error);
      setState(prev => ({ ...prev, error, loading: false }));
      
      // Optionally rethrow to let error boundaries catch it
      if (options.rethrow) throw error;
    }
  }, [asyncFn, options]);
  
  return [execute, state];
}

// Usage with error boundary as a fallback
function DataFetcher({ endpoint }) {
  const [fetchData, { data, error, loading }] = useAsyncErrorHandler(
    () => api.get(endpoint),
    { 
      rethrow: true, // Let error boundary handle catastrophic errors
      onError: (err) => console.log(`Error fetching ${endpoint}:`, err)
    }
  );
  
  useEffect(() => {
    fetchData();
  }, [fetchData, endpoint]);
  
  if (loading) return ;
  
  // Minor errors can be handled locally
  if (error && error.status === 404) {
    return ;
  }
  
  // Render data if available
  return data ?  : null;
}
        

Advanced Function Component with Hooks:

import React, { useState, useEffect, useCallback, useMemo } from 'react';

const UserProfile = ({ userId }) => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  
  // Effect hook for data fetching
  useEffect(() => {
    const fetchUser = async () => {
      setLoading(true);
      try {
        const response = await api.getUser(userId);
        setUser(response.data);
      } catch (error) {
        console.error('Failed to fetch user:', error);
      } finally {
        setLoading(false);
      }
    };
    
    fetchUser();
    return () => { /* cleanup */ };
  }, [userId]);
  
  // Memoized expensive calculation
  const userStats = useMemo(() => {
    if (!user) return null;
    return computeUserStatistics(user);
  }, [user]);
  
  // Memoized event handler
  const handleUpdateProfile = useCallback(() => {
    // Implementation
  }, [user]);
  
  if (loading) return <Spinner />;
  if (!user) return <NotFound />;
  
  return (
    <div>
      <UserHeader user={user} onUpdate={handleUpdateProfile} />
      <UserStats stats={userStats} />
      <UserContent user={user} />
    </div>
  );
};
        

Higher-Order Component Example:

// HOC that adds authentication handling
function withAuth(Component) {
  return function AuthenticatedComponent(props) {
    const [isAuthenticated, setIsAuthenticated] = useState(false);
    const [isLoading, setIsLoading] = useState(true);
    
    useEffect(() => {
      const checkAuth = async () => {
        try {
          const authStatus = await authService.checkAuthentication();
          setIsAuthenticated(authStatus);
        } catch (error) {
          console.error(error);
          setIsAuthenticated(false);
        } finally {
          setIsLoading(false);
        }
      };
      
      checkAuth();
    }, []);
    
    if (isLoading) return <Spinner />;
    if (!isAuthenticated) return <Redirect to="/login" />;
    
    return <Component {...props} />;
  };
}

// Usage
const ProtectedDashboard = withAuth(Dashboard);
        

TypeScript Props Interface Example:

interface UserProfileProps {
  name: string;
  age: number;
  isActive: boolean;
  lastLogin?: Date; // Optional prop
  roles: string[];
  metadata: {
    accountCreated: Date;
    preferences: Record<string, unknown>;
  };
  onProfileUpdate: (userId: string, data: Record<string, unknown>) => Promise<void>;
}

const UserProfile: React.FC<UserProfileProps> = ({
  name,
  age,
  isActive,
  lastLogin,
  roles,
  metadata,
  onProfileUpdate
}) => {
  // Component implementation
};

// Default props can be specified
UserProfile.defaultProps = {
  isActive: false,
  roles: []
};
        

Advanced Prop Handling with React.Children and cloneElement:

function TabContainer({ children, activeTab }) {
  // Manipulating children props
  return (
    <div className="tab-container">
      {React.Children.map(children, (child, index) => {
        // Clone each child and pass additional props
        return React.cloneElement(child, {
          isActive: index === activeTab,
          key: index
        });
      })}
    </div>
  );
}

function Tab({ label, isActive, children }) {
  return (
    <div className={`tab ${isActive ? "active" : ""}`}>
      <div className="tab-label">{label}</div>
      {isActive && <div className="tab-content">{children}</div>}
    </div>
  );
}

// Usage
<TabContainer activeTab={1}>
  <Tab label="Profile">Profile content</Tab>
  <Tab label="Settings">Settings content</Tab>
  <Tab label="History">History content</Tab>
</TabContainer>
        

Render Props Pattern:

function DataFetcher({ url, render }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);
    fetch(url)
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err);
        setLoading(false);
      });
  }, [url]);

  return render({ data, loading, error });
}

// Usage
<DataFetcher 
  url="https://api.example.com/users" 
  render={({ data, loading, error }) => {
    if (loading) return <Spinner />;
    if (error) return <ErrorMessage error={error} />;
    return <UserList users={data} />;
  }}
/>
        

Modern State Implementation:

// Function component with useState hook
import React, { useState, useReducer } from 'react';

// Simple state
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(prevCount => prevCount + 1)}>
      Count: {count}
    </button>
  );
}

// Complex state with reducer pattern
function complexCounter() {
  const initialState = { count: 0, lastAction: null };
  const reducer = (state, action) => {
    switch(action.type) {
      case 'increment':
        return { count: state.count + 1, lastAction: 'increment' };
      case 'decrement':
        return { count: state.count - 1, lastAction: 'decrement' };
      default:
        throw new Error();
    }
  };
  
  const [state, dispatch] = useReducer(reducer, initialState);
  
  return (
    <div>
      Count: {state.count} (Last action: {state.lastAction || "none"})
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
    </div>
  );
}
        

Advanced Props Usage:

// Leveraging prop destructuring with defaults
const UserProfile = ({ 
  name, 
  role = "User", 
  permissions = [], 
  onProfileUpdate 
}) => {
  return (
    <div className="profile">
      <h3>{name} ({role})</h3>
      <PermissionsList items={permissions} />
      <button onClick={() => onProfileUpdate({name, role})}>
        Update Profile
      </button>
    </div>
  );
};

// Parent component using React.memo for optimization
const Dashboard = () => {
  const handleProfileUpdate = useCallback((data) => {
    // Process update
    console.log("Profile updated", data);
  }, []);
  
  return (
    <UserProfile 
      name="Alice"
      role="Admin"
      permissions={["read", "write", "delete"]}
      onProfileUpdate={handleProfileUpdate}
    />
  );
};
        

Advanced Class Component Example:

class DataVisualization extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
      error: null,
      previousDimensions: null
    };
    this.chartRef = React.createRef();
  }

  static getDerivedStateFromProps(props, state) {
    // Derive filtered data based on props
    if (props.filter !== state.lastFilter) {
      return {
        data: processData(props.rawData, props.filter),
        lastFilter: props.filter
      };
    }
    return null;
  }

  componentDidMount() {
    this.fetchData();
    window.addEventListener('resize', this.handleResize);
  }

  shouldComponentUpdate(nextProps, nextState) {
    // Skip re-render if only non-visible data changed
    return nextState.data !== this.state.data || 
           nextState.error !== this.state.error ||
           nextProps.dimensions !== this.props.dimensions;
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // Capture scroll position before update
    if (prevProps.dimensions !== this.props.dimensions) {
      const chart = this.chartRef.current;
      return {
        scrollTop: chart.scrollTop,
        scrollHeight: chart.scrollHeight,
        clientHeight: chart.clientHeight
      };
    }
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // API refetch when ID changes
    if (prevProps.dataId !== this.props.dataId) {
      this.fetchData();
    }
    
    // Restore scroll position after dimension change
    if (snapshot !== null) {
      const chart = this.chartRef.current;
      const scrollOffset = snapshot.scrollHeight - snapshot.clientHeight;
      chart.scrollTop = 
        (snapshot.scrollTop / scrollOffset) * 
        (chart.scrollHeight - chart.clientHeight);
    }
  }

  componentWillUnmount() {
    this.dataSubscription.unsubscribe();
    window.removeEventListener('resize', this.handleResize);
  }

  fetchData = async () => {
    try {
      const response = await api.fetchData(this.props.dataId);
      this.dataSubscription = setupRealTimeUpdates(
        this.props.dataId,
        this.handleDataUpdate
      );
      this.setState({ data: response.data });
    } catch (error) {
      this.setState({ error });
    }
  }

  handleDataUpdate = (newData) => {
    this.setState(prevState => ({
      data: mergeData(prevState.data, newData)
    }));
  }

  handleResize = debounce(() => {
    this.forceUpdate();
  }, 150);

  render() {
    const { data, error } = this.state;
    
    if (error) return <ErrorDisplay error={error} />;
    if (!data) return <LoadingSpinner />;
    
    return (
      <div ref={this.chartRef} className="chart-container">
        <Chart data={data} dimensions={this.props.dimensions} />
      </div>
    );
  }
}
        

Advanced Hooks Lifecycle Management:

import React, { useState, useEffect, useRef, useLayoutEffect, useCallback } from 'react';

function DataVisualization({ dataId, rawData, filter, dimensions }) {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const chartRef = useRef(null);
  const dataSubscription = useRef(null);
  const previousDimensions = useRef(null);

  // Derived state (replaces getDerivedStateFromProps)
  const processedData = useMemo(() => {
    return rawData ? processData(rawData, filter) : null;
  }, [rawData, filter]);

  // ComponentDidMount + componentWillUnmount + partial componentDidUpdate
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await api.fetchData(dataId);
        setData(response.data);
        
        // Setup subscription
        dataSubscription.current = setupRealTimeUpdates(
          dataId,
          handleDataUpdate
        );
      } catch (err) {
        setError(err);
      }
    };

    fetchData();
    
    // Cleanup function (componentWillUnmount)
    return () => {
      if (dataSubscription.current) {
        dataSubscription.current.unsubscribe();
      }
    };
  }, [dataId]); // Dependency array controls when effect runs (like componentDidUpdate)

  // Handle real-time data updates
  const handleDataUpdate = useCallback((newData) => {
    setData(prevData => mergeData(prevData, newData));
  }, []);

  // Window resize handler (componentDidMount + componentWillUnmount)
  useEffect(() => {
    const handleResize = debounce(() => {
      // Force re-render on resize
      setForceUpdate(v => !v);
    }, 150);
    
    window.addEventListener('resize', handleResize);
    
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  // getSnapshotBeforeUpdate + componentDidUpdate for scroll position
  useLayoutEffect(() => {
    if (previousDimensions.current && 
        dimensions !== previousDimensions.current && 
        chartRef.current) {
      const chart = chartRef.current;
      const scrollOffset = chart.scrollHeight - chart.clientHeight;
      chart.scrollTop = 
        (chart.scrollTop / scrollOffset) * 
        (chart.scrollHeight - chart.clientHeight);
    }
    
    previousDimensions.current = dimensions;
  }, [dimensions]);

  if (error) return <ErrorDisplay error={error} />;
  if (!data) return <LoadingSpinner />;

  return (
    <div ref={chartRef} className="chart-container">
      <Chart data={processedData || data} dimensions={dimensions} />
    </div>
  );
}
        

Internal Hook Implementation (Simplified):

// Simplified representation of React's internal hook mechanism
let componentHooks = [];
let currentHookIndex = 0;

// Internal implementation of useState
function useState(initialState) {
  const hookId = currentHookIndex;
  currentHookIndex++;
  
  if (componentHooks[hookId] === undefined) {
    // First render, initialize the state
    componentHooks[hookId] = initialState;
  }
  
  const setState = newState => {
    componentHooks[hookId] = newState;
    rerender(); // Trigger a re-render
  };
  
  return [componentHooks[hookId], setState];
}
        

Core Signature and Implementation Details:

// Type definition of useState
function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];

type SetStateAction<S> = S | ((prevState: S) => S);
type Dispatch<A> = (value: A) => void;
        

// Eager evaluation - runs on every render
const [state, setState] = useState(expensiveComputation());

// Lazy initialization - runs only once during initial render
const [state, setState] = useState(() => expensiveComputation());
        

Batching and Update Semantics:

function Counter() {
  const [count, setCount] = useState(0);
  
  function handleClick() {
    // These will be batched in React 18+
    setCount(count + 1);     // Uses closure value of count
    setCount(count + 1);     // Uses same closure value, doesn't stack
    
    // Correct approach for sequential updates
    setCount(c => c + 1);    // Uses latest state
    setCount(c => c + 1);    // Builds on previous update
  }
  
  return {count};
}
        

Complex State with Immutability:

function UserEditor() {
  const [user, setUser] = useState({
    name: 'Jane',
    email: 'jane@example.com',
    preferences: {
      theme: 'light',
      notifications: true
    }
  });

  // Immutable update pattern for nested objects
  const toggleNotifications = () => {
    setUser(prevUser => ({
      ...prevUser,
      preferences: {
        ...prevUser.preferences,
        notifications: !prevUser.preferences.notifications
      }
    }));
  };
}
        

JSX Under the Hood:

// Original JSX
function Welcome(props) {
  return (
    <div className="container">
      <h1>Hello, {props.name}</h1>
      {props.showMessage && <p>Thank you for visiting</p>}
    </div>
  );
}

// After Babel transforms it
function Welcome(props) {
  return React.createElement(
    "div",
    { className: "container" },
    React.createElement("h1", null, "Hello, ", props.name),
    props.showMessage && React.createElement("p", null, "Thank you for visiting")
  );
}
        

Implementation Comparison:

// Functional Component
function UserProfile({ username, bio, onUpdate }) {
  const [isEditing, setIsEditing] = useState(false);
  
  useEffect(() => {
    document.title = `Profile: ${username}`;
    
    return () => {
      document.title = "React App";
    };
  }, [username]);
  
  return (
    <div>
      <h2>{username}</h2>
      {isEditing ? (
        <EditForm bio={bio} onSave={(newBio) => {
          onUpdate(newBio);
          setIsEditing(false);
        }} />
      ) : (
        <>
          <p>{bio}</p>
          <button onClick={() => setIsEditing(true)}>Edit</button>
        </>
      )}
    </div>
  );
}

// Class Component
class UserProfile extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isEditing: false
    };
    this.handleEditToggle = this.handleEditToggle.bind(this);
    this.handleSave = this.handleSave.bind(this);
  }
  
  componentDidMount() {
    document.title = `Profile: ${this.props.username}`;
  }
  
  componentDidUpdate(prevProps) {
    if (prevProps.username !== this.props.username) {
      document.title = `Profile: ${this.props.username}`;
    }
  }
  
  componentWillUnmount() {
    document.title = "React App";
  }
  
  handleEditToggle() {
    this.setState(prevState => ({
      isEditing: !prevState.isEditing
    }));
  }
  
  handleSave(newBio) {
    this.props.onUpdate(newBio);
    this.setState({ isEditing: false });
  }
  
  render() {
    const { username, bio } = this.props;
    const { isEditing } = this.state;
    
    return (
      <div>
        <h2>{username}</h2>
        {isEditing ? (
          <EditForm bio={bio} onSave={this.handleSave} />
        ) : (
          <>
            <p>{bio}</p>
            <button onClick={this.handleEditToggle}>Edit</button>
          </>
        )}
      </div>
    );
  }
}
        

Diffing Algorithm Example:

// Original render
<div>
  <p key="1">First paragraph</p>
  <p key="2">Second paragraph</p>
</div>

// Updated render
<div>
  <p key="1">First paragraph</p>
  <h3 key="new">New heading</h3>
  <p key="2">Modified second paragraph</p>
</div>
        

The diffing algorithm would identify that:

• The <div> root remains unchanged
• The first <p> element remains unchanged (matched by key)
• A new <h3> element needs to be inserted
• The second <p> element text content needs updating

SyntheticEvent Structure:

interface SyntheticEvent<T = Element, E = Event> extends BaseSyntheticEvent<E, EventTarget & T, EventTarget> {}

interface BaseSyntheticEvent<E, C, T> {
  nativeEvent: E;
  currentTarget: C;
  target: T;
  bubbles: boolean;
  cancelable: boolean;
  defaultPrevented: boolean;
  eventPhase: number;
  isTrusted: boolean;
  preventDefault(): void;
  stopPropagation(): void;
  isPropagationStopped(): boolean;
  persist(): void; // For React 16 and earlier
  timeStamp: number;
  type: string;
}
        

Implementation Examples:

// 1. Arrow Function in Render (creates new function each render)
<button onClick={(e) => this.handleClick(id, e)}>Click</button>

// 2. Class Property with Arrow Function (auto-binding)
class Component extends React.Component {
  handleClick = (e) => {
    // "this" is bound correctly
    this.setState({ clicked: true });
  }
  
  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}

// 3. Constructor Binding
class Component extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick(e) {
    this.setState({ clicked: true });
  }
  
  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}

// 4. With functional components and hooks
function Component() {
  const [clicked, setClicked] = useState(false);
  
  // Function created on each render, but can be optimized with useCallback
  const handleClick = () => setClicked(true);
  
  // Optimized with useCallback
  const optimizedHandleClick = useCallback(() => {
    setClicked(true);
  }, []); // Empty dependency array = function reference preserved between renders
  
  return <button onClick={optimizedHandleClick}>Click</button>;
}
        

Basic Patterns:

// Element variables
function LoginControl() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  
  let button;
  if (isLoggedIn) {
    button = <LogoutButton onClick={() => setIsLoggedIn(false)} />;
  } else {
    button = <LoginButton onClick={() => setIsLoggedIn(true)} />;
  }
  
  return (
    <div>
      <div>{isLoggedIn ? 'Welcome back!' : 'Please sign in'}</div>
      {button}
    </div>
  );
}

// Inline logical && operator with short-circuit evaluation
function ConditionalList({ items }) {
  return (
    <div>
      {items.length > 0 && (
        <div>
          <h2>You have {items.length} items</h2>
          <ul>
            {items.map(item => <li key={item.id}>{item.name}</li>)}
          </ul>
        </div>
      )}
      {items.length === 0 && <p>No items found.</p>}
    </div>
  );
}
        

Advanced Patterns:

// Enum pattern for conditional rendering
function StatusMessage({ status }) {
  const statusMessages = {
    loading: <LoadingSpinner />,
    success: <SuccessMessage />,
    error: <ErrorMessage />,
    default: <DefaultMessage />
  };
  
  return statusMessages[status] || statusMessages.default;
}

// Immediately Invoked Function Expression for complex logic
function ComplexCondition({ data, isLoading, error }) {
  return (
    <div>
      {(() => {
        if (isLoading) return <LoadingSpinner />;
        if (error) return <ErrorMessage message={error} />;
        if (!data) return <NoDataMessage />;
        if (data.requires_verification) return <VerifyAccount />;
        
        return <DataDisplay data={data} />;
      })()}
    </div>
  );
}

// HOC example
const withAuthorization = (WrappedComponent, allowedRoles) => {
  return function WithAuthorization(props) {
    const { user } = useContext(AuthContext);
    
    if (!user) {
      return <Navigate to="/login" />;
    }
    
    if (!allowedRoles.includes(user.role)) {
      return <AccessDenied />;
    }
    
    return <WrappedComponent {...props} />;
  };
};
        

Implementation Example:

import React, { useState } from 'react';

function ListExample() {
  const [items, setItems] = useState([
    { id: 'a1', content: 'Item 1' },
    { id: 'b2', content: 'Item 2' },
    { id: 'c3', content: 'Item 3' }
  ]);

  const addItemToStart = () => {
    const newId = Math.random().toString(36).substr(2, 9);
    setItems([{ id: newId, content: `New Item ${items.length + 1}` }, ...items]);
  };

  const removeItem = (idToRemove) => {
    setItems(items.filter(item => item.id !== idToRemove));
  };

  return (
    <div>
      <button onClick={addItemToStart}>Add to Start</button>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.content}
            <button onClick={() => removeItem(item.id)}>Remove</button>
          </li&
        ))}
      </ul>
    </div>
  );
}
        

Internal Reconciliation Visualization:

Original List:           New List:
[A, B, C, D]             [E, B, C]

1. Match keys:
   A → (no match, will be removed)
   B → B (update if needed)
   C → C (update if needed)
   D → (no match, will be removed)
   (no match) ← E (will be created)

2. Result: Remove A and D, update B and C, create E
        

Key Impact on Component State:

function Counter({ label }) {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        {label}: {count}
      </button>
    </div>
  );
}

function App() {
  const [items, setItems] = useState(['A', 'B', 'C']);
  
  const shuffle = () => {
    setItems([...items].sort(() => Math.random() - 0.5));
  };
  
  return (
    <div>
      <button onClick={shuffle}>Shuffle</button>
      {items.map((item, index) => (
        // Using index as key - state will reset on shuffle!
        <Counter key={index} label={item} />
        
        // Using item as key - state persists with the item
        // <Counter key={item} label={item} />
      ))}
    </div>
  );
}
        

TypeScript Example:

// Defining prop types with TypeScript
interface UserType {
  name: string;
  age: number;
  preferences?: {
    theme: string;
    notifications: boolean;
  };
}

interface ChildProps {
  message: string;
  user: UserType;
  isActive: boolean;
  onUserAction: (userId: number) => void;
}

// Parent Component
const ParentComponent: React.FC = () => {
  const message = "Hello from parent";
  const user: UserType = {
    name: "John",
    age: 30,
    preferences: {
      theme: "dark",
      notifications: true
    }
  };
  
  const handleUserAction = (userId: number): void => {
    console.log(`User ${userId} performed an action`);
  };

  return (
    <div>
      <ChildComponent 
        message={message} 
        user={user} 
        isActive={true} 
        onUserAction={handleUserAction}
      />
    </div>
  );
};

// Child Component with destructured props
const ChildComponent: React.FC<ChildProps> = ({ 
  message, 
  user, 
  isActive,
  onUserAction
}) => {
  return (
    <div>
      <p>{message}</p>
      <p>Name: {user.name}, Age: {user.age}</p>
      <p>Theme: {user.preferences?.theme || "default"}</p>
      <p>Active: {isActive ? "Yes" : "No"}</p>
      <button onClick={() => onUserAction(1)}>Trigger Action</button>
    </div>
  );
};
        

TypeScript Implementation with Performance Optimization:

// Define types for better code safety and documentation
interface ChildData {
  id: string;
  value: string;
  timestamp: number;
}

interface ChildProps {
  onDataChange: (data: ChildData) => void;
  onAction: (actionType: string, payload?: any) => void;
  initialValue?: string;
}

// Parent Component
const ParentComponent: React.FC = () => {
  const [receivedData, setReceivedData] = useState<ChildData | null>(null);
  const [actionLog, setActionLog] = useState<string[]>([]);
  
  // Use useCallback to maintain function reference stability
  const handleDataChange = useCallback((data: ChildData) => {
    setReceivedData(data);
    // Additional processing logic here
  }, []); // Empty dependency array means this function reference stays stable
  
  const handleChildAction = useCallback((actionType: string, payload?: any) => {
    setActionLog(prev => [...prev, `${actionType}: ${JSON.stringify(payload)}`]);
    
    // Handle different action types
    switch(actionType) {
      case "submit":
        console.log("Processing submission:", payload);
        break;
      case "cancel":
        // Reset logic
        setReceivedData(null);
        break;
      // Other cases...
    }
  }, []);

  return (
    <div className="parent-container">
      <h2>Parent Component</h2>
      
      {receivedData && (
        <div className="data-display">
          <h3>Received Data:</h3>
          <pre>{JSON.stringify(receivedData, null, 2)}</pre>
        </div>
      )}
      
      <div className="action-log">
        <h3>Action Log:</h3>
        <ul>
          {actionLog.map((log, index) => (
            <li key={index}>{log}</li>
          ))}
        </ul>
      </div>
      
      <ChildComponent 
        onDataChange={handleDataChange}
        onAction={handleChildAction}
        initialValue="Default value"
      />
    </div>
  );
};

// Child Component - Memoized to prevent unnecessary re-renders
const ChildComponent: React.FC<ChildProps> = memo(({ 
  onDataChange, 
  onAction,
  initialValue = "" 
}) => {
  const [inputValue, setInputValue] = useState(initialValue);
  
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = e.target.value;
    setInputValue(newValue);
    
    // Debounce this in a real application to prevent too many updates
    onDataChange({
      id: crypto.randomUUID(), // In a real app, use a proper ID strategy
      value: newValue,
      timestamp: Date.now()
    });
  };
  
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onAction("submit", { value: inputValue, submittedAt: new Date().toISOString() });
  };
  
  const handleReset = () => {
    setInputValue("");
    onAction("reset");
  };

  return (
    <div className="child-component">
      <h3>Child Component</h3>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={inputValue}
          onChange={handleInputChange}
          placeholder="Enter value"
        />
        <div className="button-group">
          <button type="submit">Submit</button>
          <button type="button" onClick={handleReset}>Reset</button>
          <button 
            type="button" 
            onClick={() => onAction("cancel")}
          >
            Cancel
          </button>
        </div>
      </form>
    </div>
  );
});
        

Render Props Pattern:

An alternative approach that can be used for bidirectional data flow:

// Parent with render prop
function DataContainer({ render }) {
  const [data, setData] = useState({ count: 0 });
  
  // This function will be passed to the child
  const updateCount = (newCount) => {
    setData({ count: newCount });
  };
  
  // Pass both data down and updater function
  return render(data, updateCount);
}

// Usage
function App() {
  return (
    <DataContainer 
      render={(data, updateCount) => (
        <CounterUI 
          count={data.count} 
          onCountUpdate={updateCount} 
        />
      )}
    />
  );
}

// Child receives both data and update function
function CounterUI({ count, onCountUpdate }) {
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => onCountUpdate(count + 1)}>
        Increment
      </button>
    </div>
  );
}
        

Effect Skipping Strategies:

// 1. Run once on mount (componentDidMount equivalent)
useEffect(() => {
  // Setup code
  return () => {
    // Cleanup code (componentWillUnmount equivalent)
  };
}, []); // Empty dependency array

// 2. Run on specific value changes
useEffect(() => {
  // This is similar to componentDidUpdate with condition checking
  document.title = `${count} new messages`;
}, [count]); // Only re-run if count changes

// 3. Run after every render (rare use case)
useEffect(() => {
  // Runs after every single render
});
    

Stale Closure Problem:

function Counter() {
  const [count, setCount] = useState(0);
  
  // Bug: This interval always refers to the initial count value (0)
  useEffect(() => {
    const timer = setInterval(() => {
      console.log("Current count:", count);
      setCount(count + 1); // This captures the value of count from when the effect ran
    }, 1000);
    
    return () => clearInterval(timer);
  }, []); // Empty dependency array → effect only runs once
  
  // Fix: Use the functional update form
  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prevCount => prevCount + 1); // Gets the latest state
    }, 1000);
    
    return () => clearInterval(timer);
  }, []); // Now correctly increments without dependencies
}
    

Router Implementation Using Data Router API (v6.4+)

import {
  createBrowserRouter,
  RouterProvider,
  createRoutesFromElements,
  Route
} from "react-router-dom";

// Define routes using JSX (can also be done with objects)
const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<RootLayout />}>
      <Route index element={<HomePage />} />
      <Route path="dashboard" element={<Dashboard />} />
      
      {/* Dynamic route with params */}
      <Route 
        path="users/:userId" 
        element={<UserProfile />} 
        loader={userLoader} // Data loading function
        action={userAction} // Data mutation function
      />
      
      {/* Nested routes */}
      <Route path="products" element={<ProductLayout />}>
        <Route index element={<ProductList />} />
        <Route path=":productId" element={<ProductDetail />} />
      </Route>
      
      {/* Error boundary for route errors */}
      <Route path="*" element={<NotFound />} />
    </Route>
  )
);

function App() {
  return <RouterProvider router={router} />;
}
        

1. Route Loaders and Actions (Data Router API)

// User loader - fetches data before rendering
async function userLoader({ params }) {
  // params.userId is available from the route definition
  const response = await fetch(`/api/users/${params.userId}`);
  
  // Error handling with response
  if (!response.ok) {
    throw new Response("User not found", { status: 404 });
  }
  
  return response.json(); // This becomes available via useLoaderData()
}

// User action - handles form submissions
async function userAction({ request, params }) {
  const formData = await request.formData();
  const updates = Object.fromEntries(formData);
  
  const response = await fetch(`/api/users/${params.userId}`, {
    method: "PATCH",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(updates)
  });
  
  if (!response.ok) throw new Error("Failed to update user");
  return response.json();
}

// In component:
function UserProfile() {
  const user = useLoaderData(); // Get data from loader
  const actionData = useActionData(); // Get result from action
  const navigation = useNavigation(); // Get loading states
  
  if (navigation.state === "loading") return <Spinner />;
  
  return (
    <div>
      <h1>{user.name}</h1>
      
      {/* Form that uses the action */}
      <Form method="post">
        <input name="name" defaultValue={user.name} />
        <button type="submit">Update</button>
      </Form>
      
      {actionData?.success && <p>Updated successfully!</p>}
    </div>
  );
}
        

2. Code-Splitting with Lazy Loading

import React, { Suspense, lazy } from "react";
import { Routes, Route } from "react-router-dom";

// Lazily load route components
const Dashboard = lazy(() => import("./pages/Dashboard"));
const Settings = lazy(() => import("./pages/Settings"));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/dashboard/*" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </Suspense>
  );
}
        

Authentication Protection with Loader Redirect

// Protected route loader
async function protectedLoader({ request }) {
  // Get the auth token from somewhere (localStorage, cookie, etc.)
  const token = getAuthToken();
  
  // Check if user is authenticated
  if (!token) {
    // Create an absolute URL for the current location
    const params = new URLSearchParams();
    params.set("from", new URL(request.url).pathname);
    
    // Redirect to login with return URL
    return redirect(`/login?${params.toString()}`);
  }
  
  // Continue with the actual data loading
  return fetchProtectedData(token);
}

// Route definition
<Route 
  path="admin" 
  element={<AdminPanel />} 
  loader={protectedLoader}
/>
        

Safe Async Navigation

function SearchComponent() {
  const navigate = useNavigate();
  const [query, setQuery] = useState("");
  
  useEffect(() => {
    if (!query) return;
    
    let isMounted = true;
    const timeoutId = setTimeout(async () => {
      try {
        const results = await fetchSearchResults(query);
        
        // Only navigate if component is still mounted
        if (isMounted) {
          navigate(`/search-results`, { 
            state: { results, query },
            replace: true // Replace current history entry
          });
        }
      } catch (error) {
        if (isMounted) {
          // Handle error
        }
      }
    }, 500);
    
    return () => {
      isMounted = false;
      clearTimeout(timeoutId);
    };
  }, [query, navigate]);
  
  // Component JSX...
}
        

Fragment Syntax Options:

// Explicit fragment with import
import React, { Fragment } from 'react';

function Component() {
  return (
    <Fragment>
      <ChildA />
      <ChildB />
    </Fragment>
  );
}

// Fragment without import
function Component() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
    </React.Fragment>
  );
}

// JSX fragment shorthand (introduced in React 16.2)
function Component() {
  return (
    <>
      <ChildA />
      <ChildB />
    </>
  );
}
        

Fragments with Keys:

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // You can't use the shorthand syntax when specifying a key
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}
        

Full Controlled Implementation with Validation:

import React, { useState, useEffect } from 'react';

function ControlledForm() {
  const [values, setValues] = useState({
    email: '',
    password: ''
  });
  const [errors, setErrors] = useState({});
  const [touched, setTouched] = useState({});
  const [isValid, setIsValid] = useState(false);

  // Validation logic
  useEffect(() => {
    const newErrors = {};
    if (!values.email) {
      newErrors.email = 'Email is required';
    } else if (!/\S+@\S+\.\S+/.test(values.email)) {
      newErrors.email = 'Email is invalid';
    }
    
    if (!values.password) {
      newErrors.password = 'Password is required';
    } else if (values.password.length < 8) {
      newErrors.password = 'Password must be at least 8 characters';
    }
    
    setErrors(newErrors);
    setIsValid(Object.keys(newErrors).length === 0);
  }, [values]);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues({
      ...values,
      [name]: value
    });
  };

  const handleBlur = (e) => {
    const { name } = e.target;
    setTouched({
      ...touched,
      [name]: true
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (isValid) {
      console.log('Form submitted with', values);
      // API call or other actions
    } else {
      // Mark all fields as touched to show all errors
      const allTouched = Object.keys(values).reduce((acc, key) => {
        acc[key] = true;
        return acc;
      }, {});
      setTouched(allTouched);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="email">Email</label>
        <input
          type="email"
          id="email"
          name="email"
          value={values.email}
          onChange={handleChange}
          onBlur={handleBlur}
        />
        {touched.email && errors.email && (
          <div className="error">{errors.email}</div>
        )}
      </div>
      
      <div>
        <label htmlFor="password">Password</label>
        <input
          type="password"
          id="password"
          name="password"
          value={values.password}
          onChange={handleChange}
          onBlur={handleBlur}
        />
        {touched.password && errors.password && (
          <div className="error">{errors.password}</div>
        )}
      </div>
      
      <button type="submit" disabled={!isValid}>
        Submit
      </button>
    </form>
  );
}
        

Advanced Uncontrolled Implementation with Form Libraries:

import React, { useRef } from 'react';

function UncontrolledFormWithValidation() {
  const formRef = useRef(null);
  const emailRef = useRef(null);
  const passwordRef = useRef(null);
  
  // Custom validation function
  const validateForm = () => {
    const email = emailRef.current.value;
    const password = passwordRef.current.value;
    
    let isValid = true;
    
    // Clear previous errors
    document.querySelectorAll('.error').forEach(el => el.textContent = '');
    
    if (!email) {
      document.getElementById('email-error').textContent = 'Email is required';
      isValid = false;
    } else if (!/\S+@\S+\.\S+/.test(email)) {
      document.getElementById('email-error').textContent = 'Email is invalid';
      isValid = false;
    }
    
    if (!password) {
      document.getElementById('password-error').textContent = 'Password is required';
      isValid = false;
    } else if (password.length < 8) {
      document.getElementById('password-error').textContent = 'Password must be at least 8 characters';
      isValid = false;
    }
    
    return isValid;
  };
  
  const handleSubmit = (e) => {
    e.preventDefault();
    
    if (validateForm()) {
      const formData = new FormData(formRef.current);
      const data = Object.fromEntries(formData.entries());
      console.log('Form submitted with', data);
      // API call or other actions
    }
  };
  
  return (
    <form ref={formRef} onSubmit={handleSubmit} noValidate>
      <div>
        <label htmlFor="email">Email</label>
        <input
          type="email"
          id="email"
          name="email"
          ref={emailRef}
          defaultValue=""
        />
        <div id="email-error" className="error"></div>
      </div>
      
      <div>
        <label htmlFor="password">Password</label>
        <input
          type="password"
          id="password"
          name="password"
          ref={passwordRef}
          defaultValue=""
        />
        <div id="password-error" className="error"></div>
      </div>
      
      <button type="submit">Submit</button>
    </form>
  );
}
        

Hybrid Approach Example:

function HybridComponent() {
  // State for validation only, not for values
  const [errors, setErrors] = useState({});
  const nameRef = useRef(null);
  
  const validateName = () => {
    const name = nameRef.current.value;
    if (!name || name.length < 3) {
      setErrors({ name: 'Name must be at least 3 characters' });
      return false;
    }
    setErrors({});
    return true;
  };
  
  // We don't track the value in state, but we do track validation
  const handleBlur = () => {
    validateName();
  };
  
  const handleSubmit = (e) => {
    e.preventDefault();
    if (validateName()) {
      console.log('Submitting name:', nameRef.current.value);
    }
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input
        ref={nameRef}
        defaultValue=""
        onBlur={handleBlur}
      />
      {errors.name && <div className="error">{errors.name}</div>}
      <button type="submit">Submit</button>
    </form>
  );
}
        

Anatomy of a custom Hook:

import { useState, useEffect, useCallback } from 'react';

// TypeScript interface for better type safety
interface UseFetchResult<T> {
  data: T | null;
  loading: boolean;
  error: Error | null;
  refetch: () => Promise<void>;
}

function useFetch<T>(url: string): UseFetchResult<T> {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<Error | null>(null);
  
  const fetchData = useCallback(async () => {
    try {
      setLoading(true);
      setError(null);
      
      const response = await fetch(url);
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      
      const result = await response.json();
      setData(result);
    } catch (e) {
      setError(e instanceof Error ? e : new Error(String(e)));
    } finally {
      setLoading(false);
    }
  }, [url]);
  
  useEffect(() => {
    fetchData();
  }, [fetchData]);
  
  const refetch = useCallback(() => {
    return fetchData();
  }, [fetchData]);
  
  return { data, loading, error, refetch };
}
        

Composable Hooks example:

// Smaller, focused Hook
function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T) => void] {
  // Get stored value
  const [storedValue, setStoredValue] = useState<T>(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(error);
      return initialValue;
    }
  });

  // Return a wrapped version of useState's setter function
  const setValue = (value: T) => {
    try {
      // Allow value to be a function
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.error(error);
    }
  };

  return [storedValue, setValue];
}

// Composed Hook using the smaller Hook
function usePersistedTheme() {
  const [theme, setTheme] = useLocalStorage<'light' | 'dark'>('theme', 'light');
  
  // Additional theme-specific logic
  const toggleTheme = useCallback(() => {
    setTheme(current => current === 'light' ? 'dark' : 'light');
  }, [setTheme]);
  
  useEffect(() => {
    document.body.dataset.theme = theme;
  }, [theme]);
  
  return { theme, toggleTheme };
}
        

Advanced Implementation with TypeScript:

interface State {
  isLoading: boolean;
  data: User[] | null;
  error: Error | null;
  page: number;
  hasMore: boolean;
}

type Action =
  | { type: 'FETCH_INIT' }
  | { type: 'FETCH_SUCCESS'; payload: { data: User[]; hasMore: boolean } }
  | { type: 'FETCH_FAILURE'; payload: Error }
  | { type: 'LOAD_MORE' };

const initialState: State = {
  isLoading: false,
  data: null,
  error: null,
  page: 1,
  hasMore: true
};

function userReducer(state: State, action: Action): State {
  switch (action.type) {
    case 'FETCH_INIT':
      return {
        ...state,
        isLoading: true,
        error: null
      };
    case 'FETCH_SUCCESS':
      return {
        ...state,
        isLoading: false,
        data: state.data 
          ? [...state.data, ...action.payload.data] 
          : action.payload.data,
        hasMore: action.payload.hasMore
      };
    case 'FETCH_FAILURE':
      return {
        ...state,
        isLoading: false,
        error: action.payload
      };
    case 'LOAD_MORE':
      return {
        ...state,
        page: state.page + 1
      };
    default:
      throw new Error(`Unhandled action type`);
  }
}

function UserList() {
  const [state, dispatch] = useReducer(userReducer, initialState);
  
  useEffect(() => {
    let isMounted = true;
    
    const fetchUsers = async () => {
      dispatch({ type: 'FETCH_INIT' });
      
      try {
        const response = await fetch(`/api/users?page=${state.page}`);
        const result = await response.json();
        
        if (isMounted) {
          dispatch({ 
            type: 'FETCH_SUCCESS', 
            payload: { 
              data: result.users, 
              hasMore: result.hasMore 
            } 
          });
        }
      } catch (error) {
        if (isMounted) {
          dispatch({ 
            type: 'FETCH_FAILURE', 
            payload: error instanceof Error ? error : new Error(String(error)) 
          });
        }
      }
    };

    if (state.hasMore && !state.isLoading) {
      fetchUsers();
    }
    
    return () => {
      isMounted = false;
    };
  }, [state.page]);

  return (
    <div>
      {state.error && <div className="error">{state.error.message}</div>}
      
      {state.data && (
        <ul>
          {state.data.map(user => (
            <li key={user.id}>{user.name}</li>
          ))}
        </ul>
      )}
      
      {state.isLoading && <div className="loading">Loading...</div>}
      
      {!state.isLoading && state.hasMore && (
        <button 
          onClick={() => dispatch({ type: 'LOAD_MORE' })}
        >
          Load More
        </button>
      )}
    </div>
  );
}
        

Lazy Initialization:

function init(initialCount: number): State {
  // Perform expensive calculations here
  return {
    count: initialCount,
    lastUpdated: Date.now()
  };
}

// Third parameter is an initializer function
const [state, dispatch] = useReducer(reducer, initialArg, init);
        

Immer Integration for Immutable Updates:

import produce from 'immer';

// Create an Immer-powered reducer
function immerReducer(state, action) {
  return produce(state, draft => {
    switch (action.type) {
      case 'UPDATE_NESTED_FIELD':
        // Direct mutation of draft is safe with Immer
        draft.deeply.nested.field = action.payload;
        break;
      // other cases
    }
  });
}
        

Advanced Example with TypeScript:

// Define types for better type safety
type User = {
  id: number;
  name: string;
  isActive: boolean;
};

type UserListProps = {
  users: User[];
  onToggleActive: (userId: number) => void;
};

type UserItemProps = {
  user: User;
  onToggleActive: (userId: number) => void;
};

// Parent component managing shared state
const UserManagement: React.FC = () => {
  const [users, setUsers] = useState<User[]>([
    { id: 1, name: "Alice", isActive: true },
    { id: 2, name: "Bob", isActive: false }
  ]);

  // State updater function to be passed down
  const handleToggleActive = useCallback((userId: number) => {
    setUsers(prevUsers => 
      prevUsers.map(user => 
        user.id === userId 
          ? { ...user, isActive: !user.isActive } 
          : user
      )
    );
  }, []);

  return (
    <div>
      <h2>User Management</h2>
      <UserStatistics users={users} />
      <UserList users={users} onToggleActive={handleToggleActive} />
    </div>
  );
};

// Component that displays statistics based on shared state
const UserStatistics: React.FC<{ users: User[] }> = ({ users }) => {
  const activeCount = useMemo(() => 
    users.filter(user => user.isActive).length, 
    [users]
  );
  
  return (
    <div>
      <p>Total users: {users.length}</p>
      <p>Active users: {activeCount}</p>
    </div>
  );
};

// Component that lists users
const UserList: React.FC<UserListProps> = ({ users, onToggleActive }) => {
  return (
    <ul>
      {users.map(user => (
        <UserItem 
          key={user.id} 
          user={user} 
          onToggleActive={onToggleActive} 
        />
      ))}
    </ul>
  );
};

// Individual user component that can trigger state changes
const UserItem: React.FC<UserItemProps> = ({ user, onToggleActive }) => {
  return (
    <li>
      {user.name} - {user.isActive ? "Active" : "Inactive"}
      <button 
        onClick={() => onToggleActive(user.id)}
      >
        Toggle Status
      </button>
    </li>
  );
};
        

Advanced Implementation with TypeScript:

// 1. Type definitions for type safety
interface AuthState {
  user: User | null;
  isAuthenticated: boolean;
  isLoading: boolean;
  error: string | null;
}

interface AuthContextType extends AuthState {
  login: (credentials: Credentials) => Promise<void>;
  logout: () => Promise<void>;
  clearErrors: () => void;
}

// 2. Create context with type annotation and meaningful default value
const AuthContext = createContext<AuthContextType>({
  user: null,
  isAuthenticated: false,
  isLoading: false,
  error: null,
  login: async () => { throw new Error("AuthContext not initialized"); },
  logout: async () => { throw new Error("AuthContext not initialized"); },
  clearErrors: () => {}
});

// 3. Create a custom provider with proper state management
export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [state, dispatch] = useReducer(authReducer, initialAuthState);
  const apiClient = useApiClient(); // Custom hook to access API services
  
  // Memoize handler functions to prevent unnecessary re-renders
  const login = useCallback(async (credentials: Credentials) => {
    try {
      dispatch({ type: "AUTH_START" });
      const user = await apiClient.auth.login(credentials);
      dispatch({ type: "AUTH_SUCCESS", payload: user });
      localStorage.setItem("authToken", user.token);
    } catch (error) {
      dispatch({ 
        type: "AUTH_FAILURE", 
        payload: error instanceof Error ? error.message : "Unknown error" 
      });
    }
  }, [apiClient]);
  
  const logout = useCallback(async () => {
    try {
      await apiClient.auth.logout();
    } finally {
      localStorage.removeItem("authToken");
      dispatch({ type: "AUTH_LOGOUT" });
    }
  }, [apiClient]);
  
  const clearErrors = useCallback(() => {
    dispatch({ type: "CLEAR_ERRORS" });
  }, []);
  
  // Create a memoized context value to prevent unnecessary re-renders
  const contextValue = useMemo(() => ({
    ...state,
    login,
    logout,
    clearErrors
  }), [state, login, logout, clearErrors]);
  
  return (
    <AuthContext.Provider value={contextValue}>
      {children}
    </AuthContext.Provider>
  );
};

// 4. Create a custom hook to enforce usage with error handling
export function useAuth(): AuthContextType {
  const context = useContext(AuthContext);
  
  if (context === undefined) {
    throw new Error("useAuth must be used within an AuthProvider");
  }
  
  return context;
}

// 5. Usage in components
const ProfilePage: React.FC = () => {
  const { user, isAuthenticated, logout } = useAuth();
  
  // Redirect if not authenticated
  useEffect(() => {
    if (!isAuthenticated) {
      navigate("/login");
    }
  }, [isAuthenticated, navigate]);
  
  if (!user) return null;
  
  return (
    <div>
      <h1>Welcome, {user.name}</h1>
      <button onClick={logout}>Logout</button>
    </div>
  );
};
        

Optimized Context with Memoization:

function OptimizedProvider({ children }) {
  const [state, dispatch] = useReducer(reducer, initialState);
  
  // Split context into two separate contexts
  const stableValue = useMemo(() => ({
    dispatch
  }), []); // Only functions that don't need to be recreated
  
  const dynamicValue = useMemo(() => ({
    ...state
  }), [state]); // State that changes
  
  return (
    <StableContext.Provider value={stableValue}>
      <DynamicContext.Provider value={dynamicValue}>
        {children}
      </DynamicContext.Provider>
    </StableContext.Provider>
  );
}
        

Advanced Implementation Example:

import React, { useState, useCallback, useMemo, memo } from 'react';

// Memoized child component that only renders when props change
const ExpensiveComponent = memo(({ onClick, data }) => {
  console.log("ExpensiveComponent render");
  
  // Expensive calculation with the data
  const processedData = useMemo(() => {
    return data.map(item => {
      // Imagine complex processing here
      return { ...item, processed: true };
    });
  }, [data]);
  
  return (
    

      {processedData.map(item => (
         onClick(item.id)}
        >
          {item.text}
        
      ))}
    
  );
});

function ParentComponent() {
  const [items, setItems] = useState([
    { id: 1, text: "Item 1" },
    { id: 2, text: "Item 2" }
  ]);
  const [counter, setCounter] = useState(0);
  
  // This function is stable across renders as long as no dependencies change
  const handleItemClick = useCallback((id) => {
    console.log(`Clicked item ${id}`);
    // Complex logic that uses id
  }, []); // Empty dependency array means this function never changes
  
  return (
    

      
Counter: {counter}
       setCounter(c => c + 1)}>Increment
      
    
  );
}
        

import React, { useState, useMemo } from 'react';

function DataAnalytics({ dataset, threshold }) {
  // Computationally intensive operations
  const analysisResults = useMemo(() => {
    console.log("Running expensive data analysis");
    
    // O(n²) algorithm example
    return dataset.map(item => {
      let processedValue = 0;
      
      // Simulate complex calculation with quadratic time complexity
      for (let i = 0; i < dataset.length; i++) {
        for (let j = 0; j < dataset.length; j++) {
          processedValue += Math.sqrt(
            Math.pow(item.x - dataset[i].x, 2) + 
            Math.pow(item.y - dataset[j].y, 2)
          ) * threshold;
        }
      }
      
      return {
        ...item,
        processedValue,
        classification: processedValue > threshold ? "high" : "low"
      };
    });
  }, [dataset, threshold]); // Only recalculate when dataset or threshold changes
  
  return (
    

      
Analysis Results ({analysisResults.length} items)
      {/* Render results */}
    
  );
}
        

function UserProfile({ user, permissions }) {
  // Without useMemo, this object would have a new reference on every render
  const userWithPermissions = useMemo(() => ({
    ...user,
    canEdit: permissions.includes("edit"),
    canDelete: permissions.includes("delete"),
    canAdmin: permissions.includes("admin"),
    displayName: `${user.firstName} ${user.lastName}`,
    initials: `${user.firstName[0]}${user.lastName[0]}`
  }), [user, permissions]);
  
  // This effect only runs when the derived object actually changes
  useEffect(() => {
    analytics.trackUserPermissionsChanged(userWithPermissions);
  }, [userWithPermissions]);
  
  return ;
}
        

function UserContextProvider({ children }) {
  const [user, setUser] = useState(null);
  const [preferences, setPreferences] = useState({});
  const [permissions, setPermissions] = useState([]);
  
  // Create a stable context value object that only changes when its components change
  const contextValue = useMemo(() => ({
    user,
    preferences,
    permissions,
    setUser,
    setPreferences,
    setPermissions,
    isAdmin: permissions.includes("admin"),
    hasPermission: (perm) => permissions.includes(perm)
  }), [user, preferences, permissions]);
  
  return (
    
      {children}
    
  );
}
        

Using React.Children.map (Basic Approach):

// Parent component
const Tabs = ({ children, defaultIndex = 0 }) => {
  const [activeIndex, setActiveIndex] = useState(defaultIndex);
  
  // Clone children and inject props
  const enhancedChildren = React.Children.map(children, (child, index) => {
    return React.cloneElement(child, {
      isActive: index === activeIndex,
      onActivate: () => setActiveIndex(index)
    });
  });
  
  return <div className="tabs-container">{enhancedChildren}</div>;
};

// Child component
const Tab = ({ isActive, onActivate, children }) => {
  return (
    <div 
      className={`tab ${isActive ? "active" : ""}`}
      onClick={onActivate}
    >
      {children}
    </div>
  );
};

// Create the compound component structure
Tabs.Tab = Tab;

// Usage
<Tabs>
  <Tabs.Tab>Tab 1 Content</Tabs.Tab>
  <Tabs.Tab>Tab 2 Content</Tabs.Tab>
</Tabs>
        

Using React Context (Modern Approach):

// Create context
const SelectContext = React.createContext();

// Parent component
const Select = ({ children, onSelect }) => {
  const [selectedValue, setSelectedValue] = useState(null);
  
  const handleSelect = (value) => {
    setSelectedValue(value);
    if (onSelect) onSelect(value);
  };
  
  const contextValue = {
    selectedValue,
    onSelectOption: handleSelect
  };
  
  return (
    <SelectContext.Provider value={contextValue}>
      <div className="select-container">
        {children}
      </div>
    </SelectContext.Provider>
  );
};

// Child component
const Option = ({ value, children }) => {
  const { selectedValue, onSelectOption } = useContext(SelectContext);
  const isSelected = selectedValue === value;
  
  return (
    <div 
      className={`option ${isSelected ? "selected" : ""}`}
      onClick={() => onSelectOption(value)}
    >
      {children}
    </div>
  );
};

// Create the compound component structure
Select.Option = Option;

// Usage
<Select onSelect={(value) => console.log(value)}>
  <Select.Option value="apple">Apple</Select.Option>
  <Select.Option value="orange">Orange</Select.Option>
</Select>
        

Canonical Implementation:

// TypeScript implementation with proper typing
interface RenderProps<T> {
  render: (data: T) => React.ReactNode;
  // Alternatively: children: (data: T) => React.ReactNode;
}

interface MousePosition {
  x: number;
  y: number;
}

function MouseTracker({ render }: RenderProps<MousePosition>) {
  const [position, setPosition] = useState<MousePosition>({ x: 0, y: 0 });
  
  useEffect(() => {
    function handleMouseMove(event: MouseEvent) {
      setPosition({
        x: event.clientX,
        y: event.clientY
      });
    }
    
    window.addEventListener('mousemove', handleMouseMove);
    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
    };
  }, []);
  
  return (
    <div style={{ height: '100%' }}>
      {render(position)}
    </div>
  );
}

// Usage with children prop variant
<MouseTracker>
  {(mousePosition) => (
    <div>
      <h1>Mouse Tracker</h1>
      <p>x: {mousePosition.x}, y: {mousePosition.y}</p>
    </div>
  )}
</MouseTracker>
        

Advanced HOC Implementation:

// TypeScript HOC with proper naming, forwarding refs, and preserving static methods
import React, { ComponentType, useState, useEffect, forwardRef } from 'react';
import hoistNonReactStatics from 'hoist-non-react-statics';

interface WithMousePositionProps {
  mousePosition: { x: number; y: number };
}

function withMousePosition<P extends object>(
  WrappedComponent: ComponentType<P & WithMousePositionProps>
) {
  // Create a proper display name for DevTools
  const displayName = 
    WrappedComponent.displayName || 
    WrappedComponent.name || 
    'Component';
    
  // Create the higher-order component
  const WithMousePosition = forwardRef<HTMLElement, P>((props, ref) => {
    const [position, setPosition] = useState({ x: 0, y: 0 });
    
    useEffect(() => {
      function handleMouseMove(event: MouseEvent) {
        setPosition({
          x: event.clientX,
          y: event.clientY
        });
      }
      
      window.addEventListener('mousemove', handleMouseMove);
      return () => {
        window.removeEventListener('mousemove', handleMouseMove);
      };
    }, []);
    
    return (
      <WrappedComponent
        {...props as P}
        ref={ref}
        mousePosition={position}
      />
    );
  });
  
  // Set display name for debugging
  WithMousePosition.displayName = `withMousePosition(${displayName})`;
  
  // Copy static methods from WrappedComponent to WithMousePosition
  return hoistNonReactStatics(WithMousePosition, WrappedComponent);
}

// Using the HOC
interface ComponentProps {
  label: string;
}

const MouseAwareComponent = withMousePosition<ComponentProps>(
  ({ label, mousePosition }) => (
    <div>
      <h3>{label}</h3>
      <p>Mouse coordinates: {mousePosition.x}, {mousePosition.y}</p>
    </div>
  )
);

// Usage
<MouseAwareComponent label="Mouse Tracker" />
        

Optimized Render Props with useCallback:

function ParentComponent() {
  // Memoize the render function to prevent unnecessary re-renders
  const renderMouseTracker = useCallback(
    (position) => (
      <div>
        Mouse position: {position.x}, {position.y}
      </div>
    ),
    []
  );

  return <MouseTracker render={renderMouseTracker} />;
}
        

Equivalent Hook Implementation:

// Custom hook that encapsulates mouse position logic
function useMousePosition() {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  
  useEffect(() => {
    function handleMouseMove(event: MouseEvent) {
      setPosition({
        x: event.clientX,
        y: event.clientY
      });
    }
    
    window.addEventListener('mousemove', handleMouseMove);
    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
    };
  }, []);
  
  return position;
}

// Usage in component
function MouseDisplay() {
  const position = useMousePosition();
  
  return (
    <p>
      Mouse coordinates: {position.x}, {position.y}
    </p>
  );
}
        

Setup with Jest Configuration:

// jest.config.js
module.exports = {
  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect', './src/setupTests.js'],
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    '\\.css$': 'identity-obj-proxy'
  },
  collectCoverageFrom: [
    'src/**/*.{js,jsx,ts,tsx}',
    '!src/**/*.d.ts',
    '!src/index.{js,jsx,ts,tsx}',
    '!src/serviceWorker.{js,jsx,ts,tsx}',
    '!src/reportWebVitals.{js,jsx,ts,tsx}',
    '!src/setupTests.{js,jsx,ts,tsx}',
    '!src/testUtils.{js,jsx,ts,tsx}',
  ],
};
        

Custom Render Function:

// testUtils.js
import React from 'react';
import { render as rtlRender } from '@testing-library/react';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './redux/reducers';

function render(
  ui,
  {
    preloadedState,
    store = configureStore({ reducer: rootReducer, preloadedState }),
    ...renderOptions
  } = {}
) {
  function Wrapper({ children }) {
    return (
      <Provider store={store}>
        <BrowserRouter>{children}</BrowserRouter>
      </Provider>
    );
  }
  return rtlRender(ui, { wrapper: Wrapper, ...renderOptions });
}

// Re-export everything
export * from '@testing-library/react';
// Override render method
export { render };
        

// Performance.test.jsx
import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { PerformanceObserver } from 'perf_hooks';
import LargeList from './LargeList';

// This test uses Node's PerformanceObserver to measure component rendering time
test('renders large list efficiently', async () => {
  // Setup performance measurement
  let duration = 0;
  const observer = new PerformanceObserver((list) => {
    const entries = list.getEntries();
    duration = entries[0].duration;
  });
  
  observer.observe({ entryTypes: ['measure'] });
  
  // Start measurement
  performance.mark('start-render');
  
  // Render large list with 1000 items
  render(<LargeList items={Array.from({ length: 1000 }, (_, i) => ({ id: i, text: `Item ${i}` }))} />);
  
  // End measurement
  performance.mark('end-render');
  performance.measure('render-time', 'start-render', 'end-render');
  
  // Assert rendering time is reasonable
  expect(duration).toBeLessThan(500); // 500ms threshold
  
  // Test interaction is still fast
  performance.mark('start-interaction');
  
  await userEvent.click(screen.getByRole('button', { name: /load more/i }));
  
  performance.mark('end-interaction');
  performance.measure('interaction-time', 'start-interaction', 'end-interaction');
  
  // Assert interaction time is reasonable
  expect(duration).toBeLessThan(200); // 200ms threshold
  
  observer.disconnect();
});
        

Testing for Accessibility:

// Accessibility.test.jsx
import React from 'react';
import { render } from '@testing-library/react';
import { axe, toHaveNoViolations } from 'jest-axe';
import LoginForm from './LoginForm';

expect.extend(toHaveNoViolations);

test('form is accessible', async () => {
  const { container } = render(<LoginForm />);
  
  // Run axe on the rendered component
  const results = await axe(container);
  
  // Check for accessibility violations
  expect(results).toHaveNoViolations();
});
        

// ReactQuery.test.jsx
import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import { QueryClient, QueryClientProvider } from 'react-query';
import { rest } from 'msw';
import { server } from '../mocks/server';
import UserList from './UserList';

// Create a fresh QueryClient for each test
const createTestQueryClient = () => new QueryClient({
  defaultOptions: {
    queries: {
      retry: false,
      cacheTime: 0,
      staleTime: 0,
    },
  },
});

function renderWithClient(ui) {
  const testQueryClient = createTestQueryClient();
  const { rerender, ...result } = render(
    <QueryClientProvider client={testQueryClient}>
      {ui}
    </QueryClientProvider>
  );
  
  return {
    ...result,
    rerender: (rerenderUi) =>
      rerender(
        <QueryClientProvider client={testQueryClient}>
          {rerenderUi}
        </QueryClientProvider>
      ),
  };
}

test('fetches and displays users', async () => {
  // Mock API response
  server.use(
    rest.get('/api/users', (req, res, ctx) => {
      return res(ctx.json([
        { id: 1, name: 'Alice' },
        { id: 2, name: 'Bob' }
      ]));
    })
  );
  
  renderWithClient(<UserList />);
  
  // Check loading state
  expect(screen.getByText(/loading/i)).toBeInTheDocument();
  
  // Verify data is displayed
  await waitFor(() => {
    expect(screen.getByText('Alice')).toBeInTheDocument();
    expect(screen.getByText('Bob')).toBeInTheDocument();
  });
});
        

The Testing Trophy (Kent C. Dodds):

                 🏆 End-to-End
              Integration Tests
            Unit/Component Tests
        Static Analysis (TypeScript, ESLint, etc.)
        

Unit tests should be numerous but focused, covering specific behaviors and edge cases. Integration tests should verify component interactions, and E2E tests should validate critical user flows.

Custom Test Renderer:

// test-utils.js
import React from 'react';
import { render as rtlRender } from '@testing-library/react';
import { configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';
import { ThemeProvider } from 'styled-components';
import { MemoryRouter } from 'react-router-dom';
import { theme } from '../theme';
import rootReducer from '../redux/rootReducer';

// Create a customized render function that includes providers
function render(
  ui,
  {
    preloadedState = {},
    store = configureStore({ reducer: rootReducer, preloadedState }),
    route = '/',
    history = [route],
    ...renderOptions
  } = {}
) {
  function Wrapper({ children }) {
    return (
      <Provider store={store}>
        <ThemeProvider theme={theme}>
          <MemoryRouter initialEntries={history}>
            {children}
          </MemoryRouter>
        </ThemeProvider>
      </Provider>
    );
  }
  return {
    ...rtlRender(ui, { wrapper: Wrapper, ...renderOptions }),
    // Return store and history for advanced test cases
    store,
    history,
  };
}

// Re-export everything from RTL
export * from '@testing-library/react';
// Override render method
export { render };
        

Testing Error Boundaries:

import React from 'react';
import { render, screen } from '../test-utils';
import ErrorBoundary from './ErrorBoundary';
import BuggyComponent from './BuggyComponent';

// Mock console.error to avoid cluttering test output
const originalError = console.error;
beforeAll(() => {
  console.error = jest.fn();
});
afterAll(() => {
  console.error = originalError;
});

test('renders fallback UI when child component throws', () => {
  // Arrange a component that will throw an error when rendered
  const FailingComponent = () => {
    throw new Error('Simulated error');
    return null;
  };

  // Act - Render the component within an error boundary
  render(
    <ErrorBoundary fallback={<div>Something went wrong</div>}>
      <FailingComponent />
    </ErrorBoundary>
  );

  // Assert - Fallback UI is displayed
  expect(screen.getByText(/something went wrong/i)).toBeInTheDocument();
});
        

Testing Memoization and Render Optimizations:

import React from 'react';
import { render } from '../test-utils';
import ExpensiveComponent from './ExpensiveComponent';

test('memo prevents unnecessary re-renders', () => {
  // Setup render spy
  const renderSpy = jest.fn();
  
  // Create test component that tracks renders
  function TestComponent({ value }) {
    renderSpy();
    return <ExpensiveComponent value={value} />;
  }
  
  // Initial render
  const { rerender } = render(<TestComponent value="test" />);
  expect(renderSpy).toHaveBeenCalledTimes(1);
  
  // Re-render with same props
  rerender(<TestComponent value="test" />);
  expect(renderSpy).toHaveBeenCalledTimes(2); // React still calls render on parent
  
  // Check that expensive calculation wasn't run again
  // This requires exposing some internal mechanism to check
  // Or mocking the expensive calculation
  expect(ExpensiveComponent.calculationRuns).toBe(1);
  
  // Re-render with different props
  rerender(<TestComponent value="changed" />);
  expect(ExpensiveComponent.calculationRuns).toBe(2);
});
        

Testing Custom Hooks with Realistic Component Integration:

import React from 'react';
import { render, screen, act } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { useFormValidation } from './useFormValidation';

// Test hook in the context of a real component
function TestComponent() {
  const { values, errors, handleChange, isValid } = useFormValidation({
    initialValues: { email: '', password: '' },
    validate: (values) => {
      const errors = {};
      if (!values.email) errors.email = 'Email is required';
      if (!values.password) errors.password = 'Password is required';
      return errors;
    }
  });
  
  return (
    <form>
      <div>
        <label htmlFor="email">Email</label>
        <input 
          id="email"
          name="email"
          value={values.email}
          onChange={handleChange}
          data-testid="email-input"
        />
        {errors.email && <span data-testid="email-error">{errors.email}</span>}
      </div>
      
      <div>
        <label htmlFor="password">Password</label>
        <input 
          id="password"
          name="password"
          type="password"
          value={values.password}
          onChange={handleChange}
          data-testid="password-input"
        />
        {errors.password && <span data-testid="password-error">{errors.password}</span>}
      </div>
      
      <button disabled={!isValid} data-testid="submit-button">
        Submit
      </button>
    </form>
  );
}

test('form validation works correctly with our custom hook', async () => {
  render(<TestComponent />);
  
  // Initially form should be invalid
  expect(screen.getByTestId('submit-button')).toBeDisabled();
  expect(screen.getByTestId('email-error')).toHaveTextContent('Email is required');
  expect(screen.getByTestId('password-error')).toHaveTextContent('Password is required');
  
  // Fill in the email field
  await userEvent.type(screen.getByTestId('email-input'), 'test@example.com');
  
  // Should still show password error
  expect(screen.queryByTestId('email-error')).not.toBeInTheDocument();
  expect(screen.getByTestId('password-error')).toBeInTheDocument();
  expect(screen.getByTestId('submit-button')).toBeDisabled();
  
  // Fill in password field
  await userEvent.type(screen.getByTestId('password-input'), 'securepassword');
  
  // Form should now be valid
  expect(screen.queryByTestId('email-error')).not.toBeInTheDocument();
  expect(screen.queryByTestId('password-error')).not.toBeInTheDocument();
  expect(screen.getByTestId('submit-button')).not.toBeDisabled();
});
        

Debounced Input Testing:

import React from 'react';
import { render, screen, act } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { DebouncedSearchInput } from './DebouncedSearchInput';

// Mock timers for debounce testing
jest.useFakeTimers();

test('search callback is debounced properly', async () => {
  const handleSearch = jest.fn();
  render(<DebouncedSearchInput onSearch={handleSearch} debounceTime={300} />);
  
  // Type in search box
  await userEvent.type(screen.getByRole('textbox'), 'react');
  
  // Callback shouldn't be called immediately due to debounce
  expect(handleSearch).not.toHaveBeenCalled();
  
  // Fast-forward time by 100ms
  jest.advanceTimersByTime(100);
  expect(handleSearch).not.toHaveBeenCalled();
  
  // Type more text
  await userEvent.type(screen.getByRole('textbox'), ' hooks');
  
  // Fast-forward time by 200ms (now 300ms since last keystroke)
  jest.advanceTimersByTime(200);
  expect(handleSearch).not.toHaveBeenCalled();
  
  // Fast-forward time by 300ms (now 500ms since last keystroke)
  jest.advanceTimersByTime(300);
  
  // Callback should be called with final value
  expect(handleSearch).toHaveBeenCalledWith('react hooks');
  expect(handleSearch).toHaveBeenCalledTimes(1);
});
        

Race Condition Handling:

import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { SearchResults } from './SearchResults';
import * as api from '../api';

// Mock API module
jest.mock('../api');

test('handles out-of-order API responses correctly', async () => {
  // Setup mocks for sequential API calls
  let firstResolve, secondResolve;
  const firstSearchPromise = new Promise((resolve) => {
    firstResolve = () => resolve({ 
      results: [{ id: 1, name: 'First results' }]
    });
  });
  
  const secondSearchPromise = new Promise((resolve) => {
    secondResolve = () => resolve({ 
      results: [{ id: 2, name: 'Second results' }]
    });
  });
  
  api.search.mockImplementationOnce(() => firstSearchPromise);
  api.search.mockImplementationOnce(() => secondSearchPromise);
  
  render(<SearchResults />);
  
  // User searches for "first"
  await userEvent.type(screen.getByRole('textbox'), 'first');
  await userEvent.click(screen.getByRole('button', { name: /search/i }));
  
  // User quickly changes search to "second"
  await userEvent.clear(screen.getByRole('textbox'));
  await userEvent.type(screen.getByRole('textbox'), 'second');
  await userEvent.click(screen.getByRole('button', { name: /search/i }));
  
  // Resolve the second (newer) search first
  secondResolve();
  
  // Wait for results to appear
  await waitFor(() => {
    expect(screen.getByText('Second results')).toBeInTheDocument();
  });
  
  // Now resolve the first (stale) search
  firstResolve();
  
  // Component should still show the second results
  await waitFor(() => {
    expect(screen.getByText('Second results')).toBeInTheDocument();
    expect(screen.queryByText('First results')).not.toBeInTheDocument();
  });
});
        

Render Count Testing:

import React, { useRef } from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import OptimizedList from './OptimizedList';

// Create a wrapper to track renders
function RenderCounter({ children }) {
  const renderCount = useRef(0);
  renderCount.current += 1;
  
  return (
    <div data-testid="render-count" data-renders={renderCount.current}>
      {children}
    </div>
  );
}

test('list item only re-renders when its own data changes', async () => {
  const initialItems = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' }
  ];
  
  render(
    <OptimizedList
      items={initialItems}
      renderItem={(item) => (
        <RenderCounter key={item.id}>
          <div data-testid={`item-${item.id}`}>{item.name}</div>
        </RenderCounter>
      )}
    />
  );
  
  // Get initial render counts
  const getItemRenderCount = (id) => 
    parseInt(screen.getByTestId(`item-${id}`).closest('[data-testid="render-count"]').dataset.renders);
  
  expect(getItemRenderCount(1)).toBe(1);
  expect(getItemRenderCount(2)).toBe(1);
  expect(getItemRenderCount(3)).toBe(1);
  
  // Update just the second item
  const updatedItems = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Updated Item 2' },
    { id: 3, name: 'Item 3' }
  ];
  
  // Re-render with updated items
  render(
    <OptimizedList
      items={updatedItems}
      renderItem={(item) => (
        <RenderCounter key={item.id}>
          <div data-testid={`item-${item.id}`}>{item.name}</div>
        </RenderCounter>
      )}
    />
  );
  
  // Check render counts - only item 2 should have re-rendered
  expect(getItemRenderCount(1)).toBe(1); // Still 1
  expect(getItemRenderCount(2)).toBe(2); // Increased to 2
  expect(getItemRenderCount(3)).toBe(1); // Still 1
  
  // Verify content update
  expect(screen.getByTestId('item-2')).toHaveTextContent('Updated Item 2');
});
        

Advanced Dependency Isolation:

// Tiered mocking approach for different test scopes
import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { rest } from 'msw';
import { setupServer } from 'msw/node';
import Dashboard from './Dashboard';
import * as authService from '../services/auth';

// MSW server for API mocking
const server = setupServer(
  // Default handlers
  rest.get('/api/user/profile', (req, res, ctx) => {
    return res(ctx.json({ name: 'Test User', id: 123 }));
  }),
  rest.get('/api/dashboard/stats', (req, res, ctx) => {
    return res(ctx.json({ visits: 100, conversions: 20, revenue: 5000 }));
  })
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

// Different mocking strategies for different test scenarios
describe('Dashboard', () => {
  // 1. Complete isolation with deep mocks (pure unit test)
  test('renders correctly with mocked services', () => {
    // Directly mock module functionality
    jest.mock('../services/auth', () => ({
      getCurrentUser: jest.fn().mockReturnValue({ name: 'Mocked User', id: 456 }),
      isAuthenticated: jest.fn().mockReturnValue(true)
    }));
    
    jest.mock('../services/analytics', () => ({
      getDashboardStats: jest.fn().mockResolvedValue({
        visits: 200, conversions: 30, revenue: 10000
      })
    }));
    
    render(<Dashboard />);
    expect(screen.getByText('Mocked User')).toBeInTheDocument();
  });
  
  // 2. Partial integration with MSW (API layer integration)
  test('fetches and displays data from API', async () => {
    // Override only the auth module
    jest.spyOn(authService, 'isAuthenticated').mockReturnValue(true);
    
    // Let the component hit the MSW-mocked API
    render(<Dashboard />);
    
    await screen.findByText('Test User');
    expect(await screen.findByText('100')).toBeInTheDocument(); // Visits
    expect(await screen.findByText('20')).toBeInTheDocument(); // Conversions
  });
  
  // 3. Simulating network failures
  test('handles API errors gracefully', async () => {
    // Mock authenticated state
    jest.spyOn(authService, 'isAuthenticated').mockReturnValue(true);
    
    // Override API to return an error for this test
    server.use(
      rest.get('/api/dashboard/stats', (req, res, ctx) => {
        return res(ctx.status(500), ctx.json({ error: 'Server error' }));
      })
    );
    
    render(<Dashboard />);
    
    // Should show error state
    expect(await screen.findByText(/couldn't load dashboard stats/i)).toBeInTheDocument();
    
    // Retry button should appear
    const retryButton = screen.getByRole('button', { name: /retry/i });
    expect(retryButton).toBeInTheDocument();
    
    // Reset API mock to success for retry
    server.use(
      rest.get('/api/dashboard/stats', (req, res, ctx) => {
        return res(ctx.json({ visits: 300, conversions: 40, revenue: 15000 }));
      })
    );
    
    // Click retry
    await userEvent.click(retryButton);
    
    // Should show new data
    expect(await screen.findByText('300')).toBeInTheDocument();
  });
});
        

import React from 'react';
import { render } from '@testing-library/react';
import { DataGrid } from './DataGrid';

test('DataGrid columns maintain expected structure', () => {
  const { container } = render(
    <DataGrid
      columns={[
        { key: 'id', title: 'ID', sortable: true },
        { key: 'name', title: 'Name', sortable: true },
        { key: 'created', title: 'Created', sortable: true, formatter: 'date' }
      ]}
      data={[
        { id: 1, name: 'Sample', created: new Date('2023-01-01') }
      ]}
    />
  );
  
  // Only snapshot the headers, which should be stable
  const headers = container.querySelector('.data-grid-headers');
  expect(headers).toMatchSnapshot();
  
  // Don't snapshot the entire grid or rows which might change more frequently
});
        

src/
  components/
    Button/
      Button.jsx
      Button.test.jsx      # Unit tests
      Button.stories.jsx   # Storybook stories
    Form/
      Form.jsx
      Form.test.jsx
      integration.test.jsx # Integration tests with multiple components
  
  pages/
    Dashboard/
      Dashboard.jsx
      Dashboard.test.jsx
      Dashboard.e2e.test.jsx # End-to-end tests
  
  test/
    fixtures/             # Test data
      users.js
      products.js
    mocks/                # Mock implementations
      services/
        authService.js
    setup/                # Test setup files
      setupTests.js
    utils/                # Test utilities
      renderWithProviders.js
      generateTestData.js
        

// jest.config.js optimized for CI
module.exports = {
  // Run tests in parallel with auto-determined optimal thread count
  maxWorkers: '50%',
  
  // Focus on important metrics
  collectCoverageFrom: [
    'src/**/*.{js,jsx,ts,tsx}',
    '!src/**/*.d.ts',
    '!src/mocks/**',
    '!src/**/index.{js,ts}',
    '!src/serviceWorker.js',
  ],
  
  // Set coverage thresholds for CI to pass
  coverageThreshold: {
    global: {
      statements: 80,
      branches: 70,
      functions: 80,
      lines: 80,
    },
    './src/components/': {
      statements: 90,
      branches: 85,
    },
  },
  
  // Only run specific types of tests in certain CI stages
  testMatch: process.env.CI_STAGE === 'fast' 
    ? ['**/*.test.[jt]s?(x)', '!**/*.e2e.test.[jt]s?(x)']
    : ['**/*.test.[jt]s?(x)'],
  
  // Cache test results to speed up reruns
  cacheDirectory: '.jest-cache',

  // Group tests by type for better reporting
  reporters: [
    'default',
    ['jest-junit', {
      outputDirectory: 'reports/junit',
      outputName: 'js-test-results.xml',
      classNameTemplate: '{filepath}',
      titleTemplate: '{title}',
    }],
  ],
};