Rules
debug/function-component

debug/function-component

Rule category

Debug.

What it does

Reports all function components. Useful for debugging. This rule should only be used for debugging purposes. Otherwise, leave it off.

Examples

import React from "react";
 
function function Example(): React.JSX.ElementExample() {
  return <JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button />;
}
import React from "react";
 
function function Example(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>Example() {
  return React.function React.createElement<React.HTMLAttributes<HTMLElement>, HTMLElement>(type: keyof React.ReactHTML, props?: (React.ClassAttributes<HTMLElement> & React.HTMLAttributes<...>) | null | undefined, ...children: React.ReactNode[]): React.DetailedReactHTMLElement<React.HTMLAttributes<...>, HTMLElement> (+6 overloads)createElement("button");
}
import React from "react";
 
const const Example: () => React.JSX.ElementExample = () => <JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button />;
import React from "react";
 
const const Example: () => React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>Example = () => React.function React.createElement<React.HTMLAttributes<HTMLElement>, HTMLElement>(type: keyof React.ReactHTML, props?: (React.ClassAttributes<HTMLElement> & React.HTMLAttributes<...>) | null | undefined, ...children: React.ReactNode[]): React.DetailedReactHTMLElement<React.HTMLAttributes<...>, HTMLElement> (+6 overloads)createElement("button");
import React from "react";
 
const const Example: React.MemoExoticComponent<() => React.JSX.Element>Example = React.function React.memo<() => React.JSX.Element>(Component: () => React.JSX.Element, propsAreEqual?: ((prevProps: Readonly<unknown>, nextProps: Readonly<unknown>) => boolean) | undefined): React.MemoExoticComponent<() => React.JSX.Element> (+1 overload)
Lets you skip re-rendering a component when its props are unchanged.
@see{@link https://react.dev/reference/react/memo React Docs}@paramComponent The component to memoize.@parampropsAreEqual A function that will be used to determine if the props have changed.@example```tsx import { memo } from 'react'; const SomeComponent = memo(function SomeComponent(props: { foo: string }) { // ... }); ```
memo
(() => <JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button />);
import React from "react";
 
const const Example: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>Example = React.function React.forwardRef<unknown, {}>(render: React.ForwardRefRenderFunction<unknown, {}>): React.ForwardRefExoticComponent<React.PropsWithoutRef<{}> & React.RefAttributes<unknown>>
Lets your component expose a DOM node to a parent component using a ref.
@see{@link https://react.dev/reference/react/forwardRef React Docs}@see{@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/forward_and_create_ref/ React TypeScript Cheatsheet}@paramrender See the {@link ForwardRefRenderFunction}.@templateT The type of the DOM node.@templateP The props the component accepts, if any.@example```tsx interface Props { children?: ReactNode; type: "submit" | "button"; } export const FancyButton = forwardRef<HTMLButtonElement, Props>((props, ref) => ( <button ref={ref} className="MyClassName" type={props.type}> {props.children} </button> )); ```
forwardRef
(() => <JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button />);