Hooks

const [state,setState] = useState(0)
 
seState()

const [state,setState] = useState(0)
 
seState(1)
seState(2)

// react v18.2 
function mountState<S>( initialState: (() => S) | S ): [S, Dispatch<BasicStateAction<S>>] {
const hook = mountStateImpl(initialState);
const queue = hook.queue;
const dispatch: Dispatch<BasicStateAction<S>> = (dispatchSetState.bind(
  null,
  currentlyRenderingFiber,
  queue,
): any);
queue.dispatch = dispatch;
// const [state,setState] = useState(initialStateValue)  
return [hook.memoizedState, dispatch];
}

// setState 실제 구현 코드
function dispatchSetState<S, A>(
  fiber: Fiber,
  queue: UpdateQueue<S, A>,
  action: A,
): void {
  if (__DEV__) {
    if (typeof arguments[3] === 'function') {
      console.error(
        "State updates from the useState() and useReducer() Hooks don't support the " +
          'second callback argument. To execute a side effect after ' +
          'rendering, declare it in the component body with useEffect().',
      );
    }
  }
 
  const lane = requestUpdateLane(fiber);
 
  const update: Update<S, A> = {
    lane, // 우선순위 파라미터
    revertLane: NoLane,
    action, // setState()의 인자
    hasEagerState: false,
    eagerState: null, // 실제 렌더링하고 싶은 상태의 결과 값
    next: (null: any), // 순환 연결 리스트
  };
 
  if (isRenderPhaseUpdate(fiber)) { 
    enqueueRenderPhaseUpdate(queue, update); // 업데이트 큐에 저장
  } else { // 초기 렌더링
    const alternate = fiber.alternate; // VDOM current tree 참조
    if (
      fiber.lanes === NoLanes &&
      (alternate === null || alternate.lanes === NoLanes)
    ) {
      const lastRenderedReducer = queue.lastRenderedReducer;
      if (lastRenderedReducer !== null) {
        let prevDispatcher;
 
        try {
          const currentState: S = (queue.lastRenderedState: any); // queue의 가장 마지막 state값
          const eagerState = lastRenderedReducer(currentState, action); // 계산 이후의 state값
 
          update.hasEagerState = true;
          update.eagerState = eagerState;
          if (is(eagerState, currentState)) { // 현재 상태와 계산 이후의 상태가 같으면 불필요한 렌더링 방지를 위한 최적화 작업 진행
            /*
            * useState(1)
            * useState(1) return
            * useState(1) return
            */
            enqueueConcurrentHookUpdateAndEagerlyBailout(fiber, queue, update); //bailout 보석금을 내다 == 중간에 return해준다
            return;
          }
        } catch (error) {
        } finally {
        }
      }
    }
    const root = enqueueConcurrentHookUpdate(fiber, queue, update, lane); // 비동기 업데이트 큐에 저장
    if (root !== null) {
      scheduleUpdateOnFiber(root, fiber, lane); // scheduler에 fiber 업데이트 작업을 넘긴다.
      entangleTransitionUpdate(root, queue, lane);
    }
  }
 
  markUpdateInDevTools(fiber, lane, action); 
}

export type Hook = {
  memoizedState: any,
  baseState: any,
  baseQueue: Update<any, any> | null,
  queue: any,
  next: Hook | null,
};
 
// cirular linked list
const queue = hook.queue = {
  last:null,
  dispatch:null,
  lastRenderedReducer:basicStateReducer,
  lastRenderedState: initialState
}
 
export type UpdateQueue<S, A> = {
  pending: Update<S, A> | null,
  lanes: Lanes,
  dispatch: (A => mixed) | null,
  lastRenderedReducer: ((S, A) => S) | null,
  lastRenderedState: S | null,
};