useMemo가 작동하지 않는 이유내가 잘못 쓰고 있는 건가?

useMemo가 작동하지 않는 이유내가 잘못 쓰고 있는 건가?

그래서 나는 Memo와 Callback을 사용하면서 일이 어떻게 돌아가는지 알아보는 중이야.이 시나리오에서 내가 하고 싶은 것은 부모가 동일한 개체를 보낼 때마다 차일드(Child)를 렌더링하지 않는 것이다.

다음은 내 상위 구성 요소:

const Parent = () => {
  const [value, setValue] = useState(0);
  const handleOnClick = e => {
    setValue(value + 1);
  };

  const myObject = useMemo(() => {
    return { value: value - value };
  }, [value]);

  return (
    <div>
      <h1>I am a parent</h1>
      <button onClick={handleOnClick}>
        Click on Me
      </button>
      <Child object={myObject} />
    </div>
  );
};

export default Parent;

"myObject"의 내용은 동일하지만 클릭할 때마다 다시 렌더링되는 My Child 입니다.(참고가 매번 바뀐다는 것은 알지만, memo가 그렇게 하는 것으로 알고 있다)

const Child = ({ object }) => {
  return (
    <div>
      <h1>I am child</h1>
      <p>Object is {JSON.stringify(object)}</p>
    </div>
  );
};

export default React.memo(Child);

여기 샌드박스가 있다.

내가 뭘 잘못하고 있는지, 이번 건에 대한 해결책은 무엇인지 알려달라.

종속 배열은 메모화가 깨질 때 제어하는 것이다.해당 배열의 내용이 변경되면 메모화가 다시 실행된다.반응하여 해당 어레이만 확인하고 완제품은 확인하십시오.

지금 당장 넌 아무 때나 재평가하라고 말하고 있잖아value변화들다음과 같은 경우 어레이에 다른 항목을 제공할 수 있음value네가 원하는 게 아니야의 예value - value결코 변하지 않을 것이기 때문에 별로 말이 되지 않는다. 그러니 내가 시간의 절반을 바꿀 수 있도록 교체하겠다.

const Parent = () => {
  const [value, setValue] = useState(0);
  const handleOnClick = e => {
    setValue(value + 1);
  };

  const halfValue = Math.round(value / 2);
  const myObject = useMemo(() => {
    return { halfValue: halfValue };
  }, [halfValue]);

  return (
    <div>
      <h1>I am a parent</h1>
      <button onClick={handleOnClick}>
        Click on Me
      </button>
      <Child object={myObject} />
    </div>
  );
};

이제 메모는 클릭할 때마다 다시 계산될 것이다.

참조URL: https://stackoverflow.com/questions/60479155/why-the-usememo-is-not-working-am-i-using-it-wrong