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:functionParent(){constchild=()=><span>this is bad</span>return<div>{child()}</div>}
// useCallback to solve excessive rerenders:functionParent(){constchild=useCallback(()=><span>slightly better</span>,[])return<div>{child()}</div>}
// Just define as its own component:functionChild(){return<span>I'm a child!</span>}functionParent(){return<div><Child/></div>}
Hi 👋
This is Suchintan a Full Stack Developer with MERN stack.
Want to know more about me?
Connect me on - https://www.linkedin.com/in/suchintan-das-b698bb1b8/
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.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
In your first example, the
const card
is not HTML, it's a React component, nested inside yourParent
. 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.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.