Можете ли вы вернуться раньше времени с хуками React?

React не позволяет вам делать ранний возврат до других хуков. Если компонент выполняет меньше хуков, чем предыдущий рендер, вы получите следующую ошибку:

Invariant Violation: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

React не может определить разницу между ранним возвратом перед вызовом ловушки и вызовом ловушки, который является условным по какой-то другой причине. Например, если у вас есть 3 вызова useState и вы иногда возвращаетесь после второго, React не может определить, вернулись ли вы после второго вызова useState или вы поставили условие вокруг первого или второго вызова useState, поэтому он может' t надежно знает, возвращает ли он правильное состояние для двух вызовов useState, которые происходят сделал.

Вот пример, который вы можете использовать, чтобы увидеть эту ошибку в действии (дважды нажмите кнопку «Увеличить состояние 1», чтобы получить ошибку):

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);