DEV Community

Discussion on: React Props complete guide for beginners

View post
Collapse
 
brense profile image
Rense Bakker •

In your first example, the const card is not HTML, it's a React component, nested inside your Parent. It's not recommended to have nested component definitions and if you absolutely feel that you must do this, you should atleast wrap it inside a useCallback hook to prevent excessive rerenders.

// Very bad for performance:
function Parent(){
  const child = () => <span>this is bad</span>
  return <div>{child()}</div>
}
Enter fullscreen mode Exit fullscreen mode 
// useCallback to solve excessive rerenders:
function Parent(){
  const child = useCallback(() => <span>slightly better</span>, [])
  return <div>{child()}</div>
}
Enter fullscreen mode Exit fullscreen mode 
// Just define as its own component:
function Child(){
  return <span>I'm a child!</span>
}

function Parent(){
  return <div><Child /></div>
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
suchintan profile image
SUCHINTAN DAS •

Thanks Rense , for the sharing the amazing tip. While I was writing that pro tip my idea was to illustrate that we can send a HTML code also as props to our child component to render.

Yes, while taking the example I tried to keep it short , resulting in a bit unclear manner about why to use it.