const [data, setData] = useState([]);

// Inefficient render of all Table rows
<Table columns={columns} dataSource={data} />

// Scoped styled-components may be overridden by global AntD styles
const CustomCard = styled(Card)`
  background-color: #f0f2f5;
`;

<Form.Item name="email" dependencies={["username"]} rules={[...]}/> // triggers full form re-validation

Use `shouldUpdate: false` on `` and `rowKey` for efficient diffing in tables.

Bundle Size and Tree Shaking Issues

AntD's default import pattern leads to large bundles if not handled properly. Improper importing includes unused components and themes.

// BAD: Imports entire library
import { Button, DatePicker } from 'antd';
// GOOD: Use babel-plugin-import
import Button from 'antd/es/button';

Configure `babel-plugin-import` for selective, on-demand component loading and eliminate dead code from builds.

Common Pitfalls and Their Root Causes

1. Form State Sharing and Memory Leaks

Forms retain state across hidden modals if not explicitly unmounted. This can result in stale data submissions or memory leaks.

<Modal destroyOnClose /> // ensures form is unmounted with modal

2. Theme Customization Inconsistencies

While AntD allows theme overrides via Less variables, integrating dynamic themes at runtime (e.g., dark mode) is non-trivial.

Use `@ant-design/dark-theme` with Webpack Less loader and dynamic variable swapping, or migrate to CSS variables in AntD v5+.

3. Icon Overhead

AntD icons are large and often unused. Improper tree-shaking can lead to unnecessary kilobytes added to the bundle.

// Import icons explicitly
import { SearchOutlined } from '@ant-design/icons';

Step-by-Step Fixes for Advanced AntD Issues

1. Optimize Form and Table Performance

Use `memoized` columns and `VirtualList` for long datasets. Prefer controlled pagination and lazy data loading to limit render scope.

<Table
  rowKey="id"
  pagination={{ pageSize: 50 }}
  scroll={{ y: 400 }}
/>

2. Configure Babel and Webpack Properly

Install and configure `babel-plugin-import` to allow per-component imports with style injection disabled or customized.

{ "libraryName": "antd", "libraryDirectory": "es", "style": true }

3. Modularize Theme Management

Predefine themes using Less variables and expose a switching mechanism via Webpack theme loader or runtime CSS variables.

// Runtime theme switching via CSS variables (AntD v5)
:root { --ant-primary-color: #1890ff; }

Best Practices for Large-Scale Ant Design Applications

• Use `destroyOnClose` for all modals to prevent hidden state retention.
• Centralize AntD config using `ConfigProvider` and define locale, theme, and direction globally.
• Leverage `useMemo` and `useCallback` to avoid rerenders of heavy AntD components.
• Adopt dynamic import with lazy loading for rarely-used components like `` or ``.
• Use performance profiling tools like React DevTools and Lighthouse to audit runtime cost of AntD components.

Conclusion

Ant Design enables developers to build polished UIs quickly, but its complexity can become a liability in enterprise applications if not managed carefully. Issues such as over-rendering, static theming, and bundle bloat require both tooling configuration and architectural foresight. By applying the outlined strategies—modular styling, intelligent imports, state cleanup, and render optimization—teams can scale AntD applications effectively without compromising performance or maintainability.

FAQs

1. How can I reduce Ant Design bundle size?

Use `babel-plugin-import` for tree-shaking, avoid importing entire components, and include only the required icon sets manually.

2. Why does my form persist after the modal is closed?

AntD modals keep their children mounted by default. Use `destroyOnClose` to fully unmount the form on close.

3. Can I implement dark mode in Ant Design?

Yes, with AntD v5+ or by using `@ant-design/dark-theme`. Dynamic theming requires Less variable overrides or CSS variable mapping.

4. Why is my table slow with large datasets?

AntD tables re-render on parent state changes. Use `rowKey`, pagination, `VirtualList`, and memoization to improve performance.

5. How do I avoid CSS conflicts with styled-components?

Use unique class names or configure `prefixCls` to namespace styles and avoid collisions between AntD and CSS-in-JS libraries.