React best practicesfor enterpriseapplications 2025

// Advanced compound component with context
interface TabsContextType {
  activeTab: string;
  setActiveTab: (tab: string) => void;
}

const TabsContext = createContext<TabsContextType | undefined>(undefined);

const Tabs = ({ children, defaultTab, onChange }: TabsProps) => {
  const [activeTab, setActiveTab] = useState(defaultTab);

  const handleTabChange = useCallback((tab: string) => {
    setActiveTab(tab);
    onChange?.(tab);
  }, [onChange]);

  const value = useMemo(() => ({
    activeTab,
    setActiveTab: handleTabChange
  }), [activeTab, handleTabChange]);

  return (
    <TabsContext.Provider value={value}>
      <div className="tabs-container" role="tablist">
        {children}
      </div>
    </TabsContext.Provider>
  );
};

const Tab = ({ id, children }: TabProps) => {
  const context = useContext(TabsContext);
  if (!context) throw new Error('Tab must be used within Tabs');

  const { activeTab, setActiveTab } = context;
  const isActive = activeTab === id;

  return (
    <button
      role="tab"
      aria-selected={isActive}
      className={isActive ? 'tab-active' : 'tab'}
      onClick={() => setActiveTab(id)}
    >
      {children}
    </button>
  );
};

// Using startTransition for non-urgent updates
import { startTransition, useDeferredValue, useTransition } from 'react';

const SearchResults = ({ query }: { query: string }) => {
  const [isPending, startTransition] = useTransition();
  const [results, setResults] = useState([]);
  const deferredQuery = useDeferredValue(query);

  useEffect(() => {
    if (deferredQuery) {
      startTransition(() => {
        // This update is marked as non-urgent
        searchAPI(deferredQuery).then(setResults);
      });
    }
  }, [deferredQuery]);

  return (
    <div>
      {isPending && <div className="loading-indicator">Searching...</div>}
      <Suspense fallback={<SearchSkeleton />}>
        <ResultsList results={results} />
      </Suspense>
    </div>
  );
};

// Using useMemo and useCallback effectively
const ExpensiveComponent = memo(({ data, onAction }: Props) => {
  const processedData = useMemo(() => {
    return data.map(item => ({
      ...item,
      computed: expensiveComputation(item)
    }));
  }, [data]);

  const handleAction = useCallback((id: string) => {
    onAction(id);
  }, [onAction]);

  return (
    <VirtualizedList
      items={processedData}
      onItemClick={handleAction}
      itemHeight={80}
    />
  );
});

const AccessibleModal = ({
  isOpen,
  onClose,
  title,
  children
}: ModalProps) => {
  const modalRef = useRef<HTMLDivElement>(null);
  const previousFocus = useRef<HTMLElement | null>(null);

  useEffect(() => {
    if (isOpen) {
      previousFocus.current = document.activeElement as HTMLElement;
      modalRef.current?.focus();
    } else {
      previousFocus.current?.focus();
    }
  }, [isOpen]);

  const handleKeyDown = useCallback((e: KeyboardEvent) => {
    if (e.key === 'Escape') {
      onClose();
    }
  }, [onClose]);

  useEffect(() => {
    if (isOpen) {
      document.addEventListener('keydown', handleKeyDown);
      return () => document.removeEventListener('keydown', handleKeyDown);
    }
  }, [isOpen, handleKeyDown]);

  if (!isOpen) return null;

  return (
    <div
      className="modal-overlay"
      role="dialog"
      aria-modal="true"
      aria-labelledby="modal-title"
    >
      <div
        ref={modalRef}
        className="modal-content"
        tabIndex={-1}
      >
        <header className="modal-header">
          <h2 id="modal-title" className="modal-title">
            {title}
          </h2>
          <button
            onClick={onClose}
            aria-label="Close modal"
            className="modal-close"
          >
            <X aria-hidden="true" />
          </button>
        </header>
        <div className="modal-body">
          {children}
        </div>
      </div>
    </div>
  );
};