react-hooks/static-components
Disallow components that are created while another component renders
Also called react_hooks/static-components, react/static-components
React decides whether an element is the same one as last time by comparing the component function. A component created inside another component is a new function on every render. React then throws the old subtree away and mounts a new one, so it loses its state, its DOM nodes are rebuilt, and any input in it loses focus.
The rule reports a JSX tag that's a local variable holding a function written in the component, the result of a call, or the result of new.
Configure#
Off by default. To turn it on:
bunfig.toml
[lint.rules]
"react-hooks/static-components" = "error" # or "warn"Examples#
example.jsx1 problem
function Form({ label }) {
const Field = () => <input placeholder={label} />;
return <FieldError: Cannot create components during renderComponents created during render will reset their state each time they are created. Declare components outside of render. />;
}example.jsx1 problem
function Page({ theme }) {
const Panel = createPanel(theme);
return <PanelError: Cannot create components during renderComponents created during render will reset their state each time they are created. Declare components outside of render. />;
}example.jsxNo problems
function Field({ label }) {
return <input placeholder={label} />;
}
function Form({ label }) {
return <Field label={label} />;
}Choosing between components that already exist is fine:
example.jsxNo problems
function Heading({ large, children }) {
const Tag = large ? BigTitle : SmallTitle;
return <Tag>{children}</Tag>;
}