Frontend Engineer

Trả lời đúng ít nhất 3/4 câu để đánh dấu đã qua chặng này.

1. Câu 1/4·Cơ bảnVì sao nên thay <div onClick={save}> bằng <button onClick={save}>?

   Vì button luôn tự chặn việc submit form nên an toàn hơnVì browser tối ưu việc render button nên trang nhanh hơn rõ rệtVì button có sẵn focus bằng bàn phím, kích hoạt bằng Enter/Space và role button cho screen readerVì sự kiện onClick trên div không chạy trên thiết bị cảm ứng
2. Câu 2/4·Cơ bảnVới @layer reset, base, components, utilities;, rule #app .card { padding: 2rem } nằm trong layer components và rule .p-4 { padding: 1rem } nằm trong layer utilities. Padding cuối cùng là gì?

   1rem, vì thứ tự layer được so sánh trước specificity và utilities đứng sauTùy rule nào xuất hiện sau trong file CSS2rem, vì layer được khai báo trước có độ ưu tiên cao hơn2rem, vì selector có ID có specificity cao hơn
3. Câu 3/4·Cơ bảnMột card component được dùng ở sidebar hẹp lẫn cột chính rộng, và cần chuyển sang layout ngang khi có đủ chỗ. Cách nào đúng?

   Đặt width: clamp(200px, 50%, 600px) và giữ một layout duy nhấtĐặt container-type: inline-size cho wrapper và dùng @container (min-width: 400px) trong CSS của cardDùng :has(img) trên card để đổi layout khi card có ảnhDùng @media (min-width: 400px) trong CSS của card
4. Câu 4/4·Cơ bảnBạn cần một modal xác nhận có xử lý focus, đóng bằng Esc và hiển thị trên mọi thứ khác. Cách native nào phù hợp?

   Element <details> với nội dung xác nhận bên trongRender <dialog open> bằng attribute openMột div có role="dialog" và z-index: 9999Element <dialog> mở bằng dialog.showModal()

Trả lời đúng ít nhất 3/4 câu để đánh dấu đã qua chặng này.

1. Câu 1/4·Cơ bảnĐoạn code console.log('A'); setTimeout(() => console.log('B')); Promise.resolve().then(() => console.log('C')); console.log('D'); in ra theo thứ tự nào?

   A C D BA D C BA B C DA D B C
2. Câu 2/4·Cơ bảnĐã có type User trong TypeScript, vì sao vẫn cần parse response API bằng một Zod schema?

   Vì as User chỉ kiểm tra nông lúc runtime và bỏ sót field lồng nhauVì type bị xóa khi compile nên không có gì kiểm tra dữ liệu thật lúc runtimeVì type suy ra từ Zod chặt hơn interface tự viết lúc compileVì strict mode không cho phép dùng dữ liệu từ fetch nếu chưa qua schema
3. Câu 3/4·Cơ bảnVì sao nên mô hình state request bằng union { status: 'loading' } | { status: 'success'; data: T } | { status: 'error'; error: E } thay vì các boolean isLoading, isError cùng data?

   Vì strict mode bắt buộc dùng union cho state bất đồng bộVì các state vô lý như vừa loading vừa error không biểu diễn được, và narrowing theo status chỉ cho truy cập data khi successVì union tốn ít bộ nhớ hơn lúc runtimeVì React tự bỏ qua re-render khi state là discriminated union
4. Câu 4/4·Cơ bảnÔ tìm kiếm gọi fetch sau mỗi lần gõ, và đôi khi response cũ về sau response mới, ghi đè kết quả. Cách sửa nào đúng?

   Gom các request bằng Promise.all để chúng resolve theo đúng thứ tựTạo một AbortController cho mỗi request và abort request trước khi gửi request mớiDùng Promise.allSettled để chờ mọi request xong rồi mới renderThêm await trước fetch để các request chạy tuần tự

Trả lời đúng ít nhất 3/4 câu để đánh dấu đã qua chặng này.

1. Câu 1/4·Cơ bảnFirst rule of ARIA khuyên điều gì?

   Không dùng ARIA nếu đã có một native element làm được việc đóLuôn kèm aria-live với role để screen reader đọc mọi thay đổiThêm aria-label cho mọi phần tử tương tác, kể cả khi đã có text hiển thịƯu tiên ARIA role hơn native element vì nhất quán hơn giữa các screen reader
2. Câu 2/4·Cơ bảnTrang đã pass axe không còn lỗi nào. Vì sao vẫn chưa thể nói trang accessible?

   Vì axe chỉ kiểm tra HTML tĩnh, không thấy nội dung do React renderVì công cụ tự động chỉ bắt được một phần lỗi; thứ tự focus, nhãn có ý nghĩa và trải nghiệm screen reader cần người thật kiểm traVì axe chỉ chạy trên Chrome nên các browser khác chưa được kiểm traVì axe mặc định bỏ qua kiểm tra color contrast
