Если реквизиты изменены, каким образом я могу дать начальное значение, чтобы избежать эффекта анти-паттерна

Я использую реагирующие крючки. Если реквизиты изменены, какие способы получить начальное значение? Я хочу избежать эффекта анти-паттерна.

ситуация 1

перед построением DOM.

насколько я понимаю, для этих целей подойдет использование memo.if есть другие варианты, которые вы можете их показать.

ситуация 2

после DOM

И в этом варианте useLayoutEffect, useEffect.if есть другие варианты, которые вы можете их показать.

import React, { useState, useMemo, useLayoutEffect, useEffect } from "react";
import ReactDOM from "react-dom";

import "./styles.css";
const X = () => {
  const [x, setX] = useState(0);
  return (
    <div>
      <div>
        <Y x={x} />
      </div>
      <div onClick={() => setX(x + 1)}>{"go"}</div>
    </div>
  );
};

function Y({ x }) {
  const [y, setY] = useState(x);

  /*useMemo(() => {
    console.log("");
    setY(x);
  }, [x]);*/
  /*useEffect(() => {
    console.log("");
    setY(x);
  }, [x]);*/
  /*useLayoutEffect(() => {
    console.log("");
    setY(x);
  }, [x]);*/
  console.log(y);
  return <div className="App">{console.log(y, "DOM")}</div>;
}

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

Я не думаю, что это хорошая практика, чтобы использовать все эти крючки. но я не вижу другого решения. Может быть, есть третий вариант без использования хуков?

Ответ 1

В вашем примере, вам нужно хранить состояние внутри Y? Почему бы не обратиться непосредственно к опоре x?

Если вы хотите обновить состояние y в Y при изменении useEffect x, вы можете использовать useEffect с зависимостью от x.

useEffect(() => {
  setY(x);
}, [x]);

Вы не useMemo использовать useMemo в этом случае, поскольку вы не вычисляете и не возвращаете значение.

Ответ 2

Что вы имеете в виду под "получить начальное значение"? Если вы просто хотите сохранить первое значение, переданное этому компоненту, вы можете использовать useRef()

function Y ({ x }) {
  const initial = useRef(x)
  const y = initial.current

  return <div>the inital value was {y} and the current value is {x}</div>
}

Если вы хотите получить предыдущее значение, вы можете сделать это следующим образом:

function Y ({ x }) {
  const previous = useRef(null)

  const y = previous.current
  // A component coud rerender all the time
  // so only change the previous value when x changes
  useEffect(() => { previous.current = x }, [x])

  return <div>the previous value was {y} and the current value is {x}</div>
}