In 2026, the frontend of interviews in Russian IT companies turned into something between an exam in quantum physics and the game "Who Wants to Be a Millionaire". Only instead of calling a friend, you have 5 seconds to explain how useEffect differs from useLayoutEffect, and why anyone should care.
🎯 Category: "Basic level" (aka "everyone should know this, but half of them don't")
1. What is frontend development in general?
Why they ask: They check whether you understand the scale of your profession or think that it is just "making buttons beautiful."
Normal response: The frontend is everything that the user sees and interacts with. HTML, CSS, JavaScript, frameworks, performance, accessibility, adaptability... and yes, sometimes even "beautiful buttons".
Reality 2026: The frontend has long ceased to be just a layout. Now it's a whole architecture with SSR, edge computing, AI integrations, and microfrontends. In general, "just buttons" — that was in 2015.
2. What is the difference between == and ===?
Why they ask: A classic of the genre. If you don't know, go learn the basics.
Short answer:
==compares values with type casting (can cast "5" to 5)===strict comparison (types must match)
Mem-commentary: Using == in 2026 is like wearing Crocs to an interview. Technically, it's possible, but why?
3. What is DOM?
Why they ask: Without this knowledge, there is nothing to do in the frontend.
Answer: Document Object Model is a tree structure for representing an HTML document. JavaScript manipulates the DOM to change the page dynamically.
Relevant in 2026: Now they also ask about Virtual DOM (React), Signals (Solid/Angular), and how it all optimizes rendering. Because just DOM is too simple.
4. Explain the positioning in CSS: relative, absolute, fixed, sticky
Why they ask: They check if you understand how the elements behave on the page.
Quick cheat sheet:
relative— shifts from its usual position, but the place is reservedabsolute— pulled out of the stream, positioned relative to the nearest positioned parentfixed— sticks to the browser window, does not scrollsticky— hybrid: behaves likerelativeuntil it reaches the sticking point, then becomesfixed
Chip 2026: In the era of CSS Container Queries and CSS Grid, position: absolute is used less and less. But they still ask about it 🤷♂️
🔥 Category: "JavaScript is a language that everyone hates, but everyone uses"
5. What is closure?
Why they ask: Because it's a fundamental concept of JS, and you can't do without it.
Explanation for people: The function "remembers" variables from the external scope, even when this scope has already ended.
function createCounter() {
let count = 0;
return function() {
count++;
return count;
}
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2Where it is used in real life: Private variables, event handlers, React hooks... everywhere.
6. What is the difference between null and undefined?
Quick:
undefined— the variable is declared, but the value is not assignednull— the programmer clearly indicated "there is nothing here"
Philosophical question 2026: Why typeof null === 'object'? Answer: a bug in JavaScript, which is now historical and can no longer be fixed 😅
7. What is an Event Loop?
Why they ask: Test your understanding of asynchrony in JavaScript.
Explanation without pain:
JavaScript is single-threaded. Event Loop is a mechanism that allows you to execute asynchronous code:
Call Stack executes synchronous code
Asynchronous operations (setTimeout, fetch) are sent to Web APIs
When ready, they get into the queue (Task Queue)
Event Loop checks: Call Stack empty? → Takes from the queue and executes
Trend 2026: Now you also need to know about microtasks (Promises) vs macrotasks (setTimeout). Because one event loop is not enough 🙃
8. var, let, const — what is the difference?
In short and clear:
var— old school, function scope, hoisting, problemslet— block scope, can be reassignedconst— block scope, cannot be reassigned (but the object can be mutated!)
Rule 2026: Use const by default, let when needed, var do not use at all.
⚛️ Category: "React — because without it, you can't go anywhere in 2026"
9. What are React Hooks and why are they needed?
Context: Before hooks, there were class components. They worked, but the code was verbose.
Hooks in 2026: Industry standard. Main:
useState— local stateuseEffect— side effects (API, subscriptions, DOM)useContext— access to contextuseRef— links to DOM or saving valuesuseMemo/useCallback— optimizationuseReducer— complex state logic
New in 2026: React Compiler (React Forget) automatically optimizes the code, so manual memoization is less often needed. But they still ask about it at job interviews!
10. Rules for using hooks
Two iron rules:
Call hooks only at the top level (not in loops, conditions, nested functions)
Call hooks only in React components or custom hooks
Why: React tracks the order in which hooks are called. If it changes, everything breaks.
11. useEffect vs useLayoutEffect — what is the difference?
Trap question 2026:
useEffectis running after render (asynchronously)useLayoutEffectin progress to rendering in the browser (synchronous)
When to use useLayoutEffect: When you need to measure the DOM or make changes before the user sees something (so that there is no "flickering").
In 99% of cases: I need a regular useEffect.
12. What is Virtual DOM?
In simple words: A lightweight copy of the real DOM in memory. React compares (diff) the old Virtual DOM with the new one, calculates the minimum changes and updates only them in the real DOM.
Why it matters: Working directly with DOM is slow. Virtual DOM speeds up the process.
Alternatives in 2026: Svelte compiles everything in vanilla JS without Virtual DOM, Solid.js uses fine-grained reactivity (Signals). But React still dominates in Russia.
13. How does useState work?
Basic:
const [count, setCount] = useState(0);What's happening:
useState(0)initializes the stateReturns an array: [current value, update function]
When calling
setCount, the component is re-rendered
Nuance: The status update is asynchronous! setCount(count + 1) does not immediately change count.
Functional update (important!):
setCount(prev => prev + 1); // More reliable14. What is the Context API?
Problem: Passing props through 10 levels of components is a pain.
Solution: The Context API allows you to "teleport" data directly to consumers.
When to use: Topics, authorization, interface language.
When NOT to use: For the entire state of the application. For complex logic, Redux Toolkit, Zustand, or Jotai are better.
15. Explain the lifecycle of the component
In class components: componentDidMount, componentDidUpdate, componentWillUnmount
In functional components with hooks:
useEffect(() => {
// componentDidMount + componentDidUpdate
return () => {
// componentWillUnmount (cleanup)
};
}, [deps]); // Dependencies determine when to runEmpty dependency array []: It will work only when mounting (analogue componentDidMount).
🎨 Category: "CSS — because centering a div is still difficult"
16. Flexbox vs Grid — when to use what?
Flexbox: One-dimensional layouts (rows or columns)
.container {
display: flex;
justify-content: center;
align-items: center;
}Grid: Two-dimensional layouts (rows and columns at the same time)
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}Rule 2026: Use Grid for page structure, Flexbox for components inside.
17. What are CSS Variables (Custom Properties)?
Summary: Variables in CSS that can be reused.
:root {
--primary-color: #3498db;
--spacing: 16px;
}
.button {
background: var(--primary-color);
padding: var(--spacing);
}Advantages in 2026:
Easy to change themes (dark mode)
Can be manipulated via JavaScript
Native browser support
18. How can I optimize CSS performance?
Current tips 2026:
Critical CSS: Inline critical CSS in
<head>, load the rest asynchronouslyMinification and compression
Avoid CSS in JS in runtime: Use compile-time solutions (StyleX from Meta, Tailwind)
Container Queries: Instead of media queries for adaptive components
⚡ Category: "Performance - or how not to make a website a drag"
19. What is Core Web Vitals?
Google is even stricter about performance in 2026:
LCP (Largest Contentful Paint): Main content loading time (target: < 2.5s)
INP (Interaction to Next Paint): Replaced FID, measures responsiveness (target: < 200ms)
CLS (Cumulative Layout Shift): Visual stability (target: < 0.1)
Why it matters: Affects SEO and conversion.
20. Lazy Loading — what and how?
Images:
<img src="image.jpg" loading="lazy" alt="description">React components:
const HeavyComponent = lazy(() => import('./HeavyComponent'));
<Suspense fallback={<div>Загрузка...</div>}>
<HeavyComponent />
</Suspense>Trend 2026: Next.js does this automatically for pages and components.
21. Code Splitting — how and why?
Problem: One huge bundle takes a long time to load.
Solution: Split the code into chunks, load on demand.
Webpack/Vite do this automatically:
import('./module').then(module => {
// we use the module
});React + Next.js 2026: Everything out of the box with app router and server components.
22. Memoization in React: useMemo, useCallback, React.memo
When to use:
React.memo: Wraps the component, prevents re-rendering if the props have not changed
const ExpensiveComponent = React.memo(function Component({ data }) {
// ...
});useMemo: Caches the result of calculations
const expensiveValue = useMemo(() => {
return computeExpensiveValue(a, b);
}, [a, b]);useCallback: Caches the function
const handleClick = useCallback(() => {
doSomething(a, b);
}, [a, b]);Important in 2026: Don't optimize prematurely! React Compiler will soon do it all automatically.
🌐 Category: "Modern stack — AI, TypeScript and server stuff"
23. TypeScript — why do you need it?
Short answer: Static typing for JavaScript. Fewer bugs, better autocomplete, easier to refactor.
Statistics 2026: TypeScript has become the standard in Russian IT companies. 80%+ of new projects use TS.
At the interview, you may be asked:
What is
interfacevstypeHow Generics work
What are Union Types and Type Guards
24. Server Components in React — what is it?
New React 18+, popularity soared in 2026:
Components are rendered on the server
Less JavaScript is sent to the client
Access to the database directly from the component
Example (Next.js App Router):
async function ProductPage({ id }) {
const product = await db.products.findById(id); // right in the component!
return <div>{product.name}</div>
}Advantages: Faster loading, less bundle, better SEO.
25. Edge Computing — what and why?
Idea: Execute code on edge servers (closer to the user) rather than on a single central server.
Advantages:
Less latency
Better for users from different regions of Russia
Resource savings
Examples: Cloudflare Workers, Vercel Edge Functions, Yandex Cloud Functions.
At the interview 2026: They ask about understanding architecture and when it is needed.
26. AI in development — how do you use it?
Reality 2026: AI tools have become part of the workflow in Russian companies.
Popular tools:
GitHub Copilot — code autocompletion
Cursor / Windsurf — AI IDE
ChatGPT / Claude / Yandex GPT — code explanation, debugging, generation
Various Russian AI assistants
What they can ask:
How does AI help in work?
What limitations of AI code do you see?
How do you check the quality of AI-generated code?
Important: AI is a tool, not a substitute for understanding the basics.
🔧 Category: "Tools and Ecosystem"
27. npm vs yarn vs pnpm — what's the difference?
All — package managers:
npm: Standard, comes with Node.js
yarn: Faster, better caching (Yarn 2+ is even faster, but debatable)
pnpm: The most economical in terms of disks (uses symlinks), super fast
Trend 2026: pnpm is gaining popularity in monorepositories of Russian companies.
28. Webpack vs Vite vs Turbopack — which one to choose?
Webpack: Good old, flexible, but slow on large projects.
Vite: Uses ES modules for dev mode → instant launch. esbuild for production.
Turbopack: A new bundler from Vercel (Next.js), written in Rust, even faster than Vite.
Conclusion 2026: Vite is the standard for new projects. Turbopack is gaining momentum.
29. What is a monorepo and why is it needed?
Monorepo: One repository for multiple packages/applications.
Tools: Turborepo, Nx, Lerna.
Advantages:
Shared code between projects
Single versioning
It's easier to make cross-project changes
When to use: Large teams (like in Yandex, VK), microfrontends, design systems.
🧪 Category: "Testing — because 'works on my machine' doesn't work"
30. Types of testing in the frontend
Unit tests: Test individual functions/components (Jest, Vitest)
Integration tests: Test the interaction between parts (React Testing Library)
E2E tests: Test the entire user flow (Playwright, Cypress)
Trend 2026: Playwright replaces Cypress. Vitest replaces Jest in Vite projects.
31. React Testing Library — Basic Principles
Philosophy: Test how the user interacts with the app.
Bad:
wrapper.find('.button').simulate('click'); // testing of implementation detailsGood:
const button = screen.getByRole('button', { name: /submit/i });
fireEvent.click(button);At the interview, you will be asked: How do you test hooks, asynchronous code, mocking API.
🎭 Category: "Behavioral questions and soft skills"
32. Tell us about a project you are proud of
What they want to hear:
The problem that was solved
Technology and approach
Your role
Result (metrics!)
STAR structure: Situation → Task → Action → Result
Example:
"The dashboard in CRM was loading for 5 seconds. I profiled it through Chrome DevTools, found heavy dependencies, and implemented code splitting and lazy loading. The loading time dropped to 2 seconds, and engagement increased by 18%."
33. How do you keep up with trends?
Good answers 2026:
I read framework updates (React blog, Next.js changelog)
I watch reports from conferences (HolyJS, FrontendConf, React Summit)
Participating in open-source
I try new technologies in pet projects
Subscribed to devblogs and newsletters
I am a member of Telegram developer communities
🚀 Speaking of Telegram communities!
If you want to see useful programming content in your feed every day, rather than just reading articles once a month, join Kodik community in Telegram!
There are short posts, task reviews, news from the world of frontend and backend, and there is also communication with other developers. It's like vitamins for a programmer's brain — every day a little bit, but the effect is cumulative 💪
34. Describe a complex technical problem you solved
What is checked: Problem-solving skills and technical depth.
Response scheme:
Problem: What broke, symptoms
Diagnostics: How we searched for the cause (tools, hypotheses)
Solution: What we did
Summary: Result and what we learned
Bonus: Mention that you documented the decision for the team.
🚀 Category: "Advanced level — questions for mid-level and senior employees"
35. Microfrontends — what are they and when to use them?
Idea: Split the frontend into independent parts that are developed by separate teams.
Approaches:
Module Federation (Webpack 5)
Iframe (old school, but it works)
Web Components
When NOT to use: Small teams, simple apps.
When to use: Large teams (Yandex, VK, Sber), legacy systems, need deployment independence.
Trend 2026: The pattern is maturing in Russian companies, but not for everyone. Be careful with the hype!
36. Accessibility (a11y) — what is important to know?
Basics:
Semantic HTML (use the correct tags)
ARIA attributes when needed
Keyboard navigation (everything should work without a mouse)
Color contrast (WCAG AA/AAA standards)
Alt-texts for images
Tools: Lighthouse, axe DevTools, WAVE.
Important in Russia 2026: For state projects and large companies, accessibility is becoming a mandatory requirement.
37. How would you design the authentication system?
Verification: Architectural thinking.
Key aspects:
JWT vs Session-based auth
Refresh tokens
Token storage (httpOnly cookies vs localStorage)
CSRF protection
OAuth / Social login (VKontakte, Yandex ID, Telegram)
Fashionable answer 2026: NextAuth.js, Clerk, Supabase Auth — ready-made solutions instead of writing from scratch.
38. State management in 2026 — what to use?
Options:
Redux Toolkit — still powerful for complex applications
Zustand — lightweight, simple API
Jotai / Recoil — atomic state
TanStack Query (React Query) - for server state
Context API - for simple cases
Trend: Separate client state (UI) and server state (data from the API). For the second, use TanStack Query.
39. What is hydration in SSR/SSG?
SSR (Server-Side Rendering): The server returns the finished HTML.
Hydration: React "animates" this HTML on the client by attaching event handlers.
Problem: If the client code does not match the server code, a hydration error occurs.
New in 2026: Partial Hydration and Islands Architecture (Astro) — hydration of only interactive parts.
40. Performance Optimization — checklist
Checklist for the interview:
✅ Lazy loading (images, components, routes)
✅ Code splitting (dynamic imports)
✅ Tree shaking (removing unused code)
✅ Memoization (React.memo, useMemo, useCallback)
✅ Debounce / Throttle (search, scroll)
✅ Virtualization of long lists (react-window, TanStack Virtual)
✅ Image optimization (WebP, AVIF, responsive images)
✅ CDN for statics
✅ HTTP/2, HTTP/3
✅ Prefetch / Preload of critical resources
🎯 Category: "Tricky questions — traps and tasks"
41. What will this code display?
console.log(1);
setTimeout(() => console.log(2), 0);
Promise.resolve().then(() => console.log(3));
console.log(4);Answer: 1, 4, 3, 2
Why:
Synchronous code is executed first: 1, 4
Microtasks (Promises) are executed before macrotasks (setTimeout)
Therefore: Promise (3), then setTimeout (2)
This is a classic for checking your understanding of the Event Loop.
42. What is the difference between map() and forEach()?
forEach: Just iterates, returns nothing.
map: Creates a new array based on the conversion.
const numbers = [1, 2, 3];
numbers.forEach(n => console.log(n * 2)); // displays, but does not save
const doubled = numbers.map(n => n * 2); // [2, 4, 6]Rule: Need a new array → map. Just do something with each element → forEach.
🎓 Let's summarize
The frontend of interviews in Russian IT companies in 2026 is a mix of:
Basic knowledge (HTML, CSS, JavaScript)
Frameworks (React dominates, but knowledge of alternatives is a plus)
Performance and optimization
Modern tools (TypeScript, Vite, AI assistants)
Architectural thinking (when to use what and why)
Soft skills (communication, problem solving, teamwork)
📚 How to prepare effectively?
Understand the basics deeply - you can't go anywhere without them
Practice code - don't just read, write
Do pet projects - apply knowledge in practice
Explore real codebases — read the code of popular libraries
Mock interviews - practice the interview format
🚀 Do you want to level up your frontend skills systematically and with pleasure?
Then you definitely need to try Code - an application for learning programming with practice right on your phone!
Why Kodik is cool:
✅ Practice from the first minute - not just a theory, but real tasks
✅ Interactive lessons - you write the code directly in the application and immediately see the result
✅ Convenient everywhere - in the subway, in line, on the sofa - learn anywhere
✅ Structured program - from basics to advanced topics
✅ Community — in Telegram channel share experiences, analyze tasks, discuss trends
👉 Download Kodik and start coding today!
👉 Subscribe to Telegram channel — Useful posts every day that will help you remember the material and keep your finger on the pulse of frontend trends!
P.S.
Remember: You don't have to know everything at the interview. It is more important to show:
Ability to think and solve problems
Willingness to learn
Understanding the basics and the ability to apply them
Ability to explain your thoughts
Even if you don't know the answer, think aloud. Interviewers appreciate the thinking process, not just the final answer.
Good luck at the interview! 🚀 And remember: every interview is an experience. Even if you didn't pass, you learned what to study next.