3. Câu 3/4·Cơ bảnNgười dùng mở modal bằng nút Edit rồi nhấn Esc để đóng. Focus nên đi đâu?

   Giữ nguyên trên nút đóng vừa bị gỡ khỏi DOMSang link đầu tiên trong header của trangVề document.body để người dùng bắt đầu lại từ đầu trangVề lại nút Edit đã mở modal
4. Câu 4/4·Cơ bảnKết quả tìm kiếm cập nhật khi người dùng gõ, nhưng người dùng screen reader không biết số kết quả đã đổi. Cách sửa nào đúng?

   Thêm aria-hidden="true" cho danh sách kết quả cũChuyển focus sang danh sách kết quả sau mỗi lần gõĐặt tabindex="0" cho đoạn text hiển thị số kết quảĐặt số kết quả trong một vùng role="status" (aria-live polite) và cập nhật text của nó

Trả lời đúng ít nhất 3/4 câu để đánh dấu đã qua chặng này.

1. Câu 1/4·Trung cấpTrong development với StrictMode, component render hai lần và Effect chạy mount, cleanup, mount. Vì sao React làm vậy?

   Để lộ ra render không pure và Effect thiếu cleanup trước khi lên productionĐể làm nóng cache của React Compiler trước lần render thậtVì hot reload của dev server gắn component hai lầnVì React 19 render một lần trên server và một lần trên client trong dev
2. Câu 2/4·Trung cấpComponent có const [fullName, setFullName] = useState('') và useEffect(() => setFullName(first + ' ' + last), [first, last]). Cách tốt hơn là gì?

   Lưu fullName trong một ref để không gây re-renderTính const fullName = first + ' ' + last ngay trong lúc renderGiữ useEffect nhưng bọc setFullName bằng useCallbackĐổi sang useLayoutEffect để tránh nháy giao diện
3. Câu 3/4·Trung cấpCode items.push(newItem); setItems(items); không làm UI cập nhật. Vì sao và sửa thế nào?

   React đang batch update, UI sẽ cập nhật ở event tiếp theoDanh sách thiếu key nên React không biết item mớipush là bất đồng bộ, cần await trước khi gọi setItemsTham chiếu mảng không đổi nên React coi như không có thay đổi; tạo mảng mới như [...items, newItem]
4. Câu 4/4·Trung cấpNút Like cần hiển thị số like mới ngay lập tức và tự quay lại nếu server lỗi. Công cụ nào của React 19 phù hợp?

   useFormStatus trong nút LikeuseOptimistic bên trong một actionuseEffectEvent để gọi APIuseDeferredValue cho số like

Trả lời đúng ít nhất 3/4 câu để đánh dấu đã qua chặng này.

1. Câu 1/4·Trung cấpVì sao const { data } = useQuery(todosQuery); const [todos, setTodos] = useState(data); là một lỗi thiết kế?

   Vì nó gây vòng lặp render vô hạnVì data của useQuery bị freeze nên setTodos sẽ throwVì nó tắt cache của query đóVì useState chỉ lấy giá trị ban đầu, sau khi refetch bản sao cục bộ bị cũ và có hai nguồn sự thật
2. Câu 2/4·Trung cấpVới staleTime mặc định là 0, khi một component dùng cùng query mount lại trong lúc dữ liệu vẫn còn trong cache, TanStack Query làm gì?

   Trả ngay dữ liệu trong cache rồi refetch ở background vì dữ liệu đã được coi là staleKhông refetch cho đến khi hết gcTimeHiện loading và chờ request mới mỗi lầnXóa cache ngay khi component trước unmount
3. Câu 3/4·Trung cấpTrang danh sách sản phẩm có filter và phân trang. Người dùng than gửi link cho người khác thì mất filter, và nút Back không quay lại filter trước. Cách sửa nào đúng?

   Lưu filter vào localStorage và đọc lại khi load trangĐưa filter vào một Zustand store có persist middlewareĐặt filter trong một context ở root của appĐưa filter và trang hiện tại vào search params của URL, ví dụ với nuqs
4. Câu 4/4·Trung cấpBadge giỏ hàng trong header dùng const cart = useCartStore() và re-render mỗi khi bất kỳ phần nào của store đổi. Cách sửa nào đúng?

   Bọc component header bằng memoĐọc bằng useCartStore.getState().items.length trong lúc renderChuyển giỏ hàng sang một React contextDùng selector hẹp: useCartStore((s) => s.items.length)

Trả lời đúng ít nhất 3/4 câu để đánh dấu đã qua chặng này.

