Is it good or bad practice for using this kind of functions. How it affects to render speed and for optimization?
const ReactComponent: React.FC = (props) => {
const {isOpen} = props;
const renderIsOpen = () => {
if (!isOpen) {
return null;
}
return <div>Im open!</div>
}
return (
<div>
hello
{renderIsOpen()}
</div>
)
}
I hate this funcs, but my coworker uses this very often.
While it works this seems overkill in lot of situations. The same could be obtain like this:
const ReactComponent: React.FC = ({isOpen}) => {
return (
<div>
hello
{isOpen && <div>Im open!</div>}
</div>
)
}
It could become handy for some code clarity but again if the div you display is too complex you can anyway put it in a separate component.