React useState 소스코드 분석하기

import {useState} from 'react';

export {useState} from "./ReactHooks"

export function useState<S>(initialState: (() => S) | S) {
  const dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
}

// [react/packages/react/src/ReactHooks.js](https://github.com/facebook/react/blob/v16.12.0/packages/react/src/ReactHooks.js#L77-L80) > resolveDispatcher
 
import ReactCurrentDispatcher from './ReactCurrentDispatcher';
 
function resolveDispatcher() {
  const dispatcher = ReactCurrentDispatcher.current;
  invariant(
    dispatcher !== null,
    'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
      ' one of the following reasons:\n' +
      '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
      '2. You might be breaking the Rules of Hooks\n' +
      '3. You might have more than one copy of React in the same app\n' +
      'See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.',
  );
  return dispatcher;
}

const ReactCurrenDispatcher={
  current: null : null | Dispatcher
};
 
export default ReactCurrentDispatcher;

function renderWithHooks(
	current: Fiber | null,
	workInProgress: Fiber,
	Component: any,
) {
  nextCurrentHook = current !== null ? current.memoizedState : null;
  ReactCurrentDispatcher.current =
      nextCurrentHook === null
        ? HooksDispatcherOnMount
        : HooksDispatcherOnUpdate;
  /* ... */
}	

<Greeting name="Taylor" />

{
  type: Greeting,
  props: {
    name: 'Taylor'
  },
  key: null,
  ref: null,
}

function FiberNode(
  key: null | string,
  mode: TypeOfMode,
  ...
) {
  // Instance
  this.key = key;
  this.elementType = null;
  this.type = null;
  this.stateNode = null;
 
  // Fiber
  this.return = null;
  this.child = null;
  this.sibling = null;
  this.ref = null;
  
  this.updateQueue = null;
  this.memoizedState = null;
 
  // Effects
  this.effectTag = NoEffect;
  this.nextEffect = null;
  this.firstEffect = null;
  this.lastEffect = null;
  
  // ...
}

function renderWithHooks(
	current: Fiber | null,
	workInProgress: Fiber,
	Component: any,
):any {
	nextCurrentHook = current !== null ? current.memoizedState : null;
	ReactCurrentDispatcher.current =
      nextCurrentHook === null
        ? HooksDispatcherOnMount
        : HooksDispatcherOnUpdate;
    /* ... */
}	

const HooksDispatcherOnMount: Dispatcher = {
  useState: mountState,
  useReducer: mountReducer,
};
 
const HooksDispatcherOnUpdate: Dispatcher = {
  useState: updateState,
  useReducer: updateReducer,
};

