-
Notifications
You must be signed in to change notification settings - Fork 47.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Phased dispatcher #14701
Phased dispatcher #14701
Conversation
I don't like looking at this top-level function #petty
Classes support readContext, but not any of the other dispatcher methods. Function support all methods. This is a more robust version of our previous strategy of checking whether `currentlyRenderingFiber` is null. As a next step, we can use a separate dispatcher for each phase of the render cycle (mount versus update).
ReactDOM: size: 🔺+1.0%, gzip: 🔺+0.5% Details of bundled changes.Comparing: e679a4b...5a76a40 react-dom
react-art
react-native-renderer
react-test-renderer
react-reconciler
Generated by 🚫 dangerJS |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Beautiful
Deletes mount-specific code from the update path, since it should be unreachable. To continue supporting progressive enhancement (mounting new hooks at the end of the list), we detect when there are no more current hooks and switch back to the mount dispatcher. Progressive enhancement isn't officially supported yet, so it will continue to warn.
19f3cf0
to
eaac7a5
Compare
d18bb07
to
1f4c337
Compare
const hook = mountWorkInProgressHook(); | ||
// TODO: Lazy init API will change before release. | ||
if (initialAction !== undefined && initialAction !== null) { | ||
// $FlowFixMe - Must express with overloading. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is this what you meant with the remaining Flow issue? That's fine to leave since you're changing it anyway and even then you might end up needing it.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm about to open a follow-up PR
This comment has been minimized.
This comment has been minimized.
Yes, we plan to get this and a few other PRs in before a stable version. If possible, I would like to ask you to refrain from asking questions about release schedule on a PR itself. It creates noise in the code review discussion and isn’t directly relevant to the PR. Instead, an appropriate venue might be a new issue, or a Twitter thread. Thank you! (There is no need to reply — please let’s keep this and other PR discussions focused on code.) |
In order for this strategy to work, I had to revert progressive enhancement support (appending hooks to the end). It was previously a warning but now it results in an error. We'll reconsider later.
ab8fb0e
to
f4afcbb
Compare
Even though the extra args are only used on mount, to ensure type consistency.
* Move DEV-only function right above where it's used I don't like looking at this top-level function #petty * Use different dispatchers for functions & classes Classes support readContext, but not any of the other dispatcher methods. Function support all methods. This is a more robust version of our previous strategy of checking whether `currentlyRenderingFiber` is null. As a next step, we can use a separate dispatcher for each phase of the render cycle (mount versus update). * Use separate dispatchers for mount and update * Remove mount code from update path Deletes mount-specific code from the update path, since it should be unreachable. To continue supporting progressive enhancement (mounting new hooks at the end of the list), we detect when there are no more current hooks and switch back to the mount dispatcher. Progressive enhancement isn't officially supported yet, so it will continue to warn. * Factoring nits * Fix Flow Had to cheat more than I would like * More Flow nits * Switch back to using a special dispatcher for nested hooks in DEV In order for this strategy to work, I had to revert progressive enhancement support (appending hooks to the end). It was previously a warning but now it results in an error. We'll reconsider later. * Always pass args to updateState and updateReducer Even though the extra args are only used on mount, to ensure type consistency.
* Move DEV-only function right above where it's used I don't like looking at this top-level function #petty * Use different dispatchers for functions & classes Classes support readContext, but not any of the other dispatcher methods. Function support all methods. This is a more robust version of our previous strategy of checking whether `currentlyRenderingFiber` is null. As a next step, we can use a separate dispatcher for each phase of the render cycle (mount versus update). * Use separate dispatchers for mount and update * Remove mount code from update path Deletes mount-specific code from the update path, since it should be unreachable. To continue supporting progressive enhancement (mounting new hooks at the end of the list), we detect when there are no more current hooks and switch back to the mount dispatcher. Progressive enhancement isn't officially supported yet, so it will continue to warn. * Factoring nits * Fix Flow Had to cheat more than I would like * More Flow nits * Switch back to using a special dispatcher for nested hooks in DEV In order for this strategy to work, I had to revert progressive enhancement support (appending hooks to the end). It was previously a warning but now it results in an error. We'll reconsider later. * Always pass args to updateState and updateReducer Even though the extra args are only used on mount, to ensure type consistency.
현재 dispatcher를 추적하는 Object currentDispatcher를 추가하였습니다. 이후 dispatcher는 mount/update로 구분하여 개발예정입니다. mount/update logic 을 구분하여 개발함으로써 초기 rendering 속도를 높이기 위함입니다. 자세한 내용은 아래 react pull request를 참고해주세요 facebook/react#14701
현재 dispatcher를 추적하는 Object currentDispatcher를 추가하였습니다. 이후 dispatcher는 mount/update로 구분하여 개발예정입니다. mount/update logic 을 구분하여 개발함으로써 초기 rendering 속도를 높이기 위함입니다. 자세한 내용은 아래 react pull request를 참고해주세요 facebook/react#14701
현재 dispatcher를 추적하는 Object currentDispatcher를 추가하였습니다. 이후 dispatcher는 mount/update로 구분하여 개발예정입니다. mount/update logic 을 구분하여 개발함으로써 초기 rendering 속도를 높이기 위함입니다. 자세한 내용은 아래 react pull request를 참고해주세요 facebook/react#14701
현재 dispatcher를 추적하는 Object currentDispatcher를 추가하였습니다. 이후 dispatcher는 mount/update로 구분하여 개발예정입니다. mount/update logic 을 구분하여 개발함으로써 초기 rendering 속도를 높이기 위함입니다. 자세한 내용은 아래 react pull request를 참고해주세요 facebook/react#14701
현재 dispatcher를 추적하는 Object currentDispatcher를 추가하였습니다. 이후 dispatcher는 mount/update로 구분하여 개발예정입니다. mount/update logic 을 구분하여 개발함으로써 초기 rendering 속도를 높이기 위함입니다. 자세한 내용은 아래 react pull request를 참고해주세요 facebook/react#14701
현재 dispatcher를 추적하는 Object currentDispatcher를 추가하였습니다. 이후 dispatcher는 mount/update로 구분하여 개발예정입니다. mount/update logic 을 구분하여 개발함으로써 초기 rendering 속도를 높이기 위함입니다. 자세한 내용은 아래 react pull request를 참고해주세요 facebook/react#14701
현재 dispatcher를 추적하는 Object currentDispatcher를 추가하였습니다. 이후 dispatcher는 mount/update로 구분하여 개발예정입니다. mount/update logic 을 구분하여 개발함으로써 초기 rendering 속도를 높이기 위함입니다. 자세한 내용은 아래 react pull request를 참고해주세요 facebook/react#14701
현재 dispatcher를 추적하는 Object currentDispatcher를 추가하였습니다. 이후 dispatcher는 mount/update로 구분하여 개발예정입니다. mount/update logic 을 구분하여 개발함으로써 초기 rendering 속도를 높이기 위함입니다. 자세한 내용은 아래 react pull request를 참고해주세요 facebook/react#14701
현재 dispatcher를 추적하는 Object currentDispatcher를 추가하였습니다. 이후 dispatcher는 mount/update로 구분하여 개발예정입니다. mount/update logic 을 구분하여 개발함으로써 초기 rendering 속도를 높이기 위함입니다. 자세한 내용은 아래 react pull request를 참고해주세요 facebook/react#14701
* FY-64/chore: add currentDispatcher 현재 dispatcher를 추적하는 Object currentDispatcher를 추가하였습니다. 이후 dispatcher는 mount/update로 구분하여 개발예정입니다. mount/update logic 을 구분하여 개발함으로써 초기 rendering 속도를 높이기 위함입니다. 자세한 내용은 아래 react pull request를 참고해주세요 facebook/react#14701 * FY-64/chore(hook): add hookCore properties hook을 구현하기 위한 중요한 property들을 정의하였습니다. Refered https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberHooks.js * FY-64/refactor: folder structure hooks 내의 폴더 structure를 세웠습니다. index.js, constnats.js 가 최상단에 존재하며, 각각 훅의 구현은 폴더 내에 존재하게 됩니다. ex) MountuseState.js updateUseState.js 파일은 useEffect내에 존재하게 됨. * FY-64/chore: modify constants type을 정의하기 위해 있었던 객체 defaultHook 과 effectValue를 types.js로 옮겼습니다. * FY-64/chore(workInProgressHook): add workInProgressHook function hook에서 현재 render중인 hook의 객체를 얻고 전역 객체의 상태를 업데이트 하기 위한 함수 mountWorkInProgressHook과 updateWorkInProgressHook을 정의하였습니다. 각각 mountHook, updateHook에서 현재 hook의 객체를 얻는데 사용될 예정입니다. * FY-64/chore(dispatcher): add hookDispatcher 현재 component의 상태에 따른 dispatcher를 정의합니다. dispatcher는 이후 추가될 renderWithHooks에 의해 mount, update가 결정 됩니다. * FY-64/chore: init hooks prototype 각 hook 의 prototype을 정의하였습니다. - useEffect - useReducer → useState - useMemo → useCallback → useRef 각각 다음과 같은 dependency에 의해 구현될 예정입니다. * fix(effectTag): reDefinition HookEffectTags * FY-67/feature use reducer (#12) * FY-67/docs(types): add types for useReducer useReducer를 구현하기 위한 type인 TUpdate,TUpdateQueue를 정의하였습니다. * FY-67/chore(objectIs): add ObjectIs * FY-67/refactor(hookCore): move core to hookCore 기존 rfs의 core와 중복되는 점을 감안하여 hook 내부의 core file의 이름을 변경하였습니다. * FY-67/chore(type): add missing things in types.js * restore code * FY-67/refactor(types): split types types.js에 있던 여러 type들을 나누어 별개의 파일로 관리하였습니다. * FY-67/build(lodash): add lodash * FY-67/fix: a typo Hook -> THookObject * FY-67/feat(WorkInProgressHook): implement functions * FY-67/feat(useReducer): implement useReducer * FY-67/chore: export logic define * remove(types): main types.js file * FY-67/refactor(constructor): types use constructor 정의 해놓은 types들을 생성하는 constructor를 만들었습니다. * FY-67/docs: add comment * FY-67/feat(renderWithHook): add second args for ref, context --------- Co-authored-by: Jinmu Go <[email protected]> * FY-64/fix: renderWithHooks finishRenderingHook함수를 추가하였고 renderWithHooks는 컴포넌트를 새로 렌더링하는 함수이끼 때무네 WIP fiber의 hook list를 관리하는 memoizedState와 Effect 객체를 관리하는 updateQueue를 초기화합니다. * FY-64/fix: workInProgressHook의 로직 에러 throw 해당 if문이 불리지않을 것으로 추정 현재 우리 RFS에서는 if문 안쪽, (nextWIPHook이 null이 아닐 경우) 가 없을 것. 아직 react source를 완전히 이해하지 못할 경우를 대비 이런 경우가 나오면 Error를 던져 추후 대비예정. * FY-137/feature use effect (#13) * FY-137/feat(flag): add flag type for Effect Hooks * FY-137/feat(useEffect): implement the hook * FY-137/docs(fiber): add comments Fiber Flags * FY-137/docs(effectInstance): add Missing Object into useEffect * FY-137/chore(index.js): add useEffect * FY-64/docs(hooks): add comment for pushEffect * FY-64/docs: enqueueRenderPhaseUpdate add comment * FY-187/feat(hook): add useRef (#19) * feat(hooks): add useCallback (#18) similar with useMemo * feat(hook): add useState (#16) hasEagerState와 그 처리과정에 주목해주세요. * FY-179/feat(hooks): add useLayoutEffect (#15) * FY-179/feat(hooks): add useLayoutEffectImpl * FY-179/fix: a export and add a comment * FY-185/feat(hooks): add useMemo (#17) * FY-64/style: apply eslint formatting * FY-190/hook refactoring (#20) * FY-190/refactor(shared): add areHookDepsEqual * FY-190/refactor(hooks): add MemoizedValueAndDeps useMemo와 useCallback에서 사용되는 memoizedState를 생성하는 클래스입니다. * FY-190/refactor(useState): arrange function order * FY-190/refactor: FunctionComponentUpdateQueue * FY-190/refactor: EffectInstance * FY-190/refactor(shard): add enqueueRenderPhaseUpdate * FY-190/fix: a typo * FY-190/refactor(type): remove Object.freeze constructor에서 해당 타입에대한 instance를 생성하기 때문에 types를 사용하지 않습니다. 그래서 불필요한 객체 동결을 삭제합니다. * FY-193/feat(hookObject): renew to 16.12.0 * FY-193/style: small fix in prettier,eslint * FY-193/feat(hookCore): renew to 16.12.0 * FY-193/style: apply new style rule * FY-193/feat(hookUpdateQueue): renew 16.12.0 pending -> last * FY-193/feat(workInProess): renew to 16.12.0 * FY-193/feat(hookUpdate): renew 16.12.0 * FY-193/feat(hookExpirationTime): add new Object for expirationTime * FY-193/feat(hookRenderPhaseCore): add new Object for render phase update render phase시에 update된 것들을 다루는 모듈 스코프 객체인 hookRenderPhase를정의 하였습니다. * FY-193/fix: export statement * FY-193/chore(hook): small fix core * FY-193/feat(dispatcher): add ContextOnlyDispatcher readState만 허용하는 ContextOnlyDispatcher를 추가하였습니다. readState는 이후 ContextAPI구현시 추가될 예정입니다. * FY-193/fix: a typo add .js suffix * FY-193/chore: add NoWork in fiberExpirationTime * FY-193/feat(hook): back to the 16.12.0 renderWithHooks * FY-193/feat(hook): enqueueRenderPhaseUpdate * FY-193/feat(hook): back to the 16.12.0 useReducer & dispatchAction * FY-193/feat(hook): renew useState * FY-193/feat(hook): add useEffect * FY-193/feat(hook): renew useLayoutEffect * FY-193/remove: dummy * FY-193/ci(scripts): add execJsFile.sh 개별 js 파일의 문법 검사를 위한 shellscript를 만들었습니다. * FY-193/fix(type): all type and execute confirm * FY-193/docs: update comment * FY-193/ci(build_check): add script for confirm each file * FY-193/docs(hook): update comments --------- Co-authored-by: Jinmu Go <[email protected]>
Refactor Hooks module to use separate dispatcher implementations for mount versus update. Main benefit is to speed up initial render by removing update-only branches from the mount path.