Как React реализует свои хуки (на высоком уровне)

Вопрос о том, как реализованы хуки, довольно широк, чтобы объяснить каждый хук, возьмем для примера useRef и useState.

Пока useRef(initialValue) — это просто объект с ключом current, возможная реализация:

const myRef = useRef('myReference');
const useRef = (initialValue) => ({ current: initialValue });

Хуки — это просто массивы, этот массив относится к состоянию — и он не используется совместно с другими компонентами, но поддерживается в области, доступной для последующего рендеринга конкретного компонента.

При каждом вызове функции установки мы можем использовать курсор, чтобы определить, какое состояние необходимо использовать.

Возможная реализация useState:

const state = [];
const setters = [];
let firstRun = true;
let cursor = 0;

function createSetter(cursor) {
  return function setterWithCursor(newVal) {
    state[cursor] = newVal;
  };
}

// This is the pseudocode for the useState helper
export function useState(initVal) {
  if (firstRun) {
    state.push(initVal);
    setters.push(createSetter(cursor));
    firstRun = false;
  }

  const setter = setters[cursor];
  const value = state[cursor];

  cursor++;
  return [value, setter];
}

// Our component code that uses hooks
function RenderFunctionComponent() {
  const [firstName, setFirstName] = useState("Rudi"); // cursor: 0
  const [lastName, setLastName] = useState("Yardley"); // cursor: 1

  return (
    <div>
      <Button onClick={() => setFirstName("Richard")}>Richard</Button>
      <Button onClick={() => setFirstName("Fred")}>Fred</Button>
    </div>
  );
}

// This is sort of simulating Reacts rendering cycle
function MyComponent() {
  cursor = 0; // resetting the cursor
  return <RenderFunctionComponent />; // render
}

console.log(state); // Pre-render: []
MyComponent();
console.log(state); // First-render: ['Rudi', 'Yardley']
MyComponent();
console.log(state); // Subsequent-render: ['Rudi', 'Yardley']

// click the 'Fred' button

console.log(state); // After-click: ['Fred', 'Yardley']