1. Câu 1/4·Trung cấpNút gọi Server Function deleteUser chỉ hiện cho admin. Vì sao bên trong Server Function vẫn phải kiểm tra quyền?

   Vì việc ẩn nút chỉ có hiệu lực sau khi hydration xongVì mỗi Server Function là một endpoint public mà ai cũng có thể gọi trực tiếpVì React Compiler có thể inline Server Function vào bundle clientVì Server Function chạy không có cookie nên không biết ai đang gọi
2. Câu 2/4·Trung cấpVì sao nên đẩy 'use client' xuống component lá nhỏ nhất thay vì đặt ở layout?

   Vì Client Component không thể render children được truyền từ Server ComponentVì mọi module được import từ một file 'use client' đều vào bundle client, nên đặt cao sẽ gửi nhiều JavaScript hơn và mất khả năng fetch dữ liệu trên serverVì component 'use client' hoàn toàn không được render trên serverVì chỉ component lá mới được phép dùng hook
3. Câu 3/4·Trung cấpMột Server Component render <ProfileCard user={await db.user.findUnique({ where: { id } })} />, trong đó ProfileCard là Client Component. Rủi ro là gì?

   Query chạy lại trên client mỗi lần ProfileCard renderKhông có rủi ro vì props của Client Component chỉ tồn tại trên serverMọi field của user, kể cả passwordHash hay email, được serialize vào payload gửi xuống browserNext.js sẽ throw vì object từ database không serialize được
4. Câu 4/4·Trung cấpTrong Next.js 16 với Cache Components, dữ liệu sản phẩm được cache bằng 'use cache' và cacheTag('products'). Sau khi admin sửa sản phẩm trong một Server Function, cách nào đúng để trang hiển thị dữ liệu mới?

   Gọi updateTag('products') trong Server Function ngay sau khi ghiKhởi động lại server sau mỗi lần admin sửaGọi router.refresh() trên client sau khi submitBỏ 'use cache' để trang sản phẩm luôn dynamic

Trả lời đúng ít nhất 3/4 câu để đánh dấu đã qua chặng này.

1. Câu 1/4·Trung cấpVì sao nên dùng getByRole('button', { name: 'Save' }) thay vì getByTestId('save-btn')?

   Vì test id bị xóa trong build production nên test sẽ failVì nó kiểm tra những gì người dùng và công nghệ hỗ trợ thấy, nên cũng bắt được lỗi thiếu accessible nameVì getByRole tự chờ phần tử xuất hiện còn getByTestId thì khôngVì getByRole chạy nhanh hơn getByTestId
2. Câu 2/4·Trung cấpVì sao mock API ở tầng network bằng MSW tốt hơn vi.mock('./api')?

   Vì vi.mock không hoạt động với ES moduleVì code fetch, parse và xử lý lỗi thật vẫn chạy, và handler dùng lại được cho test, Storybook và devVì MSW tự ghi lại response thật từ API productionVì MSW cho phép test chạy không cần DOM
3. Câu 3/4·Trung cấpTest Playwright await page.getByRole('button', { name: 'Save' }).click(); await page.waitForTimeout(2000); expect(await page.locator('.toast').textContent()).toBe('Saved'); thỉnh thoảng fail trên CI. Cách sửa nào đúng?

   Tăng waitForTimeout lên 5000 cho chắcĐặt retries: 3 trong config để che lỗiChạy toàn bộ test tuần tự với một workerThay bằng await expect(page.getByRole('status')).toHaveText('Saved') để assertion tự retry đến khi đúng
4. Câu 4/4·Trung cấpBạn cần test Server Function deletePost. Cách tiếp cận nào hợp lý nhất?

   Chỉ kiểm tra happy path trong một test end-to-endSnapshot giá trị trả về của nóGọi nó như một API với các ca: input sai, thiếu quyền và thành côngChỉ test component nút Delete gọi nó với mock

Trả lời đúng ít nhất 3/4 câu để đánh dấu đã qua chặng này.

1. Câu 1/4·Nâng caoLighthouse cho trang 100 điểm nhưng dữ liệu CrUX báo INP kém. Lý do hợp lý nhất là gì?

   INP chỉ được đo cho single-page appLighthouse chỉ đo INP trên desktopCrUX bị trễ khoảng một năm nên chưa thấy bản sửa mớiLighthouse là dữ liệu lab của một lần load không có tương tác thật, còn INP field đến từ người dùng thật thao tác trên thiết bị của họ
2. Câu 2/4·Nâng caoVì sao đặt loading="lazy" cho ảnh hero (phần tử LCP) làm LCP tệ hơn?

   Vì lazy làm browser không biết kích thước ảnh, gây CLSVì ảnh lazy bị loại khỏi LCP nên metric chọn một phần tử tệ hơnVì browser hoãn tải ảnh đến khi layout xác định nó nằm trong viewport, nên ảnh bắt đầu tải muộn hơnVì lazy vô hiệu hóa fetchpriority trên mọi ảnh của trang
