ReactNode or PropsWithChildren

Let's start by outlining an example that will show us the significant differences. Let's create a visually identical component based on two variants.

/// first variant 
type HintCardProps = {
  text: string;
  children: React.ReactNode;
};

function HintCard({ text, children }: HintCardProps) {
  return (
    <div>
      <p>{text}</p>
      <div>{children}</div>
    </div>
  );
}

and

/// second variant 
type HintCardProps = {
  text: string;
};

function HintCard({ text, children }: PropsWithChildren<HintCardProps>) {
  return (
    <div>
      <p>{text}</p>
      {children && <div>{children}</div>}
    </div>
  );
}

The code in the components immediately shows the differences between each variant. When creating a component that needs to pass additional components, becoming a wrapper, it is better to use props from ReactNode. The PropsWithChildren type declaration creates a helper type with the children field as optional.

 type PropsWithChildren<P = unknown> = P & { children?: ReactNode | undefined };

The difference is quite subtle but important. PropsWithChildren takes the component properties (props) and returns an intersection type with the children property, reducing boilerplate. It is important to know the difference between these two variants and use them consciously.

Go back to articles