4 ms·
I think a better approach is to move the logic to a renderXxx() function: function renderInput(props:Props) { // Early exit if props are not as exp
by laurent123456 5y ago
I think a better approach is to move the logic to a renderXxx() function:
function renderInput(props:Props) {
// Early exit if props are not as expected
if (!props.cond1) return null;
return <JSX/>;
}
Then the parent markup is much cleaner, without any conditional:
{renderInput(props)}
- hombre_fatal 5y agoThough you're also adding indirection. Not always worth it when you're just trying to do some conditional logic next to the code/components that it's related to. Ideally we have the tools to decide when to add indirection ourselves instead being forced to do it to deal with complexity. You could also see this in callback-hell when we'd flatten callback trees with indirection—the tree looked flatter in the editor but we just moved code around. async/await gave us the tools to decide when we actually wanted it.
- eyelidlessness 5y agoHow is that indirection? These are semantically identical: {renderIf(foo)} <RenderIf foo={foo} /> The latter is a bit more verbose, sure, but it’s both more idiomatic and a better optimization target.
- dimgl 5y agoThis pattern is fine, but I would make this a component. function ConditionalComponent(props: Props) { if (!props.condition) return null return <UnderlyingComponent {...props} /> }