<div id="readability-page-1" class="page"><div data-article-id="1868852" id="article-body">
 What the heck does that mean? 
Today I'm going to break a React feature that I've been using for a while now.

The <code>React.lazy</code> function is mainly for lazy importing of external components, and in general, the official documentation will tell you to write it like this: 


<div>
<pre><code>export const MyExternalComponent = React.lazy(() =&gt;
 import('./path/to/my/component')
)
</code></pre>
<div>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Enter fullscreen mode</title>
 <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Exit fullscreen mode</title>
 <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>


</div>
</div>



This is a popular optimization recommendation that wraps a <code>&lt;Suspense&gt;</code> component around a component declared with the <code>export default</code> statement in an external component file and imports it on the first call to save resources.

Right. It must be the same component that you declared with the <code>export default</code> statement.

As you'll see when you write a dynamic <code>import</code> statement, if you want to import something that you've declared as <code>default export</code>, you import it with the <code>.default</code> attribute. 


<div>
<pre><code>export const MyExternalComponent = React.lazy(() =&gt;
 import('./path/to/my/component')
 .then(({ OtherComponent }) =&gt; ({ default: OtherComponent }))
)
</code></pre>
<div>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Enter fullscreen mode</title>
 <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Exit fullscreen mode</title>
 <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>


</div>
</div>



From this feature, I came up with a brilliant idea. 


<div>
<pre><code>export const IntrovertComponent = React.lazy(() =&gt;
 fetch('/path/to/api')
 .then(res =&gt; res.json())
 .then(json =&gt; {
 const MyComponent = () =&gt; {
 return &lt;pre&gt;{JSON.stringify(json, null, 2)}&lt;/pre&gt;
 }
 return { default: MyComponent }
 })
</code></pre>
<div>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Enter fullscreen mode</title>
 <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Exit fullscreen mode</title>
 <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>


</div>
</div>



You might be wondering if the above code will work, right? 
The short answer is yes. It will work.

Why?

React doesn't care if there's an <code>import</code> statement in the function body or not. We're not necessarily using the Webpack bundler, so it's a pain for them to analyze the bundler's code output. 
Instead, the value is in the ability to defer the <code>import</code> statement.

Anyway, the argument to the <code>lazy</code> function accepts a function that returns a <code>Promise</code> instance, so it doesn't have to be an <code>import</code> statement, just a <code>Promise</code> object.

Instead, there is one thing to keep in mind.

This behavior will be out of the purpose of the <code>lazy</code> function. 
Its original purpose is to optimize component resources with <code>import</code>, but since you declared this code inline, you'll be far from optimizing resources.

I hope that in the upcoming React 19, do not implement this nonsense and create a normal component with a <code>use</code> hook function.

The <code>dynamic</code> provided by Next.js can be implemented in the same way. In particular, since the initialization function of the <code>Plotly</code> library I was using returns a <code>Promise</code>, I implemented the following to create a pure client component away from SSR. 


<div>
<pre><code>export const Plotly = dynamic(
 () =&gt;
 import('plotly.js/dist/plotly.js').then(({ newPlot, purge }) =&gt; {
 const Plotly = forwardRef(({ id, className, data, layout, config }, ref) =&gt; {
 const originId = useId();
 const realId = id || originId;
 const originRef = useRef(null);
 const [handle, setHandle] = useState(undefined);

 useEffect(() =&gt; {
 let instance;
 originRef.current &amp;&amp;
 newPlot(originRef.current!, data, layout, config).then((ref) =&gt; setHandle((instance = ref)));
 return () =&gt; {
 instance &amp;&amp; purge(instance);
 };
 }, [data]);

 useImperativeHandle(
 ref,
 () =&gt; (handle ?? originRef.current ?? document.createElement('div')),
 [handle]
 );

 return &lt;div id={realId} ref={originRef} className={className}&gt;&lt;/div&gt;;
 });
 Plotly.displayName = 'Plotly';
 return Plotly;
 }),
 { ssr: false }
);
</code></pre>
<div>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Enter fullscreen mode</title>
 <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Exit fullscreen mode</title>
 <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>


</div>
</div>



I named this component an introvert component. 
Funny, huh?

Happy React'ing!


 </div></div>

Ukjin Yang

What the heck does that mean?
The React.lazy function is mainly for lazy importing of external components, and in general, the official documentation will tell you to write it like this:
export const MyExternalComponent = React.lazy(() =>
 import('./path/to/my/component')
)
This is a popular optimization recommendation that wraps a <Suspense> component around a component declared with the export default statement in an external component file and imports it on the first call to save resources.
Right. It must be the same component that you declared with the export default statement.
As you'll see when you write a dynamic import statement, if you want to import something that you've declared as default export, you import it with the .default attribute.
export const MyExternalComponent = React.lazy(() =>
 import('./path/to/my/component')
 .then(({ OtherComponent }) => ({ default: OtherComponent }))
)
From this feature, I came up with a brilliant idea.
export const IntrovertComponent = React.lazy(() =>
 fetch('/path/to/api')
 .then(res => res.json())
 .then(json => {
 const MyComponent = () => {
 return <pre>{JSON.stringify(json, null, 2)}</pre>
 }
 return { default: MyComponent }
 })
You might be wondering if the above code will work, right?
Why?
React doesn't care if there's an import statement in the function body or not. We're not necessarily using the Webpack bundler, so it's a pain for them to analyze the bundler's code output.
import statement.
Anyway, the argument to the lazy function accepts a function that returns a Promise instance, so it doesn't have to be an import statement, just a Promise object.
Instead, there is one thing to keep in mind.
This behavior will be out of the purpose of the lazy function.
import, but since you declared this code inline, you'll be far from optimizing resources.
I hope that in the upcoming React 19, do not implement this nonsense and create a normal component with a use hook function.
The dynamic provided by Next.js can be implemented in the same way. In particular, since the initialization function of the Plotly library I was using returns a Promise, I implemented the following to create a pure client component away from SSR.
export const Plotly = dynamic(
 () =>
 import('plotly.js/dist/plotly.js').then(({ newPlot, purge }) => {
 const Plotly = forwardRef(({ id, className, data, layout, config }, ref) => {
 const originId = useId();
 const realId = id || originId;
 const originRef = useRef(null);
 const [handle, setHandle] = useState(undefined);
 useEffect(() => {
 let instance;
 originRef.current &&
 newPlot(originRef.current!, data, layout, config).then((ref) => setHandle((instance = ref)));
 return () => {
 instance && purge(instance);
 };
 }, [data]);
 useImperativeHandle(
 ref,
 () => (handle ?? originRef.current ?? document.createElement('div')),
 [handle]
 );
 return <div id={realId} ref={originRef} className={className}></div>;
 });
 Plotly.displayName = 'Plotly';
 return Plotly;
 }),
 { ssr: false }
);
I named this component an introvert component.
Happy React'ing!

Make a React introvert Component (What?🤨)

댓글