debug/function-component

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<...> (+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<...> (+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<...> (+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.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 />);