리액트 훅으로 빨리 돌아올 수 있나요?

리액트 훅으로 빨리 돌아올 수 있나요?

React 문서에서는 콜 후크가 조건부로 동작하지 않음을 명확히 하고 있습니다.원래 리액트 후크 프레젠테이션에서는 리액트가 사용자가 호출한 후크 순서를 사용하여 올바른 값을 주입하기 때문입니다.

이해했습니다만, 후크가 있는 기능 컴포넌트 내에서 조기에 복귀해도 괜찮은지 어떤지 묻고 싶습니다.

그럼 이런 게 허용되나요?

import React from 'react';
import { useRouteMatch, Redirect } from 'react-router';
import { useSelector } from 'react-redux';

export default function Component() {
  const { match } = useRouteMatch({ path: '/:some/:thing' });
  if (!match) return <Redirect to="/" />;

  const { some, thing } = match.params;
  const state = useSelector(stateSelector(some, thing));

  return <Blah {...state} />;
}

엄밀히 말하면useSelector훅은 조건부로 호출되지만, 호출되는 순서는 렌더링 간에 변경되지 않습니다(호크가 1개 줄어들 수 있지만).

이것이 허용되지 않는 경우, 왜 허용되지 않는지 설명하고 후크가 있는 기능 컴포넌트를 조기에 반환하기 위한 일반적인 대체 접근법을 제공할 수 있습니까?

리액트에서는 다른 후크에 앞서 조기 복귀를 할 수 없습니다.컴포넌트가 이전 렌더보다 적은 수의 후크를 실행하면 다음 오류가 발생합니다.

불변 위반:예상보다 적은 수의 후크가 렌더링되었습니다.이는 우발적인 조기 반환 문구가 원인일 수 있습니다.

리액트는 후크콜 전 조기 복귀와 다른 이유로 조건부 후크콜을 구별할 수 없습니다.예를 들어, 3개의 콜이 있는 경우useState두 번째가 끝나고 돌아올 때도 있고 리액트는 두 번째가 끝나고 돌아왔는지 안 돌아왔는지 알 수가 없어요.useState콜 또는 첫 번째 또는 두 번째에 조건을 붙이는 경우useState콜을 하기 때문에, 2개의 콜에 대해서 올바른 상태를 반환하고 있는지 아닌지를 확실히 알 수 없습니다.useState콜이 발생하였습니다.

다음으로 이 에러가 동작하고 있는 것을 확인할 수 있는 예를 나타냅니다(「증분 상태 1」버튼을 2회 클릭하면 에러가 표시됩니다).

import React from "react";
import ReactDOM from "react-dom";

function App() {
  const [state1, setState1] = React.useState(1);
  if (state1 === 3) {
    return <div>State 1 is 3</div>;
  }
  const [state2, setState2] = React.useState(2);
  return (
    <div className="App">
      <div>State 1: {state1}</div>
      <div>State 2: {state2}</div>
      <button onClick={() => setState1(state1 + 1)}>Increment State 1</button>
      <button onClick={() => setState2(state2 + 1)}>Increment State 2</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

제가 권장하는 대안적 접근법은 조기 수익률 이후 부분을 자체 구성요소로 분리하는 것입니다.조기 반납 후 필요한 부분은 소품으로 새 컴포넌트에 전달됩니다.

이 예에서는 다음과 같은 경우가 있습니다.

import React from "react";
import ReactDOM from "react-dom";

const AfterEarlyReturn = ({ state1, setState1 }) => {
  const [state2, setState2] = React.useState(2);
  return (
    <div className="App">
      <div>State 1: {state1}</div>
      <div>State 2: {state2}</div>
      <button onClick={() => setState1(state1 + 1)}>Increment State 1</button>
      <button onClick={() => setState2(state2 + 1)}>Increment State 2</button>
    </div>
  );
};
function App() {
  const [state1, setState1] = React.useState(1);
  if (state1 === 3) {
    return <div>State 1 is 3</div>;
  }
  return <AfterEarlyReturn state1={state1} setState1={setState1} />;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

앞서 말한 바와 같이 컴포넌트 내부에서 조건부로 후크를 실행할 수 없습니다.그러나 사용자 지정 후크로 간주되어 현재 범위에 액세스할 수 있는 렌더 기능을 다른 구성 요소에 전달할 수 있습니다.따라서 컴포넌트를 분할하는 대신 유틸리티 컴포넌트를 다음과 같이 사용합니다.

import React from "react";
import ReactDOM from "react-dom";

const HooksHost = ({ children }) => children();

function App() {
  const [state1, setState1] = React.useState(1);

  if (state1 === 3) {
    return <div>State 1 is 3</div>;
  }

  return (
    <HooksHost>
      {/* should be named to pass lint rule that checks if it starts from 'use' then it is custom hook */}
      {function useHooks() {
        const [state2, setState2] = React.useState(2);
        return (
          <div className="App">
            <div>State 1: {state1}</div>
            <div>State 2: {state2}</div>
            <button onClick={() => setState1(state1 + 1)}>
              Increment State 1
            </button>
            <button onClick={() => setState2(state2 + 1)}>
              Increment State 2
            </button>
          </div>
        );
      }}
    </HooksHost>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

언급URL : https://stackoverflow.com/questions/54938236/can-you-early-return-with-react-hooks