메모이제이션에 대한 오해와 진실

const fibonacci = (n) => {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
};

const HooksDispatcherOnMount: Dispatcher = {
    useCallback: mountCallback,
    useContext: readContext,
    useEffect: mountEffect,
    useMemo: mountMemo,
    useReducer: mountReducer,
    useRef: mountRef,
    useState: mountState,
    useMemoCache,
    // ... 생략 
};

function mountMemo<T>(
    nextCreate: () => T, // 메모이제이션할 값을 생성하는 함수
    deps: Array<mixed> | void | null // 의존성 배열
): T {
    // 1. 새로운 hook을 생성하고 현재 Fiber에 연결
    const hook = mountWorkInProgressHook();
 
    // 2. deps 정규화 - undefined일 경우 null로 변경
    const nextDeps = deps === undefined ? null : deps;
 
    // 3. 값 생성
    const nextValue = nextCreate();
 
    // 4. 훅의 상태 저장
    hook.memoizedState = [nextValue, nextDeps];
 
    // 5. 계산된 값 반환
    return nextValue;
}

function mountWorkInProgressHook() {
    const hook: Hook = {
        memoizedState: null,
        baseState: null,
        baseQueue: null,
        queue: null,
        next: null,
    };
 
    if (workInProgressHook === null) {
        // 첫 번째 hook
        currentlyRenderingFiber.memoizedState = workInProgressHook = hook;
    } else {
        // hook을 연결 리스트에 추가
        workInProgressHook = workInProgressHook.next = hook;
    }
 
    return workInProgressHook;
}

function updateMemo<T>(
    nextCreate: () => T,
    deps: Array<mixed> | void | null
): T {
    // 1. 현재 작업 중인 훅을 가져옴
    const hook = updateWorkInProgressHook();
 
    // 2. 의존성 배열 정규화
    const nextDeps = deps === undefined ? null : deps;
 
    // 3. 이전 메모이제이션 상태 가져오기
    const prevState = hook.memoizedState;
 
    // 4. 의존성 배열 비교 후 같다면 이전 값 재사용 
    if (nextDeps !== null) {
        const prevDeps: Array<mixed> | null = prevState[1];
        if (areHookInputsEqual(nextDeps, prevDeps)) {
            return prevState[0];
        }
    }
 
    // 5. 의존성이 다르거나 없을 경우 새로운 값 계산
    const nextValue = nextCreate();
 
    hook.memoizedState = [nextValue, nextDeps];
    return nextValue;
}

const MyComponent = React.memo(function MyComponent(props) {
  return (
    <div>{props.name}</div>
  );
});

export function memo<P extends object>(
        Component: ComponentType<P>,
        _equals = shallowEquals,
) {
 const MemoizedComponent = (props: P) => {
  const prevPropRef = useRef<P | null>(null);
  const prevComponentRef = useRef<ReactElement<P> | null>(null);
 
  // props가 변경되었는지 등을 확인
  const shouldUpdate =
          prevPropRef.current === null || !_equals(prevPropRef.current, props);
 
  prevPropRef.current = props;
  if (shouldUpdate) {
   prevComponentRef.current = createElement(Component, props);
  }
 
  return prevComponentRef.current;
 };
 return MemoizedComponent;
}

function ParentComponent() {
  const [count, setCount] = useState(0);
  
  // 🚨 매 렌더링마다 새로운 객체가 생성됨
  const userInfo = {
    name: "John",
    age: 30
  };
  
  // 🚨 매 렌더링마다 새로운 함수가 생성됨
  const handleClick = () => {
    console.log("버튼 클릭됨");
  };
 
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        카운트 증가 (현재: {count})
      </button>
      
      {/* memo를 사용했지만 매번 리렌더링됨 */}
      <MemoizedChildComponent 
        userInfo={userInfo}        // 매번 새로운 객체
        onClick={handleClick}      // 매번 새로운 함수
      />
    </div>
  );
}

const value = computeExpensive(a, b);

const value = useMemo(() => computeExpensive(a, b), [a, b]);

export function useMemo<T>(
        factory: () => T,
        _deps: DependencyList,
        _equals = shallowEquals,
): T {
 const ref = useRef<{
  _deps: DependencyList;
  value: T;
 } | null>(null);
 
 if (ref.current === null || !_equals(_deps, ref.current._deps)) {
  ref.current = {
   _deps: _deps,
   value: factory(),
  };
 }
 
 return ref.current.value;
}

const [count, setCount] = useState(0);
const doubleCount = useMemo(() => {
    return count * 2;
}, [count]);

const handleTodoAdd = useCallback((newTodo) => {
  setTodos((prev) => [...prev, newTodo]);
}, [setTodos]);

const MyComponent = () => {
 const [todos, setTodos] = useState([]);
 const [note, setNote] = useState('');
 
  const handleTodoAdd = useCallback(...);
  
  const handleNoteChange = useCallback(...);
 
 return (
   <ExpensiveComponent onAdd={handleTaskAdd} /> // todo 상태 변경시에만 리렌더링
   <NoteComponent onNoteChange={handleNoteChange} /> // note 상태 변경시에만 리렌더링      
 );
}

export function useCallback<T extends Function>(
        factory: T,
        _deps: DependencyList,
) {
 return useMemo(() => factory, _deps);
}

const increment = useCallback(() => { 
    setCount((prev) => prev + 1);
}, []);
// ... 생략
return (
    <button onClick={increment}>Click me</button>
);

const ExpensiveComponent = memo((props) => {
  // 무거운 작업 가정
  return <div {...props}></div>;
});

function ParentComponent(style, onClick, onMouseEnter) {
  const handleClick = () => {
    console.log("ParentComponent1에서 실행하는 handleClick");
    onClick();
  };
 
  const handleMouseEnter = () => {
    console.log("ParentComponent1에서 실행하는 handleMouseEnter");
    onMouseEnter();
  };
 
  const newStyle = { backgroundColor: "#f5f5f5", ...style }
 
  return (
    <div>
      <ExpensiveComponent className="a b c" id="test" style={newStyle} />
      <ExpensiveComponent id="test2" onClick={handleClick} />
      <ExpensiveComponent id="test3" onMouseEnter={handleMouseEnter} />
      <ExpensiveComponent id="test4" title="타이틀입니다." />
    </div>
  );
}

 const handleClick = useCallback(() => {
    console.log("ParentComponent1에서 실행하는 handleClick");
    onClick();
  }, [onClick]);
 
  const handleMouseEnter = useCallback(() => {
    console.log("ParentComponent1에서 실행하는 handleMouseEnter");
    onMouseEnter();
  }, [onMouseEnter]);
 
  const style = useMemo(
    () => ({ backgroundColor: "#f5f5f5", ...defaultStyle }),
    [defaultStyle],
  );

function GrandParentComponent() {
    const style = useMemo(() => ({ color: "#09F" }), []);
    const handleClick = useCallback(() => null, []);
    const handleMouseEnter = useCallback(() => null, []);
 
    return (
        <ParentComponent
            style={style}
            onClick={handleClick}
            onMouseEnter={handleMouseEnter}
        />
    );
}