Nesting `React.functionComponent` leads to weirdness - what am I misunderstanding?

[njlr]

This:

let f =
  React.functionComponent (fun () -> Html.text "abc")

let app =
  React.functionComponent
    (fun () ->
      Html.div
        [
          f ()
          Html.text "ijk"
        ]
      )

Looks like this:

However, this:

let app =
  React.functionComponent
    (fun () ->
      Html.div
        [
          React.functionComponent (fun () -> Html.text "abc") ()
          Html.text "ijk"
        ]
      )

Looks like this:

What are the rules around calling React.functionComponent inside of a component?

[MangelMaxime]

It seems like you should not use React.functionComponent anymore:

https://github.com/Zaid-Ajaj/Feliz/blob/6841c9b150db7d73f1c9549ede07964949b5eaf0/Feliz/Internal.fs#L17-L28

The warning is wrongly configured, and should be updated to something like #if FABLE_COMPILER_3 || FABLE_COMPILER_4 || FABLE_COMPILER_5 or even better React.functionComponent should just be removed.

But in theory, when creating a function component in React you store it in a variable and then use it later as shown in your first example.

[Zaid-Ajaj]

As @MangelMaxime, React.functionComponent is shouldn't be used any more because we have the [<ReactComponent>] attribute to decorate functions with:

let f = React.functionComponent (fun () -> Html.text "abc")

becomes:

[<ReactComponent>]
let F() = Html.text "abc"

• Use [<ReactComponent>] on functions that are written in PascalCase (React convention)
• Define those function as module-level functions or as a static method in a static class
• Use tupled-parameters for React components f(key:string, value: string) instead of f (key:string) (value: string)

What are the rules around calling React.functionComponent inside of a component?

Basically you should never call (or use React.functionComponent) inside another component.

if you call the React function declaration where it is being declared like React.functionComponent (fun () -> Html.text "abc") () then it will lose its local state and cause weird behaviour like you are seeing in the example above