In case anyone is struggling with the migration to...

# react

[CLOVIS]

In case anyone is struggling with the migration to the new syntax, here's how it went on my codebase: https://gitlab.com/clovis-ai/formulaide/-/commit/f2ff92c06947c6ad54a5310f5953d5b082650d63?merge_request_iid=37

I'm not a Kotlin React dev though, and most of this came from trial and error, so maybe these are not the most optimal solutions.

One thing to keep in mind is that apparently creating regular functions that emit UI (previously fun RBuilder.foo()) are apparently not supported anymore (they still emit UI, but in the closest proper React component, not in the scope of the element they're called in). I'm currently migrating all of them to be proper components, which work fine.

As an added bonus for the devs, thanks a lot for this new syntax, it really is much more convenient and readable than the previous one.

[turansky]

Thank you for your feedback.

Components instead of functions - common recommendation.

One thing to keep in mind is that apparently creating regular functions that emit UI (previously fun RBuilder.foo()) are apparently not supported anymore

It rare cases I also use ChildrenBuilder
extensions (in drafts) - no problems detected.
Please report an issue with example from parallel thread

cc @Sergei Grishchenko , @aerialist

[turansky]

About merge request:

• ChildrenBuilder as hooks receiver - not recommended (static analizer - single really fine solution in this case)
• Short component creation:

// Before (redundant empty lambda)
br {}  
div {}
span {}

// After (with same result)
br()
div()
span()

[CLOVIS]

Why is ChildrenBuilder not recommended for hooks?

It should probably be an @context and not a receiver, but that's not available yet

[CLOVIS]

It's nice that the lambda isn't mandatory anymore, I'll keep that in mind for new code

That will probably help reduce the bundle size a bit as well

[turansky]

Why is ChildrenBuilder not recommended for hooks?

Because it’s 25% safety only, which also:
• increase bundle size
• reduce readability
Only static analyzer can solve this problem effectively

[turansky]

It should probably be an @context and not a receiver

Receiver - wrong direction
Potentially we can have solution without receiver at all

[aerialist]

One thing to keep in mind is that apparently creating regular functions that emit UI (previously fun RBuilder.foo()) are apparently not supported anymore

https://kotlinlang.slack.com/archives/C5ZTZ6ER0/p1641756608001100?thread_ts=1641460995.002000&cid=C5ZTZ6ER0