Interview - React & Node.js Engineer

1

🟢 Ľahká

0 / 4 body

What is the difference between controlled and uncontrolled components in React?

Controlled: Form data is handled by React component state, value controlled by React via props and onChange handlers

Uncontrolled: Form data is handled by DOM itself, accessed via refs, React doesn't control the value

Benefits of controlled: Single source of truth, easier validation, easier to modify/format input, better for complex forms

When to use uncontrolled: Simple forms, file inputs, integration with non-React code, performance optimization for large forms

2

🟡 Stredná

0 / 5 bodov

Explain the useEffect hook and its cleanup function. When does cleanup run?

Purpose: Performs side effects in functional components (data fetching, subscriptions, DOM manipulation, timers)

Cleanup function: Returned from useEffect, used to clean up resources (unsubscribe, cancel requests, clear timers)

When cleanup runs: Before component unmounts AND before re-running effect (when dependencies change)

Dependency array: Empty [] runs once on mount, no array runs every render, [deps] runs when deps change

Common cleanup examples: clearInterval, removeEventListener, abort fetch requests, unsubscribe from observables

3

🔴 Ťažká

0 / 6 bodov

What is the Virtual DOM and how does React's reconciliation algorithm work?

Virtual DOM: Lightweight JavaScript representation of actual DOM, kept in memory, allows React to batch updates efficiently

Reconciliation process: Compares new Virtual DOM with previous one (diffing), determines minimal set of changes needed

Diffing algorithm: Compares trees level by level, uses keys to identify elements, assumes different component types produce different trees

Keys importance: Helps React identify which items changed/added/removed, improves performance, should be stable and unique

Fiber architecture: React 16+ uses Fiber for incremental rendering, can pause/resume work, prioritize updates

Performance benefits: Minimizes DOM operations (expensive), batches updates, enables efficient re-rendering of large UIs

4

🟡 Stredná

0 / 5 bodov

What is the event loop in Node.js and how does it work?

Purpose: Enables non-blocking I/O despite JavaScript being single-threaded, handles async operations efficiently

Phases: Timers, pending callbacks, idle/prepare, poll, check, close callbacks - executes in order

Poll phase: Most important, retrieves new I/O events, executes I/O callbacks (except close, timers, setImmediate)

setImmediate vs setTimeout: setImmediate runs in check phase, setTimeout in timers, setImmediate executes after I/O

Microtasks: process.nextTick and Promise callbacks run between phases, nextTick has highest priority

5

🟢 Ľahká

0 / 4 body

What are React Hooks and why were they introduced?

Definition: Functions that let you use state and lifecycle features in functional components without writing classes

Common hooks: useState (state), useEffect (side effects), useContext (context), useRef (refs), useMemo (memoization)

Benefits: Simpler code, better code reuse with custom hooks, no 'this' confusion, easier to test and organize logic

Rules: Only call at top level (not in loops/conditions), only call from React functions, custom hooks start with "use"

6

🟡 Stredná

0 / 5 bodov

Explain middleware in Express.js. How would you implement error handling middleware?

Definition: Functions with access to request, response, and next function, execute during request-response cycle

Types: Application-level, router-level, error-handling, built-in (express.json, express.static), third-party

Error handling middleware: Takes 4 parameters (err, req, res, next), defined after all other middleware and routes

Implementation: app.use((err, req, res, next) => { res.status(500).json({error: err.message}) })

Best practices: Centralized error handling, custom error classes, logging, different responses for dev/prod environments

7

🔴 Ťažká

0 / 6 bodov

How do you optimize React application performance? Explain useMemo, useCallback, and React.memo.

React.memo: HOC that memoizes component, prevents re-render if props haven't changed (shallow comparison)

useMemo: Memoizes expensive computation result, only recalculates when dependencies change, returns cached value

useCallback: Memoizes function itself, prevents creating new function instance, useful for passing callbacks to optimized child components

Other techniques: Code splitting (React.lazy), virtualization for long lists, debouncing/throttling, proper key usage

When to optimize: Don't premature optimize, use React DevTools Profiler, measure first, optimize slow renders and expensive calculations

Bundle optimization: Tree shaking, dynamic imports, analyze bundle size, remove unused dependencies, use production build

8

🟢 Ľahká

0 / 4 body

What is the difference between REST and GraphQL APIs?

REST: Multiple endpoints, fixed data structure, over-fetching/under-fetching common, uses HTTP methods (GET, POST, PUT, DELETE)

GraphQL: Single endpoint, client specifies exact data needed, no over/under-fetching, strongly typed schema

GraphQL advantages: Flexible queries, reduces network requests, self-documenting schema, better for complex data requirements

REST advantages: Simpler to implement, better caching, easier debugging, more mature ecosystem, good for simple CRUD operations

9

🟡 Stredná

0 / 5 bodov

How do you handle authentication and authorization in a Node.js/Express application?

JWT (JSON Web Tokens): Stateless authentication, token contains user info, signed and optionally encrypted, sent in Authorization header

Session-based: Server stores session data, client gets session ID in cookie, stateful, requires session store (Redis, MongoDB)

Password security: Hash passwords with bcrypt/argon2, never store plain text, use salt, implement password strength requirements

Authorization middleware: Verify token, check user roles/permissions, protect routes, implement role-based access control (RBAC)

Best practices: HTTPS only, refresh tokens, token expiration, CORS configuration, rate limiting, secure cookie flags (httpOnly, secure)

10

🔴 Ťažká

0 / 6 bodov

Explain how you would implement real-time communication in a Node.js application. What are the differences between WebSockets, Server-Sent Events (SSE), and polling?

WebSockets: Full-duplex bidirectional communication, persistent connection, low latency, use Socket.io library, good for chat, gaming

Server-Sent Events (SSE): Unidirectional (server to client), uses HTTP, automatic reconnection, simpler than WebSockets, good for notifications/updates

Polling: Client repeatedly requests data, simple but inefficient, high latency, unnecessary network traffic, use only if no alternatives

Long polling: Client waits for server response, server holds connection until data available, better than regular polling but still inefficient

Implementation considerations: Scaling with multiple servers (Redis pub/sub), connection management, error handling, fallback mechanisms, authentication

When to use what: WebSockets for bidirectional real-time (chat, multiplayer), SSE for one-way updates (stock prices, news feeds), avoid polling when possible

⚛️ React & Node.js Interview

👤 Informácie o kandidátovi

📊 Celkové Skóre

📋 Interview Report - React & Node.js Engineer