const SomeElement = ({ hasData }) => { if (hasData) { return <div> <DataElement /> <SomeImportantElement /> </div> } return <div> <SomeImportantElement /> </div> }

In this React component, there is duplicated code: <SomeImportantElement /> is rendered in both cases, and <DataElement /> only if hasData is true. You can simplify the component to avoid repetition, for example:

const SomeElement = ({ hasData }) => (
  <div>
    {hasData && <DataElement />}
    <SomeImportantElement />
  </div>
);

This improves readability and maintainability of the code while keeping the same display logic.