[ESLint] react/no-unstable-nested-components

 

 

 

 

아래 같은 패턴의 코드는 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 }
]