Top 100 UI Developer

Interview Questions (React +

JavaScript) with Practice
Links
Section 1: JavaScript (40 Questions)
1. What are the differences between var, let, and const?
2. Explain closures in JavaScript with an example.
3. What is the difference between == and ===?
4. Explain the concept of hoisting in JavaScript.
5. What are arrow functions and how do they differ from regular functions?
6. Explain event delegation in JavaScript.
7. What is the difference between null and undefined?
8. Explain the difference between synchronous and asynchronous JavaScript.
9. How does the JavaScript event loop work?
10. What are promises in JavaScript? How do they work?
11. Explain async/await in JavaScript with an example.
12. What is the difference between call, apply, and bind?
13. Explain the concept of prototype in JavaScript.
14. What are higher-order functions in JavaScript?
15. Explain the difference between map(), forEach(), and filter().
16. How does this keyword work in JavaScript?
17. What are JavaScript modules and how do you use them?
18. Explain the difference between shallow copy and deep copy in JavaScript.
19. What is the difference between localStorage, sessionStorage, and cookies?
20. How does garbage collection work in JavaScript?
21. Explain the concept of debouncing and throttling.
22. What is the difference between innerHTML and textContent?
23. How do you handle errors in JavaScript?
24. Explain the concept of strict mode in JavaScript.
25. What are JavaScript generators and iterators?
26. What is an Immediately Invoked Function Expression (IIFE)?
27. Explain the difference between setTimeout and setInterval.
28. How do you prevent event bubbling?
29. Explain the concept of event capturing and bubbling.
30. What is the difference between a shallow copy and deep copy in arrays?
31. What are JavaScript symbols?
32. Explain the difference between function declaration and function expression.
33. What is the purpose of Object.freeze() in JavaScript?
34. How do you clone an object in JavaScript?
35. Explain Array.reduce() with an example.
36. How does the async attribute work in script tags?
37. What is the difference between JSON and JavaScript objects?
38. How do you handle memory leaks in JavaScript?
39. Explain the difference between ES5 and ES6.
40. What are template literals in JavaScript?

Practice Links
JavaScript Basics (https://www.w3schools.com/js/)
MDN JavaScript Guide (https://developer.mozilla.org/en-US/docs/Web/JavaScript)
JavaScript Exercises (https://www.jshero.net/en/exercises/)

Section 2: React.js (40 Questions)

1. What is React and why is it used?
2. Explain the concept of Virtual DOM in React.
3. What are React components?
4. Explain the difference between class components and functional components.
5. What are React hooks? Name some commonly used hooks.
6. Explain useState and useEffect hooks with examples.
7. What is the difference between controlled and uncontrolled components?
8. Explain the concept of lifting state up in React.
9. What are React props?
10. What is prop drilling and how do you avoid it?
11. What is the difference between state and props?
12. Explain the useReducer hook in React.
13. What are React fragments and why are they used?
14. Explain the concept of context API in React.
15. How does React handle forms?
16. Explain React's component lifecycle methods.
17. What is the difference between useMemo and useCallback?
18. Explain the concept of React portals.
19. What is code splitting in React?
20. Explain lazy loading in React.
21. What are error boundaries in React?
22. Explain React's reconciliation process.
23. What is React's key prop and why is it important?
24. How do you optimize React app performance?
25. Explain the difference between React Router and traditional navigation.
26. What is the use of useRef hook?
27. How do you handle side effects in React?
28. Explain the concept of custom hooks.
29. How do you perform API calls in React?
30. What is the difference between SSR and CSR?
31. Explain the use of Redux in React applications.
32. What are Redux middlewares?
33. How do you manage global state in React without Redux?
34. Explain the concept of hydration in React.
35. What is Next.js and why is it used with React?
36. How do you implement authentication in React?
37. What is React's StrictMode?
38. How do you prevent unnecessary re-renders in React?
39. Explain how React handles events differently from vanilla JavaScript.
40. What is the difference between useLayoutEffect and useEffect?

Practice Links
React Official Docs (https://react.dev/)
FreeCodeCamp React (https://www.freecodecamp.org/learn/front-end-development-libraries/react/)
React Exercises (https://www.w3schools.com/react/)

Section 3: HTML & CSS (20 Questions)

1. What is the difference between inline, block, and inline-block elements?
2. Explain semantic HTML and its importance.
3. What are HTML5 new features?
4. How do you make a website responsive?
5. Explain the difference between relative, absolute, fixed, and sticky positioning.
6. What is the difference between inline CSS, internal CSS, and external CSS?
7. Explain the concept of CSS specificity.
8. What are CSS pseudo-classes and pseudo-elements?
9. How do you center a div using CSS?
10. What is the difference between em, rem, px, and % units?
11. How do you optimize CSS for better performance?
12. Explain CSS Grid vs Flexbox.
13. What are media queries and why are they important?
14. Explain the concept of z-index in CSS.
15. How do you create animations using CSS?
16. What is the difference between relative and absolute units?
17. Explain the difference between inline styles and CSS classes.
18. What are CSS variables and how are they used?
19. Explain the difference between min-width and max-width.
20. How do you implement dark mode using CSS?

Practice Links
HTML Tutorial (https://www.w3schools.com/html/)
CSS Tutorial (https://www.w3schools.com/css/)
Flexbox Guide (https://css-tricks.com/snippets/css/a-guide-to-flexbox/)