Better react render tree naming

Author: OEvgeny

packages/fluent-theme/src/private/FluentThemeProvider.tsx

@@ -74,7 +74,7 @@ const FluentDecorator = composePipeline<InferDecoratorRequest<typeof ActivityBor
   }
 ]);
 
-FluentDecorator.displayName = 'FluentDecorator';
+FluentDecorator.displayName = 'FluentDecoratorPipeline';
 
 const FluentDecoratorWithRequest = memo(function DecoratorWithRequest(props) {
   const request = useDecoratorRequest(ActivityBorderDecoratorRequest);

packages/fluent-theme/src/private/composePipeline.tsx

@@ -13,7 +13,7 @@ type StageComponent<R, P> = ComponentType<
 >;
 type PipelineComponent<P, R> = ComponentType<PipelineProps<R, P>>;
 
-const Passthrough = memo(function Passthrough({ children }: Readonly<{ children?: ReactNode | undefined }>) {
+const Passthrough = memo(function PipelinePassthrough({ children }: Readonly<{ children?: ReactNode | undefined }>) {
   return <Fragment>{children}</Fragment>;
 });
 
@@ -35,12 +35,10 @@ export function composePipeline<
         />
       );
     });
-    StageWrapper.displayName = `${Stage.displayName || Stage.name}Stage`;
+    StageWrapper.displayName = `PipelineStage(Memo(${Stage.displayName || Stage.name}))`;
     return StageWrapper;
   }, PassthroughComponent);
 
-  ComposedPipeline.displayName = `ComposedPipeline(${stages.length})`;
-
   return memo(function Pipeline(props: PipelineProps<Request, Props>) {
     const { request, ...restProps } = props;