tezvyn:

🌐Frontend Dev

Frontend web development and UI engineering

498 bites

React & Next.js30 sec read

Next.js 16.2 brings 67-100% faster server Fast Refresh

Next.js 16.2 Turbopack brings Server Fast Refresh to Node.js, cutting reload times 67-100% and compile times 400-900%. Only changed modules reload, not whole chains. WASM Workers, SRI, and dynamic import tree shaking land; upgrade to cut dev latency.

React & Next.js30 sec read

Next.js 16.2 adds agent-native dev tooling

Next.js 16.2 bundles version-matched docs with create-next-app, hitting 100% on framework evals versus 79% without. Browser errors now forward to terminal and a dev server lock file prevents agent confusion. Upgrade if you use AI coding agents.

React & Next.js30 sec read

Next.js 16.2 ships stable Adapter API for all platforms

Next.js 16.2 ships a stable Adapter API co-built with OpenNext, Netlify, and Cloudflare. The typed build contract lets any platform target full framework fidelity using the same public hooks Vercel uses. Stop reverse-engineering build output.

React & Next.js30 sec read

How do React Router v6.4 loaders change data fetching from useEffect?

This tests moving from fetch-on-render to render-as-you-fetch. Explain that loaders fire before render, removing useEffect waterfalls, while the router ignores stale promises on interruption. Red flag: calling loaders just useEffect outside the component.

React & Next.js30 sec read

Compare CSS Modules and runtime CSS-in-JS libraries across DX, performance, and dynamic styling

This tests build-time vs runtime style architecture trade-offs. A strong answer contrasts CSS Modules' static extraction with CSS-in-JS's prop-driven runtime injection, covers dynamic styling patterns, and weighs SSR and bundle costs.

React & Next.js30 sec read

What limits React inline styles and when are they still appropriate?

This tests React styling trade-offs. Outline: no pseudo-classes, media queries, or keyframes; maintenance and perf costs; good for dynamic state styling, prototyping, FOUC prevention, and small components. Red flag: claiming they are always bad or free.

React & Next.js30 sec read

How would you implement a custom useDebounce hook using useState and useEffect?

It tests effect cleanup and stale closure awareness. Use useState for the debounced value, useEffect to set a setTimeout when the input changes, and return a cleanup calling clearTimeout. Omitting cleanup leaks timers and fires stale values.

React & Next.js30 sec read

How does React's scheduler prioritize updates with Fiber?

Tests cooperative scheduling. Cover Fiber's incremental units, the Scheduler's time-slicing loop, and Lanes where SyncLane and InputContinuousLane outrank DefaultLane. Red flag: claiming React uses a separate thread or that batching alone handles priority.

React & Next.js30 sec read

How does React batch multiple setState calls in one event handler?

Tests your grasp of React batching and stale closures. React queues updates until the handler exits, so multiple literal setState calls with the same stale value update once, while updater functions queue sequentially.

React & Next.js30 sec read

Why is Fiber's render phase interruptible but commit is not?

WHAT IT TESTS: Knowledge that Fiber's render phase computes the workInProgress tree while commit applies side-effects. ANSWER OUTLINE: Render calculates changes on invisible tree; commit runs DOM mutations and lifecycles synchronously.

React & Next.js30 sec read

What are keys in React lists and why are they important?

Whether you understand React's reconciliation identity tracking. Keys are unique identifiers that let React match items across renders, preserving DOM state and avoiding unnecessary recreation.

React & Next.js30 sec read

MSW vs mocking fetch or axios directly in Jest tests

WHAT IT TESTS: Network interception vs function stubbing. ANSWER: MSW intercepts HTTP via Service Workers and Node, staying client-agnostic; direct fetch or axios mocks couple tests to specific libraries. RED FLAG: Calling MSW a Jest-only utility.

React & Next.js30 sec read

Cypress auth strategies: UI login vs programmatic session

Tests your grasp of Cypress test isolation and speed tradeoffs. A strong answer contrasts slow UI login (ideal for the auth flow itself) against programmatic auth via cy.request or cy.session (fast setup for protected routes).

React & Next.js30 sec read

Difference between jest.fn, jest.spyOn, and jest.mock in React

Tests whether you distinguish Jest's three mocking scopes. Good answers: jest.fn for standalone callbacks; jest.spyOn to observe existing methods; jest.mock to swap entire modules. Red flag: using them interchangeably or saying spyOn replaces modules.

React & Next.js30 sec read

How would you unit test a React title component?

This tests React Testing Library's user-centric approach and Jest basics. A strong answer renders the component, queries the h1 by role or text, and asserts it is in the document. A red flag is using Enzyme shallow rendering or testing internal state.

React & Next.js30 sec read

Explain atomic state management and how it differs from Redux

This tests bottom-up vs top-down architecture. Good response contrasts atom graphs with Redux's monolithic store, notes atoms avoid extra rerenders sans selectors, and flags granular subscriptions.

React & Next.js31 sec read

How would you avoid new functions per list item without useCallback?

Tests stable handler patterns for large lists. Answer: define one handler outside the map, attach it to every item, and read the id from a data-id attribute via currentTarget.dataset.id. Or use event delegation on the parent. Red flag: useCallback in loop.

React & Next.js30 sec read

How do React.lazy and dynamic import() enable code splitting?

It tests your grasp of React code-splitting and the Suspense contract. A strong answer states that lazy defers loading until first render via dynamic import, and Suspense shows a fallback while the Promise resolves.

React & Next.js30 sec read

When can overusing useMemo hurt performance and what are the trade-offs?

WHAT IT TESTS: Awareness that useMemo has memory and comparison overhead. ANSWER OUTLINE: Memoizing cheap work wastes cycles, increases memory use, and burdens dependency tracking. RED FLAG: Claiming useMemo is free or automatically blocks child re-renders.

React & Next.js30 sec read

Child re-renders with unchanged props: function identity and useCallback fix

This tests reference equality and React memoization. A strong answer says inline functions recreate on every parent render, breaking React.memo, and uses useCallback with a correct dependency array. A red flag is ignoring identity or omitting dependencies.