En 2026, les entretiens de recrutement dans les entreprises informatiques russes se sont transformés en quelque chose entre un examen de physique quantique et le jeu « Qui veut gagner des millions ». Seulement, au lieu d'appeler un ami, vous avez 5 secondes pour expliquer en quoi useEffect diffère de useLayoutEffect, et pourquoi cela devrait-il intéresser quelqu'un.
🎯 Catégorie : « Niveau de base » (alias « tout le monde devrait le savoir, mais la moitié ne le sait pas »)
1. Qu'est-ce que le développement frontend en général ?
Pourquoi demande-t-on : Ils vérifient si vous comprenez l'ampleur de votre profession ou si vous pensez qu'il s'agit simplement de « rendre les boutons beaux ».
Réponse normale : Le frontend est tout ce que l'utilisateur voit et avec quoi il interagit. HTML, CSS, JavaScript, frameworks, performances, accessibilité, adaptabilité... et oui, parfois même des « boutons jolis ».
Réalité 2026 : Le front-end a depuis longtemps cessé d'être une simple mise en page. Maintenant, c'est toute une architecture avec SSR, edge computing, intégrations d'IA et microfrontends. En général, « juste des boutons » — c'était en 2015.
2. Quelle est la différence entre == et === ?
Pourquoi demande-t-on : Un classique du genre. Si vous ne le connaissez pas, allez apprendre les bases.
Réponse courte :
==compare les valeurs avec la conversion de type (peut convertir "5" en 5)===comparaison stricte (les types doivent correspondre)
Commentaire mémé : Utiliser == en 2026, c'est comme porter des crocs pour un entretien. Techniquement possible, mais pourquoi ?
3. Qu'est-ce que le DOM ?
Pourquoi demande-t-on : Sans cette connaissance, il n'y a rien à faire dans le frontend.
Réponse : Document Object Model est une structure arborescente de présentation d'un document HTML. JavaScript manipule le DOM pour modifier la page de manière dynamique.
Pertinent en 2026 : Maintenant, ils posent également des questions sur Virtual DOM (React), Signals (Solid/Angular), et comment tout cela optimise le rendu. Parce que le DOM est trop simple.
4. Expliquez le positionnement en CSS : relative, absolute, fixed, sticky
Pourquoi demande-t-on : Ils vérifient si vous comprenez comment les éléments se comportent sur la page.
Aide-mémoire rapide :
relative— se déplace de sa position habituelle, mais la place est réservéeabsolute- est extrait du flux, positionné par rapport au parent positionné le plus prochefixed— adhère à la fenêtre du navigateur, ne défile passticky- hybride : se comporte commerelativejusqu'à ce qu'il atteigne le point d'adhérence, puis devientfixed
Jeton 2026 : À l'ère des CSS Container Queries et CSS Grid, position: absolute est de moins en moins utilisé. Mais on le demande toujours 🤷♂️
🔥 Catégorie : « JavaScript est un langage qui met tout le monde en colère, mais que tout le monde utilise »
5. Qu'est-ce que la fermeture (closure) ?
Pourquoi demande-t-on : Parce que c'est un concept fondamental de JS, et sans lui, il n'y a rien.
Explication pour les personnes : La fonction « mémorise » les variables de la portée externe, même lorsque cette portée est déjà terminée.
function createCounter() {
let count = 0;
return function() {
count++;
return count;
}
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2Où est-il utilisé dans la vie réelle : Variables privées, gestionnaires d'événements, crochets React... partout.
6. Quelle est la différence entre null et undefined ?
Rapide :
undefined— la variable est déclarée, mais la valeur n'est pas attribuéenull- le programmeur a clairement indiqué "il n'y a rien ici"
Question philosophique 2026 : Pourquoi typeof null === 'object' ? Réponse : un bug dans JavaScript, qui est maintenant historique et ne peut plus être corrigé 😅
7. Qu'est-ce qu'une boucle d'événements ?
Pourquoi demande-t-on : Vérifier la compréhension de l'asynchronisme en JavaScript.
Explication sans douleur :
JavaScript est un seul fil d'exécution. Event Loop est un mécanisme qui vous permet d'exécuter du code asynchrone :
Call Stack exécute le code synchrone
Les opérations asynchrones (setTimeout, fetch) sont envoyées aux API Web
Quand ils sont prêts, ils entrent dans la file d'attente (Task Queue)
Event Loop vérifie : Call Stack est-il vide ? → Prend de la file d'attente et exécute
Tendance 2026 : Maintenant, vous devez en savoir plus sur les microtasks (Promises) vs macrotasks (setTimeout). Parce qu'une seule boucle d'événements ne suffit plus 🙃
8. var, let, const — quelle est la différence ?
En bref et clairement :
var- vieille école, fonction scope, hoisting, problèmeslet— block scope, peut être réaffectéconst— block scope, ne peut pas être réaffecté (mais l'objet peut être muté !)
Règle 2026 : Utilisez const par défaut, let si nécessaire, var ne pas utiliser du tout.
⚛️ Catégorie : « React — parce que sans lui, on n'ira nulle part en 2026 »
9. Que sont les React Hooks et pourquoi en a-t-on besoin ?
Contexte : Avant les hooks, il y avait des composants de classe. Ils ont travaillé, mais le code était prolixe.
Hooks en 2026 : Norme de l'industrie. Principaux :
useState— état localuseEffect- effets secondaires (API, abonnements, DOM)useContext— accès au contexteuseRef- liens vers DOM ou sauvegarde des valeursuseMemo/useCallback— optimisationuseReducer— logique d'état complexe
Nouveauté 2026 : React Compiler (React Forget) optimise automatiquement le code, de sorte que la mémorisation manuelle est moins souvent nécessaire. Mais lors des entretiens, on pose toujours des questions à ce sujet !
10. Règles d'utilisation des crochets
Deux règles d'or :
Appelez les crochets uniquement au niveau supérieur (pas dans les boucles, les conditions, les fonctions imbriquées)
Appelez des hooks uniquement dans les composants React ou les hooks personnalisés
Pourquoi : React suit l'ordre dans lequel les crochets sont appelés. S'il change, tout se casse.
11. useEffect vs useLayoutEffect — quelle est la différence ?
Question piège 2026 :
useEffecten cours après rendu (asynchrone)useLayoutEffecten cours jusqu'à rendu dans le navigateur (synchrone)
Quand l'utiliser useLayoutEffect: Lorsque vous devez mesurer le DOM ou apporter des modifications avant que l'utilisateur ne voie quelque chose (pour éviter le « scintillement »).
Dans 99 % des cas : Vous avez besoin d'un useEffect ordinaire.
12. Qu'est-ce que le DOM virtuel ?
En termes simples : Une copie légère du vrai DOM en mémoire. React compare (diff) l'ancien Virtual DOM avec le nouveau, calcule les changements minimaux et ne les met à jour que dans le DOM réel.
Pourquoi est-ce important ? Le travail direct avec le DOM est lent. Le DOM virtuel accélère le processus.
Alternatives en 2026 : Svelte compile tout en vanilla JS sans Virtual DOM, Solid.js utilise une réactivité fine (Signals). Mais React domine toujours en Russie.
13. Comment fonctionne useState ?
Basique :
const [count, setCount] = useState(0);Ce qui se passe :
useState(0)initialise l'étatRenvoie un tableau : [valeur actuelle, fonction de mise à jour]
Lors de l'appel de
setCount, le composant est rendu à nouveau
Nuance : Mise à jour de l'état asynchrone ! setCount(count + 1) ne change pas immédiatement count.
Mise à jour fonctionnelle (important !) :
setCount(prev => prev + 1); // Plus fiable14. Qu'est-ce que l'API de contexte ?
Problème : Passer des props à travers 10 niveaux de composants est une douleur.
Solution : L'API de contexte permet de « téléporter » les données directement aux consommateurs.
Quand l'utiliser : Thèmes, autorisation, langue de l'interface.
Quand NE PAS utiliser : Pour l'état complet de l'application. Pour une logique complexe, Redux Toolkit, Zustand ou Jotai sont meilleurs.
15. Expliquez le cycle de vie du composant
Dans les composants de classe : componentDidMount, componentDidUpdate, componentWillUnmount
Dans les composants fonctionnels avec des crochets :
useEffect(() => {
// componentDidMount + componentDidUpdate
return () => {
// componentWillUnmount (cleanup)
};
}, [deps]); // Les dépendances déterminent quand démarrerTableau de dépendances vide []: Ne fonctionnera que lors du montage (analogue componentDidMount).
🎨 Catégorie : « CSS — parce que centrer un div est encore difficile »
16. Flexbox vs Grid — quand utiliser quoi ?
Flexbox: Dispositions unidimensionnelles (lignes ou colonnes)
.container {
display: flex;
justify-content: center;
align-items: center;
}Grid: Dispositions bidimensionnelles (lignes et colonnes simultanément)
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}Règle 2026 : Utilisez Grid pour la structure de la page, Flexbox pour les composants à l'intérieur.
17. Que sont les variables CSS (propriétés personnalisées) ?
L'essence : Variables CSS qui peuvent être réutilisées.
:root {
--primary-color: #3498db;
--spacing: 16px;
}
.button {
background: var(--primary-color);
padding: var(--spacing);
}Avantages en 2026 :
Changement de thème facile (mode sombre)
Peut être manipulé via JavaScript
Prise en charge native des navigateurs
18. Comment optimiser les performances CSS ?
Conseils d'actualité 2026 :
Critical CSS: CSS critique en ligne dans
<head>, le reste est chargé de manière asynchroneMiniaturisation et compression
Évitez CSS dans JS au runtime : Utilisez des solutions avec compile-time (StyleX de Meta, Tailwind)
Container Queries: Au lieu de requêtes de médias pour les composants adaptatifs
⚡ Catégorie : « Performance — ou comment ne pas faire d'un site un frein »
19. Que sont les Core Web Vitals ?
Google en 2026 est encore plus strict en matière de performances :
LCP (Largest Contentful Paint): Temps de chargement du contenu principal (objectif : < 2,5 s)
INP (Interaction to Next Paint): Remplace le FID, mesure la réactivité (objectif : < 200 ms)
CLS (Cumulative Layout Shift): Stabilité de la partie visuelle (objectif : < 0,1)
Pourquoi est-ce important : Affecte le référencement et la conversion.
20. Lazy Loading — qu'est-ce que c'est et comment ça marche ?
Images :
<img src="image.jpg" loading="lazy" alt="description">Composants React :
const HeavyComponent = lazy(() => import('./HeavyComponent'));
<Suspense fallback={<div>Загрузка...</div>}>
<HeavyComponent />
</Suspense>Tendance 2026 : Next.js le fait automatiquement pour les pages et les composants.
21. Code Splitting — comment et pourquoi ?
Problème : Un énorme bundle prend beaucoup de temps à charger.
Solution : Diviser le code en morceaux, charger à la demande.
Webpack/Vite le fait automatiquement :
import('./module').then(module => {
// nous utilisons le module
});React + Next.js 2026: Tout est dans la boîte avec l'application routeur et les composants du serveur.
22. Mémorisation dans React : useMemo, useCallback, React.memo
Quand l'utiliser :
React.memo: Enveloppe le composant, empêche le rendu si les props n'ont pas changé
const ExpensiveComponent = React.memo(function Component({ data }) {
// ...
});useMemo: Met en cache le résultat des calculs
const expensiveValue = useMemo(() => {
return computeExpensiveValue(a, b);
}, [a, b]);useCallback: Met en cache la fonction
const handleClick = useCallback(() => {
doSomething(a, b);
}, [a, b]);Important en 2026 : N'optimisez pas prématurément ! Le compilateur React le fera bientôt automatiquement.
🌐 Catégorie : « Pile moderne — AI, TypeScript et trucs côté serveur »
23. TypeScript : pourquoi en avez-vous besoin ?
Réponse courte : Typage statique pour JavaScript. Moins de bogues, meilleure saisie semi-automatique, plus facile à refactoriser.
Statistiques 2026 : TypeScript est devenu la norme dans les entreprises informatiques russes. Plus de 80 % des nouveaux projets utilisent TS.
Lors de l'entretien, on peut vous demander :
Qu'est-ce que
interfacevstypeComment fonctionnent les génériques
Que sont les Union Types et les Type Guards
24. Server Components dans React — qu'est-ce que c'est ?
Nouveauté React 18+, la popularité a grimpé en flèche en 2026 :
Les composants sont rendus sur le serveur
Moins de JavaScript est envoyé au client
Accès à la base de données directement depuis le composant
Exemple (Next.js App Router) :
async function ProductPage({ id }) {
const product = await db.products.findById(id); // directement dans le composant !
return <div>{product.name}</div>
}Avantages : Chargement plus rapide, moins de paquets, meilleur référencement.
25. Edge Computing : qu'est-ce que c'est et à quoi ça sert ?
Idée : Exécuter le code sur les serveurs Edge (plus proches de l'utilisateur) et non sur un serveur central.
Avantages :
Moins de latence
Meilleur pour les utilisateurs de différentes régions de Russie
Économie de ressources
Exemples : Cloudflare Workers, Vercel Edge Functions, Yandex Cloud Functions.
Lors de l'entretien 2026 : Ils posent des questions sur la compréhension de l'architecture et quand cela est nécessaire.
26. L'IA en développement : comment l'utilisez-vous ?
Réalité 2026 : Les outils d'IA font désormais partie du flux de travail dans les entreprises russes.
Outils populaires :
GitHub Copilot — complétion automatique de code
Cursor / Windsurf — AI IDE
ChatGPT / Claude / Yandex GPT — explication du code, débogage, génération
Divers assistants IA russes
Ce qu'ils peuvent demander :
Comment l'IA aide-t-elle dans le travail ?
Quelles sont les limites du code de l'IA que vous voyez ?
Comment vérifiez-vous la qualité du code généré par l'IA ?
Important : L'IA est un outil, pas un substitut à la compréhension des bases.
🔧 Catégorie : « Outils et écosystème »
27. npm vs yarn vs pnpm — quelle différence ?
Tous les gestionnaires de paquets :
npm: Standard, livré avec Node.js
yarn: Mise en cache plus rapide et meilleure (Yarn 2+ encore plus rapide, mais discutable)
pnpm: Le plus économique en termes de disques (utilise des liens symboliques), ultra-rapide
Tendance 2026 : pnpm gagne en popularité dans les monorépertoires des entreprises russes.
28. Webpack vs Vite vs Turbopack — que choisir ?
Webpack: Bon vieux, flexible, mais lent sur les grands projets.
Vite: Utilise les modules ES pour le mode dev → lancement instantané. esbuild pour la production.
Turbopack: Le nouveau compilateur de Vercel (Next.js), écrit en Rust, est encore plus rapide que Vite.
Conclusion 2026 : Vite est la norme pour les nouveaux projets. Turbopack prend de l'ampleur.
29. Qu'est-ce qu'un monorepo et pourquoi en a-t-on besoin ?
Monorepo: Un référentiel pour plusieurs paquets/applications.
Outils : Turborepo, Nx, Lerna.
Avantages :
Code commun entre les projets
Version unique
Il est plus facile de faire des changements inter-projets
Quand l'utiliser : Grandes équipes (comme chez Yandex, VK), microfrontends, systèmes de conception.
🧪 Catégorie : « Test — parce que 'works on my machine' ne fonctionne pas »
30. Types de tests front-end
Tests unitaires : Testent des fonctions/composants individuels (Jest, Vitest)
Tests d'intégration : Testent l'interaction entre les parties (React Testing Library)
Tests E2E : Testent l'ensemble du flux utilisateur (Playwright, Cypress)
Tendance 2026 : Playwright remplace Cypress. Vitest remplace Jest dans les projets Vite.
31. React Testing Library — principes de base
Philosophie : Testez la façon dont l'utilisateur interagit avec l'application.
Mauvais :
wrapper.find('.button').simulate('click'); // test des détails de la mise en œuvreBien :
const button = screen.getByRole('button', { name: /submit/i });
fireEvent.click(button);Lors de l'entretien, on vous demandera : Comment tester les hooks, le code asynchrone, l'API de moquerie.
🎭 Catégorie : « Questions comportementales et compétences générales »
32. Parlez-nous d'un projet dont vous êtes fier
Ce qu'ils veulent entendre :
Le problème à résoudre
Technologies et approche
Votre rôle
Résultat (métrique !)
Structure STAR : Situation → Task → Action → Result
Exemple :
« Le tableau de bord dans le CRM a été chargé en 5 secondes. J'ai profilé via Chrome DevTools, trouvé des dépendances lourdes, fait du code splitting et du lazy loading. Le temps de chargement est tombé à 2 secondes, l'engagement a augmenté de 18 %. »
33. Comment vous tenez-vous au courant des tendances ?
Bonnes réponses 2026 :
Je lis les mises à jour des frameworks (React blog, Next.js changelog)
Je regarde les rapports des conférences (HolyJS, FrontendConf, React Summit)
Je participe à open-source
J'essaie de nouvelles technologies dans les projets pour animaux de compagnie
Abonné aux devblogs et aux newsletters
Je suis membre des communautés de développeurs Telegram
🚀 À propos des communautés Telegram !
Si vous ne voulez pas seulement lire des articles une fois par mois, mais voir chaque jour du contenu utile sur la programmation dans votre fil d'actualité, rejoignez à la communauté Kodik sur Telegram !
Il y a des messages courts, des analyses de tâches, des nouvelles du monde du front-end et du back-end, et il y a aussi une communication avec d'autres développeurs. C'est comme des vitamines pour le cerveau d'un programmeur : chaque jour un peu, mais l'effet est cumulatif 💪
34. Décrivez un problème technique complexe que vous avez résolu
Ce qui est vérifié : Compétences en résolution de problèmes et connaissances techniques approfondies.
Schéma de réponse :
Problème : Qu'est-ce qui est cassé, symptômes
Diagnostic : Comment la cause a été recherchée (outils, hypothèses)
Solution : Ce qui a été fait
Total : Résultat et ce que nous avons appris
Bonus : Mentionnez que vous avez documenté la décision pour l'équipe.
🚀 Catégorie : « Niveau avancé - questions pour les intermédiaires et les seniors »
35. Microfrontends : qu'est-ce que c'est et quand l'utiliser ?
Idée : Diviser le frontend en parties indépendantes qui sont développées par des équipes distinctes.
Approches :
Module Federation (Webpack 5)
Iframe (ancienne école, mais ça marche)
Web Components
Quand NE PAS utiliser : Petites équipes, applications simples.
Quand l'utiliser : Les grandes équipes (Yandex, VK, Sber), les systèmes hérités, ont besoin d'indépendance de déploiement.
Tendance 2026 : Le modèle mûrit dans les entreprises russes, mais pas pour tout le monde. Attention au battage médiatique !
36. Accessibilité (a11y) : que faut-il savoir ?
Bases :
HTML sémantique (utilisez les balises correctes)
Attributs ARIA quand vous en avez besoin
Navigation au clavier (tout doit fonctionner sans souris)
Contraste des couleurs (normes WCAG AA/AAA)
Textes alternatifs pour les images
Outils : Lighthouse, axe DevTools, WAVE.
Important en Russie 2026 : Pour les projets gouvernementaux et les grandes entreprises, l'accessibilité devient une exigence obligatoire.
37. Comment concevriez-vous un système d'authentification ?
Vérification : Pensée architecturale.
Points clés :
JWT vs Session-based auth
Refresh tokens
Stockage de jetons (cookies httpOnly vs localStorage)
Protection CSRF
OAuth / Connexion sociale (VKontakte, Yandex ID, Telegram)
Réponse à la mode 2026 : NextAuth.js, Clerk, Supabase Auth — des solutions prêtes à l'emploi au lieu d'écrire à partir de zéro.
38. State management en 2026 : que faut-il utiliser ?
Options :
Redux Toolkit — toujours puissant pour les applications complexes
Zustand — API légère et simple
Jotai / Recoil — atomic state
TanStack Query (React Query) — pour l'état du serveur
Context API — pour les cas simples
Tendance : Séparez l'état du client (UI) et l'état du serveur (données de l'API). Pour le second, utilisez TanStack Query.
39. Qu'est-ce que l'hydratation dans SSR/SSG ?
SSR (Server-Side Rendering): Le serveur renvoie le code HTML prêt à l'emploi.
Hydration: React « anime » ce code HTML sur le client en attachant des gestionnaires d'événements.
Problème : Si le code client ne correspond pas au code serveur — hydration error.
Nouveauté 2026 : Partial Hydration et Islands Architecture (Astro) — hydratation uniquement des parties interactives.
40. Optimisation des performances — liste de contrôle
Liste de contrôle pour l'entretien :
✅ Lazy loading (images, composants, routes)
✅ Code splitting (importations dynamiques)
✅ Tree shaking (suppression du code inutilisé)
✅ Mémorisation (React.memo, useMemo, useCallback)
✅ Debounce / Throttle (recherche, défilement)
✅ Virtualisation de longues listes (react-window, TanStack Virtual)
✅ Optimisation des images (WebP, AVIF, responsive images)
✅ CDN pour les statistiques
✅ HTTP/2, HTTP/3
✅ Préchargement/préchargement des ressources critiques
🎯 Catégorie : « Questions pièges - pièges et énigmes »
41. Que va afficher ce code ?
console.log(1);
setTimeout(() => console.log(2), 0);
Promise.resolve().then(() => console.log(3));
console.log(4);Réponse : 1, 4, 3, 2
Pourquoi :
Le code synchrone est exécuté en premier : 1, 4
Les microtâches (Promises) sont exécutées avant les macrotâches (setTimeout)
Par conséquent : Promise (3), puis setTimeout (2)
C'est un classique pour tester votre compréhension de la boucle d'événements.
42. Quelle est la différence entre map() et forEach() ?
forEach: Il suffit d'itérer, ne retourne rien.
map: Crée un nouveau tableau basé sur la transformation.
const numbers = [1, 2, 3];
numbers.forEach(n => console.log(n * 2)); // affiche, mais ne sauvegarde pas
const doubled = numbers.map(n => n * 2); // [2, 4, 6]Règle : Besoin d'un nouveau tableau → map. Il suffit de faire quelque chose avec chaque élément → forEach.
🎓 Résumons
Le front-end des entretiens dans les entreprises informatiques russes en 2026 est un mélange de :
Connaissances de base (HTML, CSS, JavaScript)
Cadres (React domine, mais la connaissance des alternatives est un plus)
Performances et optimisation
Outils modernes (TypeScript, Vite, assistants IA)
Pensée architecturale (quand utiliser quoi et pourquoi)
Soft skills (communication, résolution de problèmes, travail d'équipe)
📚 Comment se préparer efficacement ?
Comprendre les bases en profondeur — sans eux, nulle part
Pratiquez le code — ne vous contentez pas de lire, écrivez
Faites des projets pour animaux de compagnie — appliquez vos connaissances dans la pratique
Étudiez les codebases réelles — lisez le code des bibliothèques populaires
Mock interviews — entraînez-vous au format d'entretien
🚀 Voulez-vous améliorer le front-end systématiquement et avec plaisir ?
Alors vous devez absolument essayer Code - une application pour apprendre la programmation avec des exercices pratiques directement sur votre téléphone !
Pourquoi Kodik est cool :
✅ Pratique dès la première minute — pas seulement une théorie, mais de vrais défis
✅ Leçons interactives — vous écrivez le code directement dans l'application et vous voyez immédiatement le résultat
✅ Pratique partout - dans le métro, dans la file d'attente, sur le canapé - apprenez n'importe où
✅ Programme structuré — des bases aux sujets avancés
✅ Communauté - dans Chaîne Telegram partagent leur expérience, analysent les tâches, discutent des tendances
👉 Téléchargez Kodik et commencez à coder dès aujourd'hui !
👉 Abonnez-vous à Chaîne Telegram — chaque jour, des publications utiles qui vous aideront à ne pas oublier le matériel et à garder le doigt sur le pouls des tendances front-end !
P.S.
Rappelez-vous : Lors d'un entretien, il n'est pas nécessaire de tout savoir. Il est plus important de montrer :
Capacité à réfléchir et à résoudre des problèmes
Volonté d'apprendre
Comprendre les principes de base et être capable de les appliquer
Capacité à expliquer ses pensées
Même si vous ne connaissez pas la réponse, raisonnez à voix haute. Les recruteurs apprécient le processus de réflexion, pas seulement la réponse finale.
Bonne chance pour l'entretien ! 🚀 Et rappelez-vous : chaque entretien est une expérience. Même si vous n'avez pas réussi, vous avez appris ce qu'il faut étudier ensuite.