π /Dev Tool
[ESLint] react/no-unstable-nested-components
νλ
2022. 1. 31. 20:38
μλ κ°μ ν¨ν΄μ μ½λλ no-unstable-nested-components μλ¬λ₯Ό λ§λκ² λλ€.
Creating components inside components without memoization leads to unstable components.
The nested component and all its children are recreated during each re-render. Given stateful children of the nested component will lose their state on each re-render.
function Component() {
function UnstableNestedCOmponent() {
return <div />
}
return (
<div>
<UnstableNestedComponent />
</div>
)
}
μ΄λ° ν¨ν΄μ μ μ¬λ‘λ³΄λ€ λ λ§λ€. μλμ κ²½μ°λ κ²¬κ³ ν ννμ μ½λλ‘ κ°μ£Όλλ€.
function OutsideDefinedComponent(props) {
return <div />;
}
function Component() {
return (
<div>
<OutsideDefinedComponent />
</div>
)
}
function Component() {
const MemoizedNestedComponent = React.useCallback(() => <div />, []);
return (
<div>
<MemoizedNestedComponent />
</div>
)
}
function Component() {
return (
<SomeComponent footer={<div />} />
)
}
μ΄λ° λΆμμ ν μ»΄ν¬λνΈμ ν¨ν΄μ λ§μΌλ €λ©΄ .eslintrc νμΌμμ μλμ²λΌ μ€μ ν΄μ€λ€.
...
"react/no-unstable-nested-components": [
"error",
{ "allowAsProps" : false }
]