Usually I have react components defined like so

private class UserView : RComponent<Props,RState>(){
   class Props(
     val fName: String,
     val lName: String,
     . . . . // other props
     val isNew: Boolean
   ) : RProps
   . . . // the rest of the implementation 
}

// default parameters goes here. Not in class props
fun RBuilder.UserView(
  fName: String = "first name",
  lName: String = "last name",
  . . . . // other props
  isNew: Boolean = false
) = child(UserView::class.js,Props(fName,lName,...,isNew)){}

I do this coz it's much more concise than using external interfaces and duplications like so

private external interface Props : RProps {
     var fName: String,
     var lName: String,
     . . . . // other props
     var isNew: Boolean
}

//case 2.1
private class UserView : RComponent<Props,RState>(){
   . . . // the rest of the implementation 
}

//case 2.2
private val UserView = functionalComponent<Props> {
  . . . // the rest of the implementation
}

// default parameters goes here. Not in class props
fun RBuilder.UserView(
  fName: String = "first name",
  lName: String = "last name",
  . . . . // other props
  isNew: Boolean = false
) = child(UserView::class.js,jsObject<Props>{
  this.fName = fName
  this.lName = lName
  . . . 
  this.isNew = isNew
}){}

These two approaches got me thinking. Among these two, which one is the best? and why?, I choose the first approach because I think 1. It has proper nesting i.e.

UserView.Props

2. Generates smaller js bundles compared to alternative 2 (Not sure though, please correct me here) 3. Less verbose code e.t.c FYI: I am Using kotlin 1.3.72 coz 1.4 IR needs a work around to support props implemented with classes Will probably jump to 1.4 when IR is stable not sooner, not later