Ways to display react components

Question

Is it okay to display jsx like the following?

//writing a js function to return `jsx`
function child(label, value){
  return (
    <h3>
     {label}: {value}
    </h3>
  )
}

export default function Parent(){
  const [state, setState] = useState({label:"", value:""})
  const {label, value} = state;
  
  return (
    // then call the function to display `jsx`
    <>{test(label, value)}</>
  )
}

Or would it be better practice to write react function component:

function Child({state}){
  return (
    <h3>
     {state.label}: {state.value}
    </h3>
  )
}

export default function Parent(){
  const [state, setState] = useState({label:"", value:""})
  
  return (
    <Child state={state} />
  )
}

Answer 1

It is best practice to render it as a react component.

The reason is, while using just functions is still possible for really simple components, you may want to change it in the future and add more "React like" functionality like hooks into it. At that point, it will probably break and React usually won't tell you that this is what broke your application. It would probably be a headache to find that bug if it happens especially if the function resides another file.

An example can be found in this article for how it can break when using error boundaries.

Calling it as a function may be faster in terms of performance according to this stack overflow answer though but in my opinion not using a function at all is a safer play in that scenario

So if you think you can be careful enough with it, there is no one stopping you. But make sure you don't end up shooting yourself in the foot. Good Luck!