πŸ› /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 }
]