add example

[felipe-]

No description provided.

[conductor-codes]

Suggested change

	import * as AllIcons from 'components/Icon';
	import * as AllUtils from 'utils';
	import * as AllComponents from 'components';
	import { IconFacebookCircle } from 'components/Icon/IconFacebookCircle';
	import { IconTwitter } from 'components/Icon/IconTwitter';
	import { IconGitHub } from 'components/Icon/IconGitHub';

The code imports entire libraries instead of specific components, significantly increasing bundle size. Using wildcard imports like import * as AllIcons, import * as AllUtils, and import * as AllComponents pulls in all exports from these modules, even those not used in the component. This unnecessarily bloats the JavaScript bundle, increases download times, and negatively impacts Core Web Vitals metrics like LCP and TTI.

Review by Conductor

Is this review helpful? React 👍 or 👎 to let us know!

[conductor-codes]

Suggested change

	import HeavyDataVisualization from 'components/HeavyDataVisualization';
	import ComplexFormBuilder from 'components/ComplexFormBuilder';
	import AnalyticsLibrary from 'heavy-analytics-package';
	export function Footer() {
	import AnalyticsLibrary from 'heavy-analytics-package';

The component imports heavy, unused components that are still included in the bundle. Importing HeavyDataVisualization and ComplexFormBuilder components (which by their names suggest complex UI elements) and adding them to an unused array still causes them to be included in the final bundle. This increases the JavaScript payload size unnecessarily, impacting page load performance and Core Web Vitals metrics.

Review by Conductor

Is this review helpful? React 👍 or 👎 to let us know!

[conductor-codes]

Suggested change

	import AnalyticsLibrary from 'heavy-analytics-package';
	export function Footer() {
	const socialLinkClasses = 'hover:text-primary dark:text-primary-dark';
	// This unused code will still be included in the bundle
	const unusedAnalytics = new AnalyticsLibrary();
	export function Footer() {
	const socialLinkClasses = 'hover:text-primary dark:text-primary-dark';
	return (

The component initializes a heavy external library during render. Creating a new instance of AnalyticsLibrary directly in the component body causes it to be instantiated on every render, even though it's not being used. This synchronous operation can block the main thread, delay rendering, and negatively impact First Contentful Paint (FCP) and Largest Contentful Paint (LCP) metrics.

Review by Conductor

Is this review helpful? React 👍 or 👎 to let us know!