Hi everyone, I was wondering if there was a way to make a generic react component in Kotlin/JS. The ...

# react

[Paul SOUTEYRAT]

Hi everyone,
I was wondering if there was a way to make a generic react component in Kotlin/JS.
The following minimal example seems to be working:

interface MyGenericCompProps<T> : RProps

fun <T> myGenericComp() = { props: MyGenericCompProps<T> ->
    buildElement {
        div {
            +"Generic component"
        }
    }
}

val genericCompContainer = functionalComponent<RProps> {
    child(myGenericComp<Any>())
}

But I am not sure if it's a good way to make a component.
Do any of you see issues with my example ?

[turansky]

1. For generic

external interface MyGenericProps<T>: RProps

fun <T> RBuilder.myGenericComp(props: MyProps<T>) {
     // add elements
}

[Paul SOUTEYRAT]

@turansky Thanks for your answer. But as I understand it this would not create a new functional component would it ? Besides, I don't see how I could use this method to pass children in props (as it is a final property).
EDIT: When I am testing it this is not creating a new functional component (can't use hooks on it).

[Paul SOUTEYRAT]

Here is an example to illustate that myGenericComp1 is not actually creating a new functional component.

Main.kt

[turansky]

MyGenericComp_kt.kt

[Paul SOUTEYRAT]

Thanks a lot @turansky I now have a working example using your answer. However, I am not seeing any performance improvements (may be my tests are not sophiscated enough). Anyway, would you mine to explain why I should prefer your method over mine?

Main.kt

[turansky]

Anyway, would you mine to explain why I should prefer your method over mine?

Do you mean variants with component and without component?

[turansky]

Draft of next step - https://github.com/bnorm/kotlin-react-function#introduction

[Paul SOUTEYRAT]

Do you mean variants with component and without component?

No, I don't. I was talking about variants between what I originally posted (i.e. a lambda functional component) and what you provided (i.e. a standard generic functional component).

fun <T> myGenericComp() = { props: MyGenericCompProps<T> ->
    buildElement {
        div {
            +"Generic component"
        }
    }
}

[turansky]

myGenericComp in your example - new component every call

AFAIK Kotlin will create anonymous function for lambda, but it’s implementation details, which only hide problem

[Paul SOUTEYRAT]

Ok thanks for the information. I supposed that it was the problem but I wanted confirmation because I wasn't able to detect any difference between the two methods even with hundreds of components and mutiple state changes.