bug[React]: Icon Component does not render icon on first render when using `loadIcons` to preload

[SaintPepsi]

bug[React]: Icon Component does not render icon on first render when using `loadIcons` to preload

[cyberalien]

That's correct behavior. Icon component does not render icon until component is mounted. This is done because of SSR - if icon is rendered before it is mounted and page is generated on server, it breaks React's hydration.

[cyberalien]

If you do want icon to render as soon as it is available without mounted shenanigans, I suggest to switch to iconify-icon web component. It renders icon immediately when data is available in shadowDOM, independent of framework. All React sees is iconify-icon element, contents are not visible to React, so web component doesn't have to account for possible hydration shenanigans.

Also available as @iconify-icon/react for React that is a simple wrapper that maps className to class (for web components in React you should use class, not className, which confuses some developers, so I've made a simple wrapper).

[SaintPepsi]

Thanks @cyberalien didn't know that was the way, I'll have a look at those.
I've not really worked with SSR for react, but could the base state be assigned with a window check? if the window doesn't exists does that mean it's being SSR'd? so you could do something like icon: window ? { data: props.icon } : null?

[cyberalien]

Hydration works like this:

• Components are rendered on server, converted to HTML, page is sent to browser as static HTML that is rendered immediately by browser before loading any scripts. This is called server side rendering.
• Then, in browser, after React is loaded, it generates page again in virtual DOM, rendering each component used on page. So like normal client side rendering. However, instead of just rendering it in HTML, it checks HTML page, expecting to find the same content in live HTML, assigns event listeners and stuff to existing HTML instead of replacing content. This is called hydration.

In order for hydration to work, content generated on server and content generated on client must match, otherwise hydration might fail for an entire page.

Window check would not help. It would result in different HTML rendered on server and client, causing hydration errors or complete hydration failure.

One caveat of hydration process is mounting of components. When components are rendered on server, mount event is never called. On client hydration is done before component is mounted because React needs to figure out which component should be assigned to which existing HTML element, only then mount component. Which means after mount event is called, hydration has been completed, so component can render whatever it needs without accounting for SSR.

Why would content be different in case of icon component, causing hydration to fail? Data for icons is loaded asynchronously, which means icon data might not be available when component is rendered. If data is not guaranteed to be available, but content rendered from that data must be identical, the only option is not render icon until hydration process is complete.

There are 2 viable solutions for this:

• Wait for component to mount, then render icon. This is what icon component currently does.
• Render icon without React. This is what web component does.

[SaintPepsi]

Thanks for explaining it, It makes sense.

I've applied your suggestion for iconify-icon and @iconify-icon/react and it works as desired, first time for me working with web components, very nice!

I'll close this issue and PR. Thanks again!