Fragments should not be used when there is 1 child

문서 > Datadog 보안 > Code Security > Static Code Analysis (SAST) > SAST 규칙 > Fragments should not be used when there is 1 child

이 페이지는 아직 영어로 제공되지 않습니다. 번역 작업 중입니다.
현재 번역 프로젝트에 대한 질문이나 피드백이 있으신 경우 언제든지 연락주시기 바랍니다.

Metadata

ID: jsx-react/no-redundant-fragments

Language: JavaScript

Severity: Warning

Category: Code Style

Description

This rule emphasizes that React Fragments should not be used when there is only one child within the component. React Fragments are a useful feature for grouping a list of children without adding extra nodes to the DOM. However, when there is only a single child, the use of Fragments is unnecessary and can lead to cluttered and confusing code.

To avoid violating this rule, remove the Fragment (<>...</>) when you have only one child in your component. Instead of wrapping a single child with a Fragment, you can return the child directly.

Non-Compliant Code Examples

export default function Menu() {
  return (
    <>
      <MenuText />
    </>
  );
}

function MenuText() {
  return (
    <h1>
    <>Menu</>
    </h1>
  );
}

Compliant Code Examples

export default function Menu() {
  return <MenuText />;
}

function MenuText() {
  return <h1>Menu</h1>;
}