タイトルのワークアラウンドになります。

ネストしている方は途中の説明変数がない分定義が減ります。

![img](/mosaic-code.jpg)

ネストさせずに書くと途中の説明変数の定義が増えます。

![img](/mosaic-code.jpg)

タイトルのワークアラウンドになります。

ネストしている方は途中の説明変数がない分定義が減ります。

```tsx
import { Simplify } from "type-fest";
import { ForwardedRef, forwardRef, memo } from "react";
import type { HTMLAttributes } from "react";

type SomeData = {
  id: number;
  name: string;
  age: number;
};

type SampleProps = {
  isActive?: boolean;
  data?: SomeData;
};

type Props = Simplify<
  {
    children: React.ReactNode;
  } & SampleProps &
    HTMLAttributes<HTMLDivElement>
>;

const Sample = memo(
  forwardRef(function ForwardedComponent(
    { children, isActive = false, data, ...rest }: Props,
    ref: ForwardedRef<HTMLDivElement>
  ) {
    const label = isActive ? "Active" : "InActive";
    return (
      <div
        ref={ref}
        {...rest}
        style={{
          border: "1px solid #000",
          padding: "10px",
        }}
      >
        <span>{label}</span>
        {children}
        <pre>
          <code>{JSON.stringify(data)}</code>
        </pre>
      </div>
    );
  })
);

Sample.displayName = "Cowboy Bebop Memonaized";

export default Sample;

```

ネストさせずに書くと途中の説明変数の定義が増えます。

```tsx
import { Simplify } from "type-fest";
import { ForwardedRef, forwardRef, memo } from "react";
import type { HTMLAttributes } from "react";

type SomeData = {
  id: number;
  name: string;
  age: number;
};

type SampleProps = {
  isActive?: boolean;
  data?: SomeData;
};

type Props = Simplify<
  {
    children: React.ReactNode;
  } & SampleProps &
    HTMLAttributes<HTMLDivElement>
>;

const ForwardedComponent = (
  { children, isActive = false, data, ...props }: Props,
  ref: ForwardedRef<HTMLDivElement>
) => {
  const label = isActive ? "Active" : "InActive";
  return (
    <div
      ref={ref}
      {...props}
      style={{
        border: "1px solid #000",
        padding: "10px",
      }}
    >
      <span>{label}</span>
      {children}
      <pre>
        <code>{JSON.stringify(data)}</code>
      </pre>
    </div>
  );
};

const ForwardedRefComponent = forwardRef(ForwardedComponent);

ForwardedRefComponent.displayName = "Fowarded";

const MemonaizedFowardedComponent = memo(ForwardedRefComponent);

MemonaizedFowardedComponent.displayName = "Memonaized";

export default MemonaizedFowardedComponent;


```

エンジニアとの取引を安全にかんたんに

国内No.1のEXPERT DX プラットフォーム