Using Next.js dynamic import to create a generic icons component can effectively reduce client-side component re-rendering issues.

[HOJOON07]

Package

• [ ] lucide
• [ ] lucide-angular
• [ ] lucide-flutter
• [ ] lucide-preact
• [X] lucide-react
• [ ] lucide-react-native
• [ ] lucide-solid
• [ ] lucide-svelte
• [ ] lucide-vue
• [ ] lucide-vue-next
• [ ] Figma plugin
• [ ] all JS packages
• [ ] site

Description

In the sidebar and navigation bar components, I was importing each icon component and using icons via the name attribute. However, every time an icon was clicked or an event occurred, all the icon components exhibited a flickering issue.

Use cases

I was able to resolve it by adding React.memo.

import dynamic from 'next/dynamic';
import { memo } from 'react';
import { LucideProps } from 'lucide-react';
import dynamicIconImports from 'lucide-react/dynamicIconImports';

interface IconProps extends LucideProps {
  name: keyof typeof dynamicIconImports;
}

const Icon = memo(({ name, ...props }: IconProps) => {
  const LucideIcon = dynamic(dynamicIconImports[name]);

  return <LucideIcon {...props} />;
});

export default Icon;

Checklist

• [x] I have searched the existing issues to make sure this bug has not already been reported.

[ishakimanuel]

Same issue here, also this causing hot reload in client component very laggy.