Render a component once based on its unique key

[wakaztahir]

@ryansolid How can I skip rendering a component if it has rendered before, meaning only one instance of element in the DOM

In SSR it doesn't work, need to support browser, development & production mode

I am also using SolidJS with Astro

export function CacheMountChildren(props : ParentProps<{ uniqueKey : string }>) {

    // A cache that stores a uniqueKey : properties for every instance
    let cache = useContext(EmotionCacheContext)

       // Check if item has been rendered previously
        const item = cache.get(props.uniqueKey)
        if (item != null && item.hasMountedBefore) {
            // Skipped rendering
        } else {

            // Set Item has been rendered once
            const setCached = (value : boolean) => cache.set(props.uniqueKey, { hasMountedBefore : value })
            setCached(true)

            // Render the item
            return props.children
        }
 }