in essence a function component already is just a function which returns a reactnode. note that the return type reactnode actually does already allow for arrays as well as string, etc.

type reacttext = string | number;
type reactchild = reactelement | reacttext;

interface reactnodearray extends array<reactnode> {}
type reactfragment = {} | reactnodearray;
type reactnode = reactchild | reactfragment | reactportal | boolean | null | undefined;

the primary advantage of writing it as a function component is the ability to call the function using jsx syntax. you can also make use of nested jsx to automatically set the children prop on your function.

you don't need to use jsx. in your example it would be fine to call functioncomponent({animalname: 'dog'}) (note: you cannot do this with class components). in that case the primary difference between it and renderfunction('dog') is that one puts all of its arguments into a single props object and the other doesn't.

Related Query

More Query from same tag