Repository navigation
Conversation
- 新增 React Router／i18n／Testing／Redux／React Native／生態系整合／ Modern React 18-19／Core React／進階探索等子章節，取材自 React 面試題 精選並改寫成繁體中文與可推理作答的情境題，部分搭配可執行的驗證程式碼 - 補齊題數不足 6 題的既有關卡（fp-1、fp-2、fp-3、fp-5、fp-7、fp-19） - 移除關卡循序解鎖限制，章節內所有關卡都能直接點選 - 單一關卡與錯題重練改成固定抽樣（LEVEL_SIZE/REVIEW_SIZE = 6 題）， 不再因題庫大小不一導致每次刷題份量落差過大 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
Next review available in: 38 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThe core quiz module now provides fixed-size sampling and a shared level size. Web and mobile quiz flows use the helper, chapter maps allow direct access to all levels, functional-programming sets gain questions, and a new React interview chapter aggregates thirty question datasets. ChangesQuiz sampling and level access
Estimated code review effort: 4 (Complex) | ~45 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 14
Note
Due to the large number of review comments, Critical, Major severity comments were prioritized as inline comments.
🟡 Minor comments (15)
packages/core/src/quiz.ts-25-26 (1)
25-26: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winValidate
sizebefore slicing.
sampleFixedQuestionsis exported, butslice(0, -1)silently drops the last question andNaNreturns an empty array. Reject non-negative, non-integer sizes while preserving the documented behavior when the pool is smaller thansize.Proposed fix
export const sampleFixedQuestions = (pool: Question[], size: number): Question[] => - shuffle(pool).slice(0, size).sort((a, b) => a.difficulty - b.difficulty) + (() => { + if (!Number.isInteger(size) || size < 0) { + throw new RangeError('size must be a non-negative integer') + } + return shuffle(pool).slice(0, size).sort((a, b) => a.difficulty - b.difficulty) + })()🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/core/src/quiz.ts` around lines 25 - 26, Update the exported sampleFixedQuestions function to validate size before shuffling or slicing, rejecting negative, non-integer, and NaN values. Preserve the existing behavior for valid sizes, including returning all available questions when the pool is smaller than size.packages/core/src/data/questions/ri-18-misc-early.json-158-158 (1)
158-158: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winKeep the
Object.isbailout explanation scoped touseState.In class components, render bailouts are controlled by
shouldComponentUpdate/PureComponentshallow comparisons rather than theObject.isrule used by thesetXsetter.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/core/src/data/questions/ri-18-misc-early.json` at line 158, Update the explanation for the React state-setter optimization in the question data so it applies only to function components using useState. Remove the claim that the same Object.is bailout rule applies to class component setState, while preserving the existing explanation of setter bailouts and Object.is edge cases for useState.packages/core/src/data/questions/ri-23-misc-layouteffect-ref-imperative.json-17-17 (1)
17-17: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winAvoid calling
useEffectpainting-after paint unconditional.
useEffectusually runs after paint, but interaction/flushSync-triggered effects and certain cascading updates can run before paint. Rephrase the line to present this as the usual behavior, rather than the unconditional wording currently used in line 17.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/core/src/data/questions/ri-23-misc-layouteffect-ref-imperative.json` at line 17, Update the explanatory text in the question’s answer to describe useEffect as usually running after the browser paints, rather than unconditionally after paint; preserve the contrast with useLayoutEffect while acknowledging that interaction- or synchronous-update-triggered effects may run before paint.packages/core/src/data/questions/ri-22-misc-useeffect-deep.json-185-185 (1)
185-185: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winClarify the “runs once” contract with Strict Mode.
[]is one setup per mount, but React Strict Mode in development runs an extra setup → cleanup → setup cycle. Since this states[]“only runs once after the first mount and will never run again” absolutely, add a short exception/qualifier, especially since the question name is focused onuseEffectdeep behavior.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/core/src/data/questions/ri-22-misc-useeffect-deep.json` at line 185, Update the answer text for choice B in the useEffect question to qualify that an empty dependency array runs once per mount, while noting React Strict Mode may perform an additional setup-cleanup-setup cycle in development. Keep the existing explanation for normal production behavior and the other choices unchanged.packages/core/src/data/questions/ri-23-misc-layouteffect-ref-imperative.json-177-178 (1)
177-178: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winValidate the click handler instead of mutating the ref during render.
submitCountRef.current += 1runs on every server render in this check, so it exercises rendering behavior rather than thehandleSubmitno-rerender behavior the option describes. Use an interaction that clicks the button and checks the output/render count.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/core/src/data/questions/ri-23-misc-layouteffect-ref-imperative.json` around lines 177 - 178, Update the Form example in the ri-23-misc-layouteffect-ref-imperative fixture to define a button click handler that increments submitCountRef.current, rather than mutating the ref during render. Exercise the handler through a click interaction and verify the resulting output and render count, preserving the intended no-rerender behavior.packages/core/src/data/questions/ri-19-misc-hooks-foundations.json-114-120 (1)
114-120: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winAvoid saying JSX always compiles to
React.createElement.The new React JSX runtime emits
jsx/jsxsfromreact/jsx-runtime;React.createElementis the classic runtime. Keep the focus on JSX requiring transformation, and include both possible runtime helper outputs.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/core/src/data/questions/ri-19-misc-hooks-foundations.json` around lines 114 - 120, Update the JSX explanation in the question’s option “a” and its “explanation” to avoid claiming JSX always becomes React.createElement. State that JSX requires build-time transformation and may compile to React.createElement with the classic runtime or jsx/jsxs helpers from react/jsx-runtime with the modern runtime.packages/core/src/data/questions/ri-18-misc-early.json-53-59 (1)
53-59: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winSeparate runtime support from package loading.
Keep the bundler-agnostic point, but don’t imply “any JavaScript execution” is enough for browser script loading. Redux’s modern browser-supported artifact is a browser ESM build; it no longer provides a UMD global, so plain
<script>use depends on that compatible distribution (for example a CDN ESM entry point), not just the presence of JavaScript execution.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/core/src/data/questions/ri-18-misc-early.json` around lines 53 - 59, Update the answer a explanation to preserve Redux’s bundler-agnostic behavior while qualifying direct browser loading: distinguish JavaScript runtime support from package loading, and state that plain script usage requires a compatible browser ESM distribution such as a CDN ESM entry point. Remove the implication that any browser <script> tag works universally, while keeping the claim that Redux does not require a specific bundler.packages/core/src/data/questions/ri-2-i18n.json-101-102 (1)
101-102: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winSeparate the server and client declarations.
This prompt’s
codeblock declares the same identifier twice in one lexical scope (locale, then[locale, setLocale]), which is invalid JavaScript if copied or executed. Rename one of them or present the SSR/user-first-render examples as separate snippets/files.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/core/src/data/questions/ri-2-i18n.json` around lines 101 - 102, Update the prompt’s code example to avoid redeclaring locale in the same lexical scope: rename either the server-side locale variable or the client-side state variable, or clearly separate the SSR and client examples into distinct snippets while preserving the demonstrated locale mismatch.packages/core/src/data/questions/ri-26-misc-code-splitting-perf.json-142-173 (1)
142-173: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win避免把虛擬化效果描述成與資料量完全無關。
Windowing 主要限制同時存在的 DOM 節點數量；它不保證整體效能「不管資料總量有多大都差不多」。資料處理、量測、overscan 與記憶體成本仍可能隨資料量或項目複雜度增加。
建議修正
- 讓實際存在的 DOM 節點數量始終維持在一個小範圍內，不管資料總筆數有多大，效能表現都差不多 + 讓實際存在的 DOM 節點數量維持在可控範圍，避免渲染成本隨總筆數線性增加；實際效能仍取決於資料處理、量測與 overscan 設定🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/core/src/data/questions/ri-26-misc-code-splitting-perf.json` around lines 142 - 173, Update the option “a” text in the ri-26-q5 question to remove the claim that performance remains essentially identical regardless of total data size. Keep the explanation of bounded visible DOM nodes and dynamic mounting, but acknowledge that data processing, measurement, overscan, memory, or item complexity can still affect overall performance.packages/core/src/data/questions/ri-27-misc-error-boundaries.json-43-70 (1)
43-70: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win修正事件處理器錯誤會讓整頁卡死的描述。
這個題目使用「整個應用程式外層包 Error Boundary」的 React 19 版本，一般
onClick仍不會被攔截，但不會因此自動顯示 boundary fallback 或卸載整棵 UI；改為描述為未捕捉例外、中止此次 handler 較準確，並可補註 React 19 的startTransitionasync action 屬於例外語意而非一般事件處理器。🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/core/src/data/questions/ri-27-misc-error-boundaries.json` around lines 43 - 70, 更新題目中的 prompt 與相關說明，移除「讓整個頁面卡死」及暗示自動顯示 fallback 或卸載整棵 UI 的描述，改為事件處理器產生未捕捉例外並中止此次 handler。保留一般 onClick 不會被 Error Boundary 攔截的結論，並可在說明中補充 React 19 的 startTransition async action 屬於不同例外語意。Source: MCP tools
packages/core/src/data/questions/ri-4-redux.json-331-331 (1)
331-331: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win統一繁體中文用字。
請將
编譯器改為編譯器，並將样板改為樣板，避免新增題目出現簡繁混用。Also applies to: 353-353
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/core/src/data/questions/ri-4-redux.json` at line 331, 在題目 JSON 的 explanation 文字中統一使用繁體中文，將「编譯器」修正為「編譯器」，並將同一題及另一處 explanation 中的「样板」修正為「樣板」。packages/core/src/data/questions/ri-6-ecosystem.json-12-15 (1)
12-15: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win不要將 TypeScript 錯誤描述成必然阻止打包。
TypeScript 可以在型別檢查階段標紅報錯，但 emit 是否停止、build/CI 是否失敗取決於
noEmitOnError與其他建置工具設定。建議改成「在型別檢查或 build 階段被發現」，避免把可配置行為寫成語言語意。🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/core/src/data/questions/ri-6-ecosystem.json` around lines 12 - 15, 更新題目選項 a 中對 TypeScript 的描述，將「阻止這段程式碼被打包出去」改為「在型別檢查或 build 階段被發現」，保留其相較於 PropTypes 於執行期檢查的對比，並避免暗示錯誤必然阻止 emit 或打包。packages/core/src/data/questions/ri-9-core-basics.json-28-40 (1)
28-40: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win限定 JSX 轉譯說明的適用範圍。
React.createElement是 classic JSX transform 的結果；現代 automatic JSX transform 通常會產生jsx/jsxshelper。請改為「JSX 會被編譯成 React runtime helper；classic transform 對應React.createElement」，避免把舊轉譯結果當成 JSX 轉譯的唯一實作。🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/core/src/data/questions/ri-9-core-basics.json` around lines 28 - 40, 更新題目選項 a 與 explanation，將 JSX 描述為編譯成 React runtime helper；明確說明 classic transform 會對應 React.createElement，而 automatic JSX transform 通常使用 jsx/jsxs helper。保留最終渲染結果與 className 轉為 class 的說明，避免宣稱 React.createElement 是唯一轉譯結果。packages/core/src/data/questions/ri-1-router.json-233-245 (1)
233-245: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winDon’t say refresh clears
navigate(..., { state }).
location.stateis associated with the browser history entry and may be preserved on reload depending on the browser; direct links or new history entries are where state is absent. Keep the guidance focused on it being non-URL/non-durable data rather than stating refresh always clears it.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/core/src/data/questions/ri-1-router.json` around lines 233 - 245, The explanation for the navigate state behavior should not claim that refreshing always clears location.state. Update the explanation near navigate and useLocation to state that the data is stored in the browser history entry, is not included in the URL, and may be unavailable for direct links or newly created history entries; keep the guidance focused on its non-URL and non-durable nature.packages/core/src/data/questions/ri-1-router.json-211-220 (1)
211-220: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winCorrect the v5 warning attribution.
“Router may have only one child element”comes from having more than one direct child under<Router>, not from omitting<Switch>. A missing<Switch>only changes v5 behavior to inclusive route matching.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/core/src/data/questions/ri-1-router.json` around lines 211 - 220, Update the question’s prompt and explanation to attribute the “Router may have only one child element” warning to multiple direct children under <Router>, not to omitting <Switch>. Keep the distinction that a missing <Switch> causes multiple matching routes to render, and ensure option a accurately describes v6 <Routes> behavior without the incorrect warning attribution.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/web/src/app/layout.tsx`:
- Line 33: Remove suppressHydrationWarning from the root html element in the
layout component, while preserving the existing lang attribute and structure. Do
not add replacement suppression at the root; only introduce it later on the
smallest specific element if an actual hydration mismatch is identified and
document its cause.
In `@packages/core/src/data/chapters.ts`:
- Around line 119-123: Update the chapter’s levels array to include the missing
31st dataset (ri31) and ensure it is passed through asLevel alongside ri1–ri30,
preserving the existing level ordering conventions.
In `@packages/core/src/data/questions/fp-1-welcome.json`:
- Around line 71-77: Update the answer options and answer fields for fp-1-q4
through fp-1-q6 in packages/core/src/data/questions/fp-1-welcome.json (lines
71-77, 90-96, 109-115); fp-19-q4 through fp-19-q6 in
packages/core/src/data/questions/fp-19-road-ahead.json (lines 71-77, 90-96,
109-115); fp-2-q4 through fp-2-q6 in
packages/core/src/data/questions/fp-2-overview.json (lines 71-77, 90-96,
109-115); and fp-3-q6, fp-5-q6, and fp-7-q6 in their respective files at lines
109-115. Distribute correct answers across different option positions, balance
option lengths so the correct choice is not identifiable by formatting or
verbosity, and update each question’s explanation to match its new answer
position and content while preserving the intended meaning.
In `@packages/core/src/data/questions/ri-12-core-hoc-composition.json`:
- Around line 139-154: Update the PropTypes examples to reflect React 19: in
packages/core/src/data/questions/ri-12-core-hoc-composition.json lines 139-154,
packages/core/src/data/questions/ri-14-core-rendering-patterns.json lines
93-105, and packages/core/src/data/questions/ri-15-core-jsx-details.json lines
78-91, remove claims that function-component propTypes produce development
warnings or are stripped in production. Replace each affected example with an
accurate legacy/class-component caveat, or guidance favoring TypeScript or
explicit runtime validation, while keeping the question answers, explanations,
and verification behavior consistent with the revised premise.
In `@packages/core/src/data/questions/ri-13-core-ecosystem-position.json`:
- Around line 88-100: Update the answer and explanation for the SSR comparison
question to state that renderToString supports client hydration while
renderToStaticMarkup is intended for static output, without claiming
renderToString always adds visible marker attributes. Keep the verification’s
expected identical markup for the simple Greeting component consistent with this
distinction.
In `@packages/core/src/data/questions/ri-15-core-jsx-details.json`:
- Around line 120-132: Update the question’s prompt and explanation around the
options and answer to clarify that react and react-dom are independently
published packages but should use aligned, mutually compatible React releases.
Remove wording suggesting version mismatches are generally acceptable, while
preserving the distinction between separate packages and the existing
explanation of platform-specific rendering bridges.
In `@packages/core/src/data/questions/ri-19-misc-hooks-foundations.json`:
- Around line 69-70: Update the useCounter example so it is invoked inside a
React component rather than at module scope, then render that component.
Preserve the console.log check and ensure the rendered output reaches the
expected “true 2” JSX validation.
In `@packages/core/src/data/questions/ri-21-misc-reducer-context-deep.json`:
- Around line 46-47: Update useCounter so it does not dispatch during render;
expose an event handler that dispatches { type: "increment" } twice when
invoked, allowing the prompt’s consecutive dispatches to produce the expected
count without causing a re-render loop.
In `@packages/core/src/data/questions/ri-25-misc-advanced-hooks.json`:
- Around line 115-143: 更新題目中的 useEffectEvent 描述，移除其為實驗性、可能未支援或尚未穩定的說法，並將 option
d 改為符合 React 19.2.7 官方 API 狀態的敘述。同步修正 explanation 與 verify.manual，保留 a 的核心重點，並補充
Effect Event 必須在 useEffect 呼叫路徑內建立、只能由 effect 或另一個 effect event 呼叫，通常不列入 effect
依賴陣列。
In `@packages/core/src/data/questions/ri-27-misc-error-boundaries.json`:
- Around line 111-139: Update the question content around the “好的做法” example and
the corresponding option a/explanation so they no longer claim one Error
Boundary isolates both Sidebar and MainContent. Either revise the wording to
state that only MainContent is protected while Sidebar remains outside, or add a
separate Boundary around Sidebar and keep the mutual-isolation explanation
consistent with the example.
In `@packages/core/src/data/questions/ri-28-misc-component-conventions.json`:
- Around line 229-257: Update OrderButton.handleSubmit to wrap the awaited
submitOrder call in a finally block and move setIsSubmitting(false) there,
ensuring the submitting flag is restored whether submission succeeds or throws
while preserving the existing duplicate-trigger guard.
In `@packages/core/src/data/questions/ri-29-misc-forms-composition.json`:
- Around line 111-139: 更新題目選項 a 與 explanation，依 React 19 自訂元素行為說明：若元素存在對應
property，React 會以 JavaScript property 傳遞物件、陣列或函式等複雜值；只有沒有匹配 property 的 props 才會以
HTML attribute 處理。移除「主要走字串 attribute」及「複雜資料通常得透過 ref」的不準確描述，並保留自訂事件仍可能需要額外處理的限制。
In `@packages/core/src/data/questions/ri-3-testing.json`:
- Around line 9-24: Update the “寫法一” example in the question prompt to use a
class-based Counter component with this.state so wrapper.state('count') is a
valid Enzyme assertion. Keep the contrast with the user-facing render/userEvent
example and preserve the intended answer and explanation about
implementation-coupled tests.
In `@packages/core/src/data/questions/ri-4-redux.json`:
- Around line 101-102: Rename the legacy thunk declaration in
packages/core/src/data/questions/ri-4-redux.json at lines 101-102 from fetchUser
to fetchUserLegacy, updating its references within that snippet. Rename the
non-memoized selector in packages/core/src/data/questions/ri-6-ecosystem.json at
lines 144-145 to getVisibleTodosWithoutMemo, updating its references so each
code snippet has no duplicate lexical declarations.
---
Minor comments:
In `@packages/core/src/data/questions/ri-1-router.json`:
- Around line 233-245: The explanation for the navigate state behavior should
not claim that refreshing always clears location.state. Update the explanation
near navigate and useLocation to state that the data is stored in the browser
history entry, is not included in the URL, and may be unavailable for direct
links or newly created history entries; keep the guidance focused on its non-URL
and non-durable nature.
- Around line 211-220: Update the question’s prompt and explanation to attribute
the “Router may have only one child element” warning to multiple direct children
under <Router>, not to omitting <Switch>. Keep the distinction that a missing
<Switch> causes multiple matching routes to render, and ensure option a
accurately describes v6 <Routes> behavior without the incorrect warning
attribution.
In `@packages/core/src/data/questions/ri-18-misc-early.json`:
- Line 158: Update the explanation for the React state-setter optimization in
the question data so it applies only to function components using useState.
Remove the claim that the same Object.is bailout rule applies to class component
setState, while preserving the existing explanation of setter bailouts and
Object.is edge cases for useState.
- Around line 53-59: Update the answer a explanation to preserve Redux’s
bundler-agnostic behavior while qualifying direct browser loading: distinguish
JavaScript runtime support from package loading, and state that plain script
usage requires a compatible browser ESM distribution such as a CDN ESM entry
point. Remove the implication that any browser <script> tag works universally,
while keeping the claim that Redux does not require a specific bundler.
In `@packages/core/src/data/questions/ri-19-misc-hooks-foundations.json`:
- Around line 114-120: Update the JSX explanation in the question’s option “a”
and its “explanation” to avoid claiming JSX always becomes React.createElement.
State that JSX requires build-time transformation and may compile to
React.createElement with the classic runtime or jsx/jsxs helpers from
react/jsx-runtime with the modern runtime.
In `@packages/core/src/data/questions/ri-2-i18n.json`:
- Around line 101-102: Update the prompt’s code example to avoid redeclaring
locale in the same lexical scope: rename either the server-side locale variable
or the client-side state variable, or clearly separate the SSR and client
examples into distinct snippets while preserving the demonstrated locale
mismatch.
In `@packages/core/src/data/questions/ri-22-misc-useeffect-deep.json`:
- Line 185: Update the answer text for choice B in the useEffect question to
qualify that an empty dependency array runs once per mount, while noting React
Strict Mode may perform an additional setup-cleanup-setup cycle in development.
Keep the existing explanation for normal production behavior and the other
choices unchanged.
In
`@packages/core/src/data/questions/ri-23-misc-layouteffect-ref-imperative.json`:
- Line 17: Update the explanatory text in the question’s answer to describe
useEffect as usually running after the browser paints, rather than
unconditionally after paint; preserve the contrast with useLayoutEffect while
acknowledging that interaction- or synchronous-update-triggered effects may run
before paint.
- Around line 177-178: Update the Form example in the
ri-23-misc-layouteffect-ref-imperative fixture to define a button click handler
that increments submitCountRef.current, rather than mutating the ref during
render. Exercise the handler through a click interaction and verify the
resulting output and render count, preserving the intended no-rerender behavior.
In `@packages/core/src/data/questions/ri-26-misc-code-splitting-perf.json`:
- Around line 142-173: Update the option “a” text in the ri-26-q5 question to
remove the claim that performance remains essentially identical regardless of
total data size. Keep the explanation of bounded visible DOM nodes and dynamic
mounting, but acknowledge that data processing, measurement, overscan, memory,
or item complexity can still affect overall performance.
In `@packages/core/src/data/questions/ri-27-misc-error-boundaries.json`:
- Around line 43-70: 更新題目中的 prompt 與相關說明，移除「讓整個頁面卡死」及暗示自動顯示 fallback 或卸載整棵 UI
的描述，改為事件處理器產生未捕捉例外並中止此次 handler。保留一般 onClick 不會被 Error Boundary 攔截的結論，並可在說明中補充
React 19 的 startTransition async action 屬於不同例外語意。
In `@packages/core/src/data/questions/ri-4-redux.json`:
- Line 331: 在題目 JSON 的 explanation 文字中統一使用繁體中文，將「编譯器」修正為「編譯器」，並將同一題及另一處
explanation 中的「样板」修正為「樣板」。
In `@packages/core/src/data/questions/ri-6-ecosystem.json`:
- Around line 12-15: 更新題目選項 a 中對 TypeScript 的描述，將「阻止這段程式碼被打包出去」改為「在型別檢查或 build
階段被發現」，保留其相較於 PropTypes 於執行期檢查的對比，並避免暗示錯誤必然阻止 emit 或打包。
In `@packages/core/src/data/questions/ri-9-core-basics.json`:
- Around line 28-40: 更新題目選項 a 與 explanation，將 JSX 描述為編譯成 React runtime
helper；明確說明 classic transform 會對應 React.createElement，而 automatic JSX transform
通常使用 jsx/jsxs helper。保留最終渲染結果與 className 轉為 class 的說明，避免宣稱 React.createElement
是唯一轉譯結果。
In `@packages/core/src/quiz.ts`:
- Around line 25-26: Update the exported sampleFixedQuestions function to
validate size before shuffling or slicing, rejecting negative, non-integer, and
NaN values. Preserve the existing behavior for valid sizes, including returning
all available questions when the pool is smaller than size.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 7045b01b-fa08-47f4-a891-f287a0f94cb8
📒 Files selected for processing (44)
apps/mobile/app/(tabs)/index.tsxapps/mobile/app/(tabs)/notes.tsxapps/mobile/screens/ChapterMap.tsxapps/web/src/App.tsxapps/web/src/app/layout.tsxapps/web/src/screens/ChapterMap.tsxpackages/core/src/data/chapters.tspackages/core/src/data/questions/fp-1-welcome.jsonpackages/core/src/data/questions/fp-19-road-ahead.jsonpackages/core/src/data/questions/fp-2-overview.jsonpackages/core/src/data/questions/fp-3-actions-calculations-data.jsonpackages/core/src/data/questions/fp-5-improve-actions.jsonpackages/core/src/data/questions/fp-7-defensive-copying.jsonpackages/core/src/data/questions/ri-1-router.jsonpackages/core/src/data/questions/ri-10-core-props-events.jsonpackages/core/src/data/questions/ri-11-core-vdom.jsonpackages/core/src/data/questions/ri-12-core-hoc-composition.jsonpackages/core/src/data/questions/ri-13-core-ecosystem-position.jsonpackages/core/src/data/questions/ri-14-core-rendering-patterns.jsonpackages/core/src/data/questions/ri-15-core-jsx-details.jsonpackages/core/src/data/questions/ri-16-core-styling-tools.jsonpackages/core/src/data/questions/ri-17-core-project-conventions.jsonpackages/core/src/data/questions/ri-18-misc-early.jsonpackages/core/src/data/questions/ri-19-misc-hooks-foundations.jsonpackages/core/src/data/questions/ri-2-i18n.jsonpackages/core/src/data/questions/ri-20-misc-rendering-internals.jsonpackages/core/src/data/questions/ri-21-misc-reducer-context-deep.jsonpackages/core/src/data/questions/ri-22-misc-useeffect-deep.jsonpackages/core/src/data/questions/ri-23-misc-layouteffect-ref-imperative.jsonpackages/core/src/data/questions/ri-24-misc-memo-callback-custom-hooks.jsonpackages/core/src/data/questions/ri-25-misc-advanced-hooks.jsonpackages/core/src/data/questions/ri-26-misc-code-splitting-perf.jsonpackages/core/src/data/questions/ri-27-misc-error-boundaries.jsonpackages/core/src/data/questions/ri-28-misc-component-conventions.jsonpackages/core/src/data/questions/ri-29-misc-forms-composition.jsonpackages/core/src/data/questions/ri-3-testing.jsonpackages/core/src/data/questions/ri-30-misc-state-alternatives-internals.jsonpackages/core/src/data/questions/ri-4-redux.jsonpackages/core/src/data/questions/ri-5-native.jsonpackages/core/src/data/questions/ri-6-ecosystem.jsonpackages/core/src/data/questions/ri-7-misc.jsonpackages/core/src/data/questions/ri-8-modern.jsonpackages/core/src/data/questions/ri-9-core-basics.jsonpackages/core/src/quiz.ts
| levels: [ | ||
| ri9, ri10, ri11, ri12, ri13, ri14, ri15, ri16, ri17, | ||
| ri1, ri2, ri3, ri4, ri5, ri6, ri7, ri8, | ||
| ri18, ri19, ri20, ri21, ri22, ri23, ri24, ri25, ri26, ri27, ri28, ri29, ri30, | ||
| ].map(asLevel), |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | 🏗️ Heavy lift
Add the 31st requested level.
This chapter maps only 30 datasets (ri-1 through ri-30), while the PR objective specifies 31 levels. Add the missing dataset and level entry, or revise the objective before release.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/core/src/data/chapters.ts` around lines 119 - 123, Update the
chapter’s levels array to include the missing 31st dataset (ri31) and ensure it
is passed through asLevel alongside ri1–ri30, preserving the existing level
ordering conventions.
| "topic": "Error Boundary 該放在哪：依「希望多大範圍一起失效」決定放置的層級", | ||
| "docs": "", | ||
| "story": "", | ||
| "prompt": "一個頁面同時有「側邊導覽列」跟「主要內容區塊」。主要內容區塊裡某個元件渲染出錯時，理想的使用者體驗是側邊導覽列依然正常顯示、可以正常導頁離開，只有主要內容區塊顯示錯誤訊息。Error Boundary 該放在哪一層？", | ||
| "code": "// 好的做法：分別包住彼此獨立的區塊\n<Layout>\n <Sidebar />\n <ErrorBoundary fallback={<p>內容載入失敗</p>}>\n <MainContent />\n </ErrorBoundary>\n</Layout>\n\n// 不好的做法：整個頁面共用一個 Error Boundary\n<ErrorBoundary fallback={<p>發生錯誤了</p>}>\n <Layout>\n <Sidebar />\n <MainContent />\n </Layout>\n</ErrorBoundary>", | ||
| "options": [ | ||
| { | ||
| "id": "a", | ||
| "text": "把 Error Boundary 放在『各自獨立、希望彼此不互相拖累』的區塊外層，而不是整個頁面共用一個：這裡把 Error Boundary 放在 MainContent 外面，Sidebar 出錯不會影響 MainContent，反過來 MainContent 出錯也不會連累 Sidebar 一起消失。如果 Error Boundary 只放在最外層包住整個頁面，任何一個小區塊出錯，都會讓整頁（包含原本運作正常的 Sidebar）一起顯示備援畫面，影響範圍被不必要地放大" | ||
| }, | ||
| { | ||
| "id": "b", | ||
| "text": "Error Boundary 只能放在整個應用程式的最外層，不能包住頁面內部的局部區塊" | ||
| }, | ||
| { | ||
| "id": "c", | ||
| "text": "Error Boundary 的放置位置對錯誤影響範圍完全沒有任何差異，放哪裡效果都一樣" | ||
| }, | ||
| { | ||
| "id": "d", | ||
| "text": "Error Boundary 應該包住每一個最小的 DOM 元素，粒度越細越好，沒有任何取捨" | ||
| } | ||
| ], | ||
| "answer": "a", | ||
| "explanation": "Error Boundary 的放置粒度直接決定「一個錯誤會拖累多大範圍」，這是實務上需要依產品體驗權衡的設計決策：太粗（只放最外層）會讓小範圍錯誤波及整頁；太細（每個最小元素都包一層）會增加大量樣板程式碼、也不見得每個地方都需要獨立的錯誤隔離。常見的合理做法是依「使用者體驗上，這幾塊彼此獨立、希望能各自失效互不影響」的功能區塊邊界來放置。", | ||
| "verify": { | ||
| "checks": [], | ||
| "manual": "Error Boundary 影響範圍的實際使用者體驗需要真實渲染錯誤情境才能觀察，無法用 node 直接驗證。" | ||
| } |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Target file excerpt:"
sed -n '1,170p' packages/core/src/data/questions/ri-27-misc-error-boundaries.json | nl -ba | sed -n '100,150p'
echo
echo "Search for ri-27-related files:"
fd -i 'ri-27|error-boundary|errors|boundaries' packages/core/src/data | sed -n '1,50p'
echo
echo "Check parser/schema handling of verify.manual if relevant:"
rg -n '"verify"|verify\.manual|Error Boundary|error boundary' packages/core/src -g '*.ts' -g '*.tsx' -g '*.json' | sed -n '1,120p'Repository: Retsomm/EasyLearn
Length of output: 216
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Target file excerpt:"
sed -n '100,150p' packages/core/src/data/questions/ri-27-misc-error-boundaries.json | awk '{printf "%5d\t%s\n", NR+99, $0}'
echo
echo "File list candidates:"
find packages/core/src/data/questions -maxdepth 2 -type f \( -iname '*ri-27*' -o -iname '*error*' -o -iname '*boundary*' \) -print | sort
echo
echo "Search related schema/parser occurrences:"
find packages/core/src -maxdepth 4 -type f \( -name '*.ts' -o -name '*.tsx' -o -name '*.json' \) -print0 | xargs -0 grep -n -E '"verify"|verify\.manual|Error Boundary|error boundary|questionsSchema|questionSchema' 2>/dev/null | sed -n '1,160p' || trueRepository: Retsomm/EasyLearn
Length of output: 18501
🌐 Web query:
React docs Error Boundary catches React errors during rendering descendants Error Boundary does not catch errors within itself documentation
💡 Result:
In React, error boundaries are specialized class components designed to catch JavaScript errors that occur within their child component tree [1][2]. When an error occurs during rendering, in lifecycle methods, or within the constructors of components located below the error boundary, the boundary catches these errors, allowing the application to display a fallback UI instead of crashing the entire tree [1][2]. However, error boundaries cannot catch errors that occur within themselves [1][2]. If an error boundary fails while attempting to render its own error message or fallback UI, that error will propagate upward to the next closest error boundary in the component tree, similar to how a standard JavaScript catch block behaves [1][2]. Additionally, error boundaries do not catch errors in event handlers, asynchronous code (such as setTimeout or promise callbacks), or server-side rendering [3][4][5].
Citations:
- 1: https://legacy.reactjs.org/docs/error-boundaries.html
- 2: https://mn.legacy.reactjs.org/blog/2017/07/26/error-handling-in-react-16.html
- 3: https://github.com/bvaughn/react-error-boundary/
- 4: https://www.npmjs.com/package/react-error-boundary
- 5: https://github.com/bvaughn/react-error-boundary/blob/main/README.md
不要宣稱這個 Boundary 能同時隔離兩個區塊。
範例中的 Error Boundary 只包住 MainContent，只能保護 MainContent 的錯誤；若 Sidebar 出錯，仍在 Boundary 外。修改選項與 explanation，或讓範例也為 Sidebar 單獨包一層 Boundary。
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/core/src/data/questions/ri-27-misc-error-boundaries.json` around
lines 111 - 139, Update the question content around the “好的做法” example and the
corresponding option a/explanation so they no longer claim one Error Boundary
isolates both Sidebar and MainContent. Either revise the wording to state that
only MainContent is protected while Sidebar remains outside, or add a separate
Boundary around Sidebar and keep the mutual-isolation explanation consistent
with the example.
Source: MCP tools
- 移除 layout.tsx 根層級 suppressHydrationWarning（無對應實際 hydration 問題） - 修正 fp 題庫多題答案永遠是 a 且選項篇幅偏長的可猜測性問題 - 修正 React 面試題若干內容錯誤：PropTypes/SSR/react-dom 版本說明、 hooks 範例（render 期間 dispatch/改 ref、module scope 呼叫 hook）、 Error Boundary 誤導說明、表單 finally 重置、Router/Redux/測試範例 的重複宣告與描述錯誤 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/core/src/data/questions/ri-22-misc-useeffect-deep.json (1)
80-105: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick win補充 async effect 的 cleanup 處理
ri-22-q3目前只修正了useEffect不能回傳 Promise 的問題，但答案/explanation 未提到 dependency 變更或元件卸載時的過期資料竞争风险。應補充在 effect 內部 async 任務完成前檢查 ignore flag，或用AbortController配合 cleanup，避免旧取回資料覆寫狀態。🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/core/src/data/questions/ri-22-misc-useeffect-deep.json` around lines 80 - 105, 補充此題的 answer/explanation，說明 async effect 在 dependency 變更或元件卸載後可能產生過期資料競爭；在正確寫法中加入 ignore flag 或 AbortController，於 cleanup 時取消或標記任務，並在非同步請求完成前檢查狀態，避免舊結果覆寫 user state。
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@packages/core/src/data/questions/ri-22-misc-useeffect-deep.json`:
- Around line 80-105: 補充此題的 answer/explanation，說明 async effect 在 dependency
變更或元件卸載後可能產生過期資料競爭；在正確寫法中加入 ignore flag 或 AbortController，於 cleanup
時取消或標記任務，並在非同步請求完成前檢查狀態，避免舊結果覆寫 user state。
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 2b7d343f-c52e-4013-964b-5a4e3991b276
📒 Files selected for processing (23)
packages/core/src/data/questions/fp-1-welcome.jsonpackages/core/src/data/questions/fp-19-road-ahead.jsonpackages/core/src/data/questions/fp-2-overview.jsonpackages/core/src/data/questions/fp-3-actions-calculations-data.jsonpackages/core/src/data/questions/fp-5-improve-actions.jsonpackages/core/src/data/questions/fp-7-defensive-copying.jsonpackages/core/src/data/questions/ri-1-router.jsonpackages/core/src/data/questions/ri-12-core-hoc-composition.jsonpackages/core/src/data/questions/ri-13-core-ecosystem-position.jsonpackages/core/src/data/questions/ri-14-core-rendering-patterns.jsonpackages/core/src/data/questions/ri-15-core-jsx-details.jsonpackages/core/src/data/questions/ri-19-misc-hooks-foundations.jsonpackages/core/src/data/questions/ri-2-i18n.jsonpackages/core/src/data/questions/ri-21-misc-reducer-context-deep.jsonpackages/core/src/data/questions/ri-22-misc-useeffect-deep.jsonpackages/core/src/data/questions/ri-23-misc-layouteffect-ref-imperative.jsonpackages/core/src/data/questions/ri-25-misc-advanced-hooks.jsonpackages/core/src/data/questions/ri-27-misc-error-boundaries.jsonpackages/core/src/data/questions/ri-28-misc-component-conventions.jsonpackages/core/src/data/questions/ri-29-misc-forms-composition.jsonpackages/core/src/data/questions/ri-3-testing.jsonpackages/core/src/data/questions/ri-4-redux.jsonpackages/core/src/data/questions/ri-6-ecosystem.json
🚧 Files skipped from review as they are similar to previous changes (21)
- packages/core/src/data/questions/ri-19-misc-hooks-foundations.json
- packages/core/src/data/questions/ri-1-router.json
- packages/core/src/data/questions/ri-14-core-rendering-patterns.json
- packages/core/src/data/questions/ri-28-misc-component-conventions.json
- packages/core/src/data/questions/fp-5-improve-actions.json
- packages/core/src/data/questions/ri-25-misc-advanced-hooks.json
- packages/core/src/data/questions/ri-21-misc-reducer-context-deep.json
- packages/core/src/data/questions/ri-3-testing.json
- packages/core/src/data/questions/fp-7-defensive-copying.json
- packages/core/src/data/questions/fp-19-road-ahead.json
- packages/core/src/data/questions/fp-2-overview.json
- packages/core/src/data/questions/fp-3-actions-calculations-data.json
- packages/core/src/data/questions/ri-29-misc-forms-composition.json
- packages/core/src/data/questions/ri-4-redux.json
- packages/core/src/data/questions/ri-12-core-hoc-composition.json
- packages/core/src/data/questions/ri-6-ecosystem.json
- packages/core/src/data/questions/ri-2-i18n.json
- packages/core/src/data/questions/ri-27-misc-error-boundaries.json
- packages/core/src/data/questions/ri-13-core-ecosystem-position.json
- packages/core/src/data/questions/ri-23-misc-layouteffect-ref-imperative.json
- packages/core/src/data/questions/ri-15-core-jsx-details.json
ri-22-q3 原本只講 async effect 回傳 Promise 被誤認清理函式的問題， 沒提到依賴變化或卸載後舊請求晚 resolve、覆寫最新 state 的競態風險， 補充正確寫法需搭配 ignore 旗標或 AbortController 才能避免。 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This branch was successfully deployed
1 participant
Summary by CodeRabbit
New Features
Updates