Question 228075 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Ways to display react components

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} />
  )
}
Tags:

2

Answers


  1. 0

    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!

    Login or Signup to reply.
  2. 0

    The second approach looks more simpler and readable. Remember the more readable you make your code, the more manageable it will become as the project grows larger. Also this approach is the most general practice to build react components.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search