Hey guys, with react, how do you decide whether you'd use RComponent, FC function or the RBuilder ex...

# javascript

[Nikola Milovic]

Hey guys, with react, how do you decide whether you'd use RComponent, FC function or the RBuilder extension? In regular react I only used functions and arrow functions but then I could return HTML code and put my useStates and logic before that. What's the state of kotlin, I am kinda confused where to put logic and whether to use the classes or the functions. So with these 3 approaches is it up to preference or are there benefits to each one?

[turansky]

Function components preferred (see example)

[turansky]

Also only in function components you can use existed wrappers for:
react-popper
reqct-query
react-table
react-virtual
😉

[Nikola Milovic]

@turansky Thank you! That was exactly what I needed to know.

[CLOVIS]

For very short chunks of code, you can create a function like this:
fun RBuilder.foo(...) {
p { +"Hello world" }
}

That is not a *co*mponent (you can't use hooks, you can't memoize it, etc). However you also don't need to declare props, so sometimes it's convenient.

[Nikola Milovic]

@CLOVIS Hey man I recognize the name, your formulaide got me into switching from classes to functional components, thanks! I am gonna use the RBuilder.() to mostly write reusable atomic components like you do

[CLOVIS]

Really 😅 I didn't know it actually helped anyone... The only reason I use RBuilder.() is for lambdas and for things that are so small that they don't impact performance (React cannot optimize renders for them).

For anything sizeable you should definitely use functional components—but for minuscule functions I found it painful to declare the props interface etc.

[andylamax]

Also @Nikola Milovic feel free to join #react

[Nikola Milovic]

@andylamax oh nice, forgot to check for that, thanks