Concise Component

When an arrow component body contains only a return statement returning JSX, return the JSX directly with a concise arrow function. Keep a block body when it contains additional statements, such as hooks, variable declarations, or conditional returns.

Correct

export default props => <Lookup {...props} />
export default props => <>
    <Title {...props} />
    <Content {...props} />
</>
export default props => {
    const value = useValue()
    return <Field value={value} />
}

Incorrect

export default props => {
    return <Lookup {...props} />
}
export default props => {
    return <>
        <Title {...props} />
        <Content {...props} />
    </>
}

Fix

Remove the block braces and return keyword, leaving the JSX directly after => without wrapping parentheses. Preserve existing comments.