function updateState<S>(
  initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {
  return updateReducer(basicStateReducer, initialState);
}

function mountState<S>(
  initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {
  const hook = mountWorkInProgressHook();
 
  if (typeof initialState === 'function') {
    initialState = initialState();
  }
  hook.memoizedState = hook.baseState = initialState;
 
  const queue = (hook.queue = {
    last: null,
    dispatch: null,
    lastRenderedReducer: basicStateReducer,
    lastRenderedState: initialState,
  });
 
  const dispatch: Dispatch<BasicStateAction<S>> = 
    (queue.dispatch = (dispatchAction.bind(
      null,
      // Flow doesn't know this is non-null, but we do.
      currentlyRenderingFiber: Fiber,
      queue,
    ): any));
 
  return [hook.memoizedState, dispatch];
}

const hook = mountWorkInProgressHook();

function mountWorkInProgressHook(): Hook {
  const hook: Hook = {
    memoizedState: null,
    baseState: null,
    baseQueue: null,
    queue: null,
    next: null,
  };
 
  if (workInProgressHook === null) {
    // This is the first hook in the list
    currentlyRenderingFiber.memoizedState = workInProgressHook = hook;
  } else {
    // Append to the end of the list
    workInProgressHook = workInProgressHook.next = hook;
  }
  return workInProgressHook;
}

function dispatchAction(...) {
  if (render phase에서 dispatch가 발생){
    render phase에서 발생한 update들을 renderPhaseUpdates의 queue에 순서대로 담는다.
  } else {
    stale 상태에서 발생한 update를 hook.queue의 마지막에 연결한다
    if (이전에 업데이트가 발생한 적이 없음) { // 최적화 진행
      새로 발생한 update를 기존 state에 적용
      적용 전후 state에 차이가 없다면, 아무것도 하지 않고 return (최적화)
    }
    VDOM 업데이트 스케줄링
  }
}

if(renderPhaseDispatch){
	const update: Update = {
		action,
		eagerReducer: null,
		eagerState: null,
		next: null,
	};
 
	if (renderPhaseUpdates === null) {
		renderPhaseUpdates = new Map();
	}
 
	const firstRenderPhaseUpdate = renderPhaseUpdates.get(queue);
 
	if (firstRenderPhaseUpdate === undefined) {
		renderPhaseUpdates.set(queue, update);
	} else {
		let lastRenderPhaseUpdate = firstRenderPhaseUpdate;
		while (lastRenderPhaseUpdate.next !== null) {
			lastRenderPhaseUpdate = lastRenderPhaseUpdate.next;
		}
		lastRenderPhaseUpdate.next = update;
	}
}

else {
	const update: Update = {
		action,
		eagerReducer: null,
		eagerState: null,
		next: null,
	};
	
	const last = queue.last;
	if (last === null) {
		update.next = update;
	} else {
		const first = last.next;
		if (first !== null) {
			update.next = first;
		}
		last.next = update;
	}
	queue.last = update;
	
	if (이전에 업데이트 발생한 적 없음){
      const lastRenderedReducer = queue.lastRenderedReducer;
      if (lastRenderedReducer !== null) {
        let prevDispatcher;
        const currentState = queue.lastRenderedState;
        const eagerState = lastRenderedReducer(currentState, action);
        update.eagerReducer = lastRenderedReducer;
        update.eagerState = eagerState;
        if (is(eagerState, currentState)) {
          return;
        }
      }
	  scheduleWork(fiber, expirationTime);
  }
}

function updateState<S>(
	initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {
	return updateReducer(basicStateReducer, initialState);
}
 
function basicStateReducer<S>(state: S, action: BasicStateAction<S>): S {
  return typeof action === 'function' ? action(state) : action;
}

function updateReducer<S, I, A>(
  reducer: (S, A) => S,
  initialArg: I,
  init?: I => S,
): [S, Dispatch<A>] {
  const hook = updateWorkInProgressHook();
 
  const queue = hook.queue;
  queue.lastRenderedReducer = reducer;
 
  if (리렌더링 단계) {
    const dispatch: Dispatch<A> = (queue.dispatch: any);
    if (renderPhaseUpdates 에 update가 쌓여 있음) {
      쌓여 있는 update를 종합하여 newState 계산
      return [newState, dispatch];
    }
    return [hook.memoizedState, dispatch];
  }
  hook.queue에 쌓여있는 update들을 종합하여,
  새로운 state를 hook.memoizedState에 저장
  
  const dispatch: Dispatch<A> = (queue.dispatch: any);
 
  return [hook.memoizedState, dispatch];
}

const hook = updateWorkInProgressHook();

function updateWorkInProgressHook(): Hook {
  if (nextWorkInProgressHook !== null) {
    // There's already a work-in-progress. Reuse it.
    workInProgressHook = nextWorkInProgressHook;
    nextWorkInProgressHook = workInProgressHook.next;
    currentHook = nextCurrentHook;
    nextCurrentHook = currentHook !== null ? currentHook.next : null;
  } else {
    // Clone from the current hook.
    currentHook = nextCurrentHook;
 
    const newHook: Hook = {
      memoizedState: currentHook.memoizedState,
      baseState: currentHook.baseState,
      queue: currentHook.queue,
      baseUpdate: currentHook.baseUpdate,
      next: null,
    };
 
    if (workInProgressHook === null) {
      // This is the first hook in the list.
      workInProgressHook = firstWorkInProgressHook = newHook;
    } else {
      // Append to the end of the list.
      workInProgressHook = workInProgressHook.next = newHook;
    }
    nextCurrentHook = currentHook.next;
  }
  return workInProgressHook;
}
 

const last = queue.last;
const baseUpdate = hook.baseUpdate;
const baseState = hook.baseState;
let first;
 
if (baseUpdate !== null) {
  if (last !== null) {
    last.next = null;
  }
  first = baseUpdate.next;
} else {
  first = last !== null ? last.next : null;
}
 
if (first !== null) {
  let newState = baseState;
  let newBaseState = null;
  let newBaseUpdate = null;
  let prevUpdate = baseUpdate;
  let update = first;
  do {
    const action = update.action;
    newState = reducer(newState, action);
    prevUpdate = update;
    update = update.next;
  } while (update !== null && update !== first);
 
  hook.memoizedState = newState;
  hook.baseUpdate = newBaseUpdate;
  hook.baseState = newBaseState;
 
  queue.lastRenderedState = newState;
}
 
const dispatch: Dispatch<A> = (queue.dispatch: any);
 
return [hook.memoizedState, dispatch];

const dispatch: Dispatch<A> = (queue.dispatch: any);
if (renderPhaseUpdates !== null) {
  const firstRenderPhaseUpdate = renderPhaseUpdates.get(queue);
  if (firstRenderPhaseUpdate !== undefined) {
    renderPhaseUpdates.delete(queue);
    let newState = hook.memoizedState;
    let update = firstRenderPhaseUpdate;
    do {
      const action = update.action;
      newState = reducer(newState, action);
      update = update.next;
    } while (update !== null);
 
    hook.memoizedState = newState;
    if (hook.baseUpdate === queue.last) {
      hook.baseState = newState;
    }
 
    queue.lastRenderedState = newState;
 
    return [newState, dispatch];
  }
}
return [hook.memoizedState, dispatch];

const ExampleComponent = () =>{
	const [a, setA] = useState(0);
	const [b, setB] = useState(()=>true);
	return (
		<button onClick={()=>{setB(()=>false)}}/>
	)
}

// Fiber.memoizedState ===
{
	memoizedState: 0,
	baseState: 0,
	baseUpdate: null,
	queue: {
		last: null,
		dispatch: dispatchAction.bind(...),
		lastRenderedReducer: basicStateReducer,
		lastRenderedState: 0
	},
	next: {
		memoizedState: true,
		baseState: true,
		baseUpdate: null,
		queue: {
			last: null,
			dispatch: dispatchAction.bind(...),
			lastRenderedReducer: basicStateReducer,
			lastRenderedState: true
		},
		next: {
			// 만약 hook이 더 있다면
			memoizedState: ...,
			...
		}
	}
}

{
	memoizedState: true,
	baseState: true,
	baseUpdate: null,
	queue: {
		last: {
			expirationTime: 1073741823,
			action: ()=>false,
			eagerReducer: basicStateReducer(state, action),
			eagerState: false, // updated!
			next: { /* last 자기 자신 */},
		},
		dispatch: dispatchAction.bind(...),
		lastRenderedReducer: basicStateReducer,
		lastRenderedState: true
	},
	next: null
}

{
	memoizedState: false, // updated!
	baseState: false, // updated!
	baseUpdate: {
		expirationTime: 1073741823,
		action: ()=>false,
		eagerReducer: basicStateReducer(state, action),
		eagerState: false, 
		next: null, // circle 끊어짐
	},
	queue: {
		last: {
			expirationTime: 1073741823,
			action: ()=>false,
			eagerReducer: basicStateReducer(state, action),
			eagerState: false,
			next: null // circle 끊어짐
		},
		dispatch: dispatchAction.bind(...),
		lastRenderedReducer: basicStateReducer,
		lastRenderedState: false
	},
	next: null
}