Хуки, Кастомные хуки

Question

import useHook from "./hook";

export default function App() {
  const [value, setV] = useHook("text");

  useEffect(() => {
    if (value) {
      console.log(value);
      setV();
    }
  }, [value, setV]);

  return null;
}

import { useState } from "react";

const useHook = (text) => {
  const [value, setvalue] = useState("value");

  console.log(text);

  const setV = () => {
    setvalue("newValue");
  };

  return [value, setV];
};

export default useHook;

Помогите разобраться!

2 вопроса:

Получается при вызове setV из App, в кастомном хуке происходит setState, соответственно, я думаю, что происходит повторный запуск этого кастомного хука - так вот, откуда он при повторном вызове узнает про значение своего параметра, ведь явно параметр мы передавали при первом его вызове, в компоненте App.
получается же возвращаемый setV из кастомного хука - это же новая функция. Так почему не происходит бесконечный рендеринг?

Answer 1

useState хранит в себе данные предыдущего рендера, а если рендер первый, то получает данные из defaultValue (в твоем случае - "text"). Т.е. при ререндере useState запомнит своё значение из предыдущего рендер и использует его, игнорируя новые defaultValue
Бесконечного ререндера нет, потому что это простые данные. Опишу цикл работы для наглядности:

-> Mount

-> setV

-> setState from "text" to "newValue"

-> didMount

-> Mount

-> setV

-> setState from "newValue" to "newValue" (вот тут реакт увидит, что prevStateValue == newStateValue, поэтому не будет ререндерить дум)

-> Render end

Если ты сделаешь то же самое, но вместо строки будешь использовать число (к примеру count = 1, а в setV - count += 1, то ререндер будет бесконечным)

БЛОГ НА HUSL

Хуки, Кастомные хуки

Ответы (1 шт):