Poor performance

[nepentheus]

Because everything is exported from a single entry, the tooling has to process huge entry files containing all icons, which is especially insufferable in the development mode when HMR does not hit. This makes refreshes long and causing freezes on my laptop. Please provide dedicated import specifiers for icons, this should be simple and I'm willing to help

[nepentheus]

I see this issue was solved in the Svelte package, but why aren't there /icons specifiers for React?

[ethancrawford]

@nepentheus no idea personally. Is this something you'd be able to submit a PR for?

[mmahalwy]

This should solve @ethancrawford @nepentheus #1359

[g-otn]

Besides transforming imports, another performance improvement for React is to patch
createReactComponent.mjs so it memoizes the component. but be careful doing this if you pass props that would always trigger a rerender. (e.g reference unstable props such as inline object, array and functions)

diff --git a/node_modules/@tabler/icons-react-native/dist/esm/createReactNativeComponent.mjs b/node_modules/@tabler/icons-react-native/dist/esm/createReactNativeComponent.mjs
index a5bc806..3346606 100644
--- a/node_modules/@tabler/icons-react-native/dist/esm/createReactNativeComponent.mjs
+++ b/node_modules/@tabler/icons-react-native/dist/esm/createReactNativeComponent.mjs
@@ -5,7 +5,7 @@
  * See the LICENSE file in the root directory of this source tree.
  */
 
-import { forwardRef, createElement } from 'react';
+import { forwardRef, createElement, memo } from 'react';
 import defaultAttributes, { childDefaultAttributes } from './defaultAttributes.mjs';
 import * as NativeSvg from 'react-native-svg';
 
@@ -45,7 +45,7 @@ const createReactNativeComponent = (type, iconName, iconNamePascal, iconNode) =>
     }
   );
   Component.displayName = `${iconNamePascal}`;
-  return Component;
+  return memo(Component);
 };
 
 export { createReactNativeComponent as default };

This is for the react-native package, but the idea is the same for the react package.

[nepentheus]

Besides transforming imports, another performance improvement for React is to patch createReactComponent.mjs so it memoizes the component. but be careful doing this if you pass props that would always trigger a rerender. (e.g reference unstable props such as inline object, array and functions)

i believe that you should open a dedicated issue for this because you suggest a way to improve the runtime performance, and here we discuss poor development tooling responsibility

[nepentheus]

This should solve @ethancrawford @nepentheus #1359

i'll test if it helps, but, maybe, subpath exports are still more optimal for some cases?