function-component
Reports all function components in JSON format. Useful for debugging. This rule should only be used for debugging purposes; otherwise leave it off.
Full Name in eslint-plugin-react-debug
react-debug/function-componentFeatures
🐞
Rule Details
This rule reports all function components in JSON format. It detects function declarations, arrow functions, components wrapped with React.memo or React.forwardRef, components that call Hooks, and components containing the "use memo" or "use no memo" directive.
Examples
Function declaration as a component
// This rule reports function declarations that return JSX.
function MyComponent() {
return <button />;
}Arrow function as a component
// This rule reports arrow functions that return JSX.
const MyComponent = () => <button />;Component wrapped with React.memo
import React from "react";
// This rule reports components wrapped with React.memo.
const MyComponent = React.memo(() => <button />);Component wrapped with React.forwardRef
import React from "react";
// This rule reports components wrapped with React.forwardRef.
const MyComponent = React.forwardRef(() => <button />);Component that calls a Hook inside
import React, { useEffect } from "react";
// This rule reports function components that use React Hooks.
function MyComponent() {
useEffect(() => {}, []);
}Component with the "use memo" directive
// This rule reports components that contain the "use memo" directive.
function MyComponent() {
"use memo";
}Component with the "use no memo" directive
// This rule reports components that contain the "use no memo" directive.
function MyComponent() {
"use no memo";
}Versions
Resources
See Also
react-debug/hook
Reports all React Hooks in JSON format.