렌더 프로펠러 내부에 리액션 후크 사용

렌더 프로펠러 내부에 리액션 후크 사용

후크 규칙에서 가져온 내용:

루프, 조건 또는 내포된 함수에 있는 후크를 호출하지 마십시오.대신 항상 반응 기능의 최상위 수준에서 후크를 사용하십시오.

리액터 소품 기능 상단의 후크를 사용하는 것은 바람직하지 않은가?함수에 의해 반환되는 값에 따라 다르다고 가정한다.

const MyComponent = () => (
    <RenderPropComponent>
        {value => {
            React.useEffect(() => {
                // Magic
            }, [value]);

            return <p>Hello</p>;
        }}
    </RenderPropComponent>
);

그게 그들의 요구 사항을 어긴다고 생각하지 않는다.

이 규칙을 따르면 구성 요소가 렌더링될 때마다 동일한 순서로 후크가 호출되는지 확인하십시오.

하지만 내가 대신 다음과 같은 일을 해야 하는가?

const MyComponent = ({ value }) => {
    React.useEffect(() => {
        // Magic
    }, [value]);

    return <p>Hello</p>;
};

const MyContainer = () => (
  <RenderPropComponent>
      {value => <MyComponent value={value} />}
  </RenderPropComponent>
);

후크는 현재 렌더링 요소를 추적한다.그리고 렌더 프로펠러 기능은 요소가 아니다.그래서 당신은 당신의 소품기능이 아닌 호출요소에 연결될 것이다.이 렌더 프로펠러 기능은 사용자 정의 후크로 처리된다.의외의 행동을 하게 될 것이다.RenderPropComponent호출은 프로펠러 기능을 조건부로 제공한다.

이것은 후크의 규칙을 어기지 않는다 - https://unsplash.com/blog/calling-react-hooks-conditionally-dynamically-using-render-props/#waitdsnt this breaktherofhooks

참조URL: https://stackoverflow.com/questions/55280754/using-react-hooks-inside-render-prop-function