What's the difference between these 2? ```#1 fun RBuilder.Component(prop1:String, prop2:String) {} ...

# react

[Big Chungus]

What's the difference between these 2?

#1
fun RBuilder.Component(prop1:String, prop2:String) {}

#2
interface ComponentProps: RProps {
  var prop1: String
  var prop2: String
}
val Component = rFunction<ComponentProps>("Component"){}

[Marc Knaup]

The former is not a component but merely adds children to another component when called.

The latter is a component and can have state. And because it's functional it can also use hooks.

[Big Chungus]

So if I were to add hooks in both and use them in for loop the former would break?

[Marc Knaup]

Yes, if the loop size changes or the component that uses your function changes its own structure.

Your function is basically adding hooks to another component.

[Big Chungus]

And by sayng "is able to have state" you mean via hooks? Not conventional state like class Components?

[Marc Knaup]

Yes. State for fn components is based on hooks

[Big Chungus]

Got it, thanks

[Big Chungus]

Looks like rFunction is unusable with IR. When doing

interface ComponentProps: RProps {
  var prop1: String
  var prop2: String
}
val Component = rFunction<ComponentProps>("Component"){}

fun RBuilder.test() = Component {
  attrs {
    prop1 = "a"
    prop2 = "b"
  }
}

I'm getting this_0_.setProp1() is not a function

[Marc Knaup]

Props must be an external interface

[Big Chungus]

Oh... Works with Legacy, though

[Marc Knaup]

Yeah but it probably shouldn’t :)