3. Câu 3/4·Nâng caoHandler click lọc 20.000 item trong một vòng lặp đồng bộ và INP là 600ms. Cách sửa nào đúng?

   Cập nhật phản hồi tức thì trước, rồi chia việc lọc thành từng phần và yield về main thread (scheduler.yield có fallback) hoặc đưa vào startTransitionThêm fetchpriority="high" cho script chứa handlerBọc handler bằng useCallbackChuyển việc lọc vào useEffect không có dependency
4. Câu 4/4·Nâng caoBanner quảng cáo tải muộn và đẩy nội dung xuống, CLS là 0.25. Cách sửa nào đúng?

   Đặt content-visibility: auto cho container quảng cáoGiữ sẵn chỗ cho vị trí quảng cáo bằng min-height hoặc aspect-ratio cố địnhLazy-load banner để nó tải còn muộn hơnTải script quảng cáo với attribute async

Trả lời đúng ít nhất 3/4 câu để đánh dấu đã qua chặng này.

1. Câu 1/4·Nâng caoVì sao component nên dùng token color.text.muted thay vì gray-500?

   Vì Figma chỉ đồng bộ được semantic tokenVì semantic token làm bundle CSS nhỏ hơnVì primitive token không thể chuyển thành CSS variableVì semantic token giữ ý nghĩa sử dụng, nên đổi theme hay dark mode chỉ cần map lại ở một chỗ
2. Câu 2/4·Nâng caoComponent Card đã có showHeader, showFooter, compact, headerIcon, footerAlign... Vì sao nên chuyển sang compound component như <Card><Card.Header /><Card.Body /></Card>?

   Vì React Compiler không hỗ trợ boolean propVì TypeScript không type được quá vài boolean propVì mỗi boolean nhân đôi số tổ hợp cần hỗ trợ, còn composition để người dùng tự lắp đúng phần họ cầnVì compound component render nhanh hơn
3. Câu 3/4·Nâng caoTrong monorepo, packages/ui import một hàm từ apps/web/lib/format. Vấn đề và cách sửa đúng là gì?

   Khai báo dependsOn trong Turborepo để build web trước uiChỉ cần thêm path alias trong tsconfig để import gọn hơnPublish ui lên npm để tách khỏi monorepoPackage ui phụ thuộc ngược vào app, tạo vòng phụ thuộc; chuyển hàm sang package dùng chung như packages/utils
4. Câu 4/4·Nâng caoTeam có một sản phẩm với đúng một bảng dữ liệu và muốn xây package DataTable dùng chung với 30 prop. Lời khuyên hợp lý nhất?

   Làm đủ 30 prop ngay để sau này khỏi breaking changeTách DataTable thành micro-frontend riêng để team khác dùngViết Storybook cho cả 30 prop trước khi dùng ở đâuGiữ component cục bộ cho đến khi có ít nhất ba use case thật rồi mới trừu tượng hóa

Trả lời đúng ít nhất 3/4 câu để đánh dấu đã qua chặng này.

1. Câu 1/4·Nâng caoVì sao không nên lưu access token trong localStorage?

   Vì localStorage được gửi kèm mọi request nên tốn băng thôngVì localStorage bị xóa mỗi khi đóng tabVì bất kỳ script XSS nào cũng đọc được localStorage, còn cookie HttpOnly thì JavaScript không đọc đượcVì Server Component không đọc được localStorage
2. Câu 2/4·Nâng caoVì sao nên triển khai CSP ở chế độ report-only trước khi enforce?

   Vì browser bắt buộc chạy report-only trước khi chấp nhận CSP enforceVì nó báo cáo vi phạm mà không chặn, giúp bạn tìm ra script hợp lệ sẽ bị chặn trước khi làm hỏng trangVì report-only giúp trang tải nhanh hơnVì chỉ chế độ report-only mới hỗ trợ nonce
3. Câu 3/4·Nâng caoTính năng chat chuyển markdown từ model thành HTML rồi render bằng dangerouslySetInnerHTML. Cách làm đúng là gì?

   Sanitize HTML bằng DOMPurify trước khi render, coi output của model như dữ liệu không tin cậyBọc chuỗi HTML bằng JSON.stringify trước khi renderRender trong một iframe cùng origin để cô lậpGiữ nguyên vì nội dung đến từ API của chính mình
4. Câu 4/4·Nâng caoBạn muốn stack trace dễ đọc trong Sentry mà không công khai source code. Cách nào đúng?

   Tắt minify trong build productionServe file .map công khai cùng bundleUpload source map lên Sentry khi build và không deploy file .map ra publicDùng inline source map trong từng file JavaScript