Junior Frontend Developer Interview Questions: React, Tools & Advanced Topics

Introduction

This comprehensive guide contains 21 carefully selected interview questions covering advanced frontend development topics: React and frameworks, build tools and version control, performance optimization, debugging, accessibility, testing, and soft skills. These are the questions that junior frontend developers actually encounter in 2024-2025 interviews. Each question includes a thorough answer, rarity assessment, and difficulty rating based on analysis of hundreds of real interviews from major tech companies and startups.

This is Part 2 of our complete interview guide. For fundamentals on HTML, CSS, and JavaScript, check out Part 1: HTML, CSS & JavaScript Fundamentals.

React & Frameworks (8 Questions)

33. What is JSX and why do we use it in React?

Answer: JSX (JavaScript XML) is a syntax extension for JavaScript that looks similar to HTML and is used to describe UI structure in React.

Example:

const element = <h1 className="title">Hello, {name}!</h1>;

// Gets compiled to:
const element = React.createElement(
  'h1',
  { className: 'title' },
  'Hello, ',
  name,
  '!'
);

Benefits:

• More readable and intuitive than React.createElement()
• Looks like HTML but with full JavaScript power
• Supports expressions inside curly braces {}
• Type-safe when using TypeScript
• Familiar syntax for developers

Key differences from HTML:

• Use className instead of class
• Use htmlFor instead of for
• All attributes are camelCase (onClick, onChange)
• Must close all tags (including <img />, <br />)

Rarity: Common
Difficulty: Easy

34. Explain the difference between props and state in React

Answer:

Props (Properties):

• Data passed FROM parent TO child components
• Read-only (immutable from child's perspective)
• Used for component configuration
• Changes come from parent re-rendering

// Parent
function Parent() {
  return <Child name="Alice" age={25} />;
}

// Child
function Child({ name, age }) {
  return <p>{name} is {age} years old</p>;
  // Cannot modify name or age
}

State:

• Data managed WITHIN a component
• Mutable (can be changed with setter function)
• Changes trigger re-renders
• Private to the component

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

Key difference: Props flow down (parent to child), state is local to component.

Rarity: Common
Difficulty: Easy

35. What is the useState hook and how do you use it?

Answer: useState is a React Hook that adds state management to functional components.

Syntax:

const [stateVariable, setStateFunction] = useState(initialValue);

Examples:

// Simple counter
function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}

// Object state
function Form() {
  const [user, setUser] = useState({ name: '', email: '' });
  
  const handleChange = (e) => {
    setUser({
      ...user,
      [e.target.name]: e.target.value
    });
  };
  
  return (
    <input name="name" value={user.name} onChange={handleChange} />
  );
}

// Lazy initialization (expensive computation)
const [data, setData] = useState(() => {
  return expensiveComputation();
});

Key points:

• State updates trigger re-renders
• State updates are asynchronous
• Use functional updates for state based on previous state: setCount(prev => prev + 1)

Rarity: Common
Difficulty: Easy-Medium

36. What does the useEffect hook do? Explain the dependency array.

Answer: useEffect runs side effects after render (data fetching, subscriptions, DOM manipulation).

Syntax:

useEffect(() => {
  // Side effect code here
  
  return () => {
    // Cleanup (optional)
  };
}, [dependencies]);

Dependency array behavior:

// 1. No dependency array - runs after EVERY render
useEffect(() => {
  console.log('Runs every render');
});

// 2. Empty array [] - runs ONCE on mount
useEffect(() => {
  console.log('Runs only on mount');
  fetchData();
}, []);

// 3. With dependencies - runs when dependencies change
useEffect(() => {
  console.log('Runs when count changes');
  document.title = `Count: ${count}`;
}, [count]);

Common use cases:

// Fetching data
useEffect(() => {
  fetch('/api/users')
    .then(res => res.json())
    .then(data => setUsers(data));
}, []);

// Event listeners (with cleanup)
useEffect(() => {
  const handleResize = () => setWidth(window.innerWidth);
  window.addEventListener('resize', handleResize);
  
  return () => window.removeEventListener('resize', handleResize);
}, []);

Rarity: Common
Difficulty: Medium

37. How do you render a list of items in React? Why do we need keys?

Answer:

Rendering lists:

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>
          {todo.text}
        </li>
      ))}
    </ul>
  );
}

Why keys are important: Keys help React identify which items have changed, been added, or removed. They enable efficient updates by:

• Minimizing DOM manipulation
• Preserving component state
• Maintaining proper element identity
• Optimizing reconciliation algorithm

Key guidelines:

// GOOD - Unique, stable IDs
items.map(item => <Item key={item.id} {...item} />)

// BAD - Array index (unstable when list changes)
items.map((item, index) => <Item key={index} {...item} />)

// BAD - Non-unique keys cause bugs
items.map(item => <Item key={item.category} {...item} />)

When index is acceptable: Static lists that never reorder or change.

Rarity: Common
Difficulty: Easy-Medium

38. What is the Virtual DOM and why does React use it?

Answer: The Virtual DOM is a lightweight JavaScript representation of the actual DOM that React maintains in memory.

How it works:

1. Render: React creates Virtual DOM tree when state changes
2. Diff: React compares new Virtual DOM with previous version (reconciliation)
3. Update: React calculates minimal changes needed
4. Patch: React updates only changed parts of real DOM

Why it's beneficial:

• Performance: Direct DOM manipulation is slow; React batches and minimizes updates
• Efficiency: Only updates changed elements, not entire tree
• Developer experience: Write declarative code, React handles efficient updates
• Abstraction: Same code can target different platforms (React Native, VR)

Example:

// You write:
<div>{count}</div>

// When count changes from 0 to 1:
// React only updates the text node, not the entire div

Note: Modern React (Fiber architecture) doesn't literally diff two Virtual DOMs but uses a similar concept with Fiber nodes.

Rarity: Common
Difficulty: Medium

39. How do you handle forms in React?

Answer:

Controlled components (recommended): Form element values are controlled by React state.

function LoginForm() {
  const [formData, setFormData] = useState({
    email: '',
    password: ''
  });
  
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };
  
  const handleSubmit = (e) => {
    e.preventDefault();  // Prevent page reload
    console.log('Submitted:', formData);
    // API call here
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input
        name="email"
        value={formData.email}
        onChange={handleChange}
        type="email"
      />
      <input
        name="password"
        value={formData.password}
        onChange={handleChange}
        type="password"
      />
      <button type="submit">Login</button>
    </form>
  );
}

Uncontrolled components (less common): Use refs to access DOM values directly.

function UncontrolledForm() {
  const emailRef = useRef();
  
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(emailRef.current.value);
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input ref={emailRef} type="email" />
    </form>
  );
}

Best practice: Use controlled components for most cases.

Rarity: Common
Difficulty: Medium

40. What is the difference between functional and class components?

Answer:

Functional Components (Modern, preferred):

function Welcome({ name }) {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    // Side effects
  }, []);
  
  return <h1>Hello, {name}!</h1>;
}

Class Components (Legacy):

class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  
  componentDidMount() {
    // Side effects
  }
  
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

Key differences:

• Syntax: Functions vs classes
• State: Hooks (useState) vs this.state
• Lifecycle: Hooks (useEffect) vs lifecycle methods
• this keyword: Not needed in functional components
• Boilerplate: Less code in functional components
• Performance: Slightly better with functional components

Modern standard: Functional components with Hooks are now the recommended approach (since React 16.8). Class components still work but are considered legacy.

Rarity: Common
Difficulty: Easy-Medium

Build Tools & Version Control (5 Questions)

41. What is npm and what is package.json used for?

Answer: npm (Node Package Manager) is the default package manager for JavaScript, used to install, manage, and share code packages.

package.json is the manifest file that contains:

• Metadata: Project name, version, description, author
• Dependencies: Packages needed for production (dependencies)
• DevDependencies: Packages needed only for development (devDependencies)
• Scripts: Commands for common tasks (start, build, test)

Example package.json:

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "eslint": "^8.0.0"
  }
}

Common commands:

• npm install - Install all dependencies
• npm install package-name - Install specific package
• npm install --save-dev package-name - Install as dev dependency
• npm run script-name - Run npm script
• npm update - Update packages

Rarity: Common
Difficulty: Easy

42. What is Git and why do teams use it?

Answer: Git is a distributed version control system that tracks changes in code over time.

Why teams use Git:

• Collaboration: Multiple developers work on same codebase without conflicts
• History: Complete record of all changes (who, what, when, why)
• Branching: Work on features independently without affecting main code
• Backup: Code stored in multiple locations (local + remote)
• Rollback: Easily revert to previous working versions
• Code review: Review changes before merging (pull requests)
• Experimentation: Try new ideas in branches without risk

Basic concepts:

• Repository (repo): Project folder tracked by Git
• Commit: Snapshot of changes with message
• Branch: Independent line of development
• Merge: Combine changes from different branches
• Remote: Repository hosted online (GitHub, GitLab)

Industry standard: 93%+ of developers use Git worldwide.

Rarity: Common
Difficulty: Easy

43. Explain common Git commands and workflow

Answer:

Basic workflow:

# Clone repository
git clone https://github.com/user/repo.git

# Check status
git status

# Create new branch
git checkout -b feature-name
# or modern syntax:
git switch -c feature-name

# Make changes, then stage
git add file.js
git add .  # Stage all changes

# Commit with message
git commit -m "Add login feature"

# Push to remote
git push origin feature-name

# Pull latest changes
git pull origin main

# Merge branch
git checkout main
git merge feature-name

# View history
git log

Essential commands juniors must know:

• clone - Copy remote repository
• add - Stage changes
• commit - Save snapshot with message
• push - Upload to remote
• pull - Download + merge remote changes
• branch - List/create branches
• checkout/switch - Switch branches
• status - See current state
• log - View commit history

Rarity: Common
Difficulty: Easy-Medium

44. What is a merge conflict and how would you resolve one?

Answer: A merge conflict occurs when Git cannot automatically merge changes because competing modifications exist on the same lines of code.

Common scenario:

# Developer A changes line 5
# Developer B also changes line 5
# When merging, Git doesn't know which to keep

Conflict markers:

<<<<<<< HEAD
const greeting = "Hello";
=======
const greeting = "Hi";
>>>>>>> feature-branch

Resolution steps:

1. Identify conflicts: Git marks files with conflicts
2. Open conflicted files: Look for conflict markers
3. Decide what to keep: Review both changes
4. Edit the code: Remove markers, keep desired code
5. Test: Ensure code works correctly
6. Stage resolved files: git add file.js
7. Complete merge: git commit

Best practices:

• Communicate with team
• Pull frequently to minimize conflicts
• Keep commits small and focused
• Test thoroughly after resolving

Rarity: Common
Difficulty: Medium

45. What does Webpack do? What is Vite?

Answer:

Webpack: A module bundler that takes JavaScript, CSS, images, and other assets, processes them, and bundles them into optimized files for the browser.

What it does:

• Bundles multiple files into fewer files
• Transforms code (Babel for JSX/ES6, Sass to CSS)
• Optimizes for production (minification, tree shaking)
• Handles dependencies
• Code splitting for performance

Basic concept:

src/
  index.js
  component.js
  styles.css
          ↓ Webpack
dist/
  bundle.js (all combined & optimized)

Vite: Modern build tool that's significantly faster than traditional bundlers like Webpack.

Why Vite is faster:

• Uses native ES modules during development (no bundling needed)
• Hot Module Replacement (HMR) is instant
• Only bundles for production
• Better developer experience

When to use:

• Vite: New projects, modern frameworks (React, Vue)
• Webpack: Existing projects, need complex configuration

Rarity: Common
Difficulty: Easy-Medium

Web Performance & Optimization (3 Questions)

46. How would you optimize a website's loading performance?

Answer:

Image optimization:

• Compress images (JPG for photos, PNG for graphics, WebP for both)
• Use appropriate sizes (don't load 4000px image for 300px display)
• Lazy load images below the fold
• Use srcset for responsive images

Code optimization:

• Minify JavaScript, CSS, HTML (remove whitespace, comments)
• Bundle and compress files (gzip or Brotli)
• Remove unused CSS/JS (tree shaking)
• Code splitting (load only needed code per page)

Caching:

• Browser caching with proper cache headers
• Use CDN for static assets
• Service workers for offline capabilities

Loading strategies:

• Critical CSS inline in <head>
• Defer non-critical JavaScript
• Preload important resources
• Reduce HTTP requests

Performance metrics:

• Measure with Lighthouse, PageSpeed Insights
• Target: FCP < 1.8s, LCP < 2.5s, CLS < 0.1

Rarity: Common
Difficulty: Medium

47. What tools would you use to measure website performance?

Answer:

Browser DevTools:

• Chrome DevTools Network tab: Analyze request timing, file sizes, load order
• Performance/Lighthouse tab: Generate performance reports with scores
• Coverage tab: Find unused JavaScript/CSS
• Console: Measure with console.time() and Performance API

Online tools:

• Google PageSpeed Insights: Get performance scores and recommendations
• WebPageTest: Detailed waterfall charts, multiple locations
• GTmetrix: Performance analysis with grades

Metrics to monitor:

• First Contentful Paint (FCP): When first content appears
• Largest Contentful Paint (LCP): When main content loads
• Time to Interactive (TTI): When page becomes interactive
• Cumulative Layout Shift (CLS): Visual stability
• Total Blocking Time (TBT): Main thread blocking time

For juniors: Basic familiarity with Chrome DevTools and Lighthouse is sufficient. Deep profiling skills not expected.

Rarity: Common
Difficulty: Easy-Medium

48. What is lazy loading and when would you use it?

Answer: Lazy loading defers loading of non-critical resources until they're needed, typically when they're about to enter the viewport.

Common use cases:

Images:

<img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="Description">

Native lazy loading (modern browsers):

<img src="image.jpg" loading="lazy" alt="Description">

JavaScript/React:

// Component lazy loading
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

Benefits:

• Faster initial page load
• Reduced bandwidth usage
• Better performance on slow connections
• Improved user experience (content appears faster)

When to use:

• Images below the fold
• Heavy components not immediately visible
• Content in tabs/accordions
• Infinite scroll implementations

Rarity: Uncommon
Difficulty: Medium

Debugging & Developer Tools (2 Questions)

49. How do you debug a JavaScript error in the browser?

Answer:

Step-by-step debugging process:

1. Check the Console:

console.log(variable);      // Inspect values
console.error('Error:', error);  // Log errors
console.table(arrayOfObjects);   // View data in table
console.warn('Warning');    // Highlight warnings

2. Use Breakpoints:

• Open DevTools Sources/Debugger panel
• Click line number to set breakpoint
• Code execution pauses at breakpoint
• Inspect variables in Scope panel
• Step through code (Step Over, Step Into, Step Out)

3. Examine the Stack Trace:

• Error messages show file names and line numbers
• Follow the call stack to find error origin
• Check network errors in Network tab

4. Debug DOM issues:

• Inspect elements in Elements panel
• Check computed styles
• Use :hover state forcing
• Verify event listeners attached

5. Check Network Requests:

• Network tab shows failed API calls
• Examine request/response headers
• Check status codes (404, 500, etc.)

Common debugging techniques:

• Add debugger; statement to pause execution
• Use conditional breakpoints
• Watch expressions
• Black box third-party code

Rarity: Common
Difficulty: Easy-Medium

50. What are the main panels in Chrome DevTools and what do you use them for?

Answer:

Essential panels:

1. Console:

• View JavaScript errors and logs
• Execute JavaScript commands
• Test expressions interactively
• API testing

2. Elements (Inspector):

• Inspect and modify HTML structure
• Edit CSS in real-time
• Debug layout issues
• View computed styles, box model
• Test responsive designs

3. Sources (Debugger):

• View source files
• Set breakpoints
• Step through code execution
• Edit and save changes (workspaces)
• View call stack

4. Network:

• Monitor HTTP requests/responses
• Check load times and file sizes
• Debug API calls
• Filter by type (JS, CSS, XHR, images)
• Throttle network speed

5. Performance/Lighthouse:

• Analyze runtime performance
• Generate performance audits
• Identify bottlenecks
• Check Core Web Vitals

6. Application:

• Inspect local storage, session storage
• View and clear cookies
• Check service workers
• Manage cache

For juniors: Strong familiarity with Console, Elements, Sources, and Network is expected. Performance profiling is a plus.

Rarity: Common
Difficulty: Easy

Accessibility & Best Practices (2 Questions)

51. What is web accessibility and why is it important?

Answer: Web accessibility means designing and developing websites that can be used by everyone, including people with disabilities (visual, auditory, motor, cognitive).

Why it's important:

1. Inclusive design: 15% of world population has some form of disability 2. Legal requirements: ADA (Americans with Disabilities Act), Section 508, WCAG compliance 3. Better UX for everyone: Captions help in noisy environments, keyboard navigation helps power users 4. SEO benefits: Semantic HTML and proper structure improve search rankings 5. Larger audience: Don't exclude potential users/customers 6. Ethical responsibility: Equal access is a human right

Common disabilities to consider:

• Visual: Blindness, low vision, color blindness
• Auditory: Deafness, hearing loss
• Motor: Limited mobility, tremors, paralysis
• Cognitive: Learning disabilities, memory issues

Business case: Accessible websites reach more users, rank better in search, avoid lawsuits, demonstrate corporate responsibility.

Rarity: Common
Difficulty: Easy-Medium

52. What are some basic ways to make a website more accessible?

Answer:

HTML structure:

• Use semantic elements (<header>, <nav>, <main>, <article>, <footer>)
• Proper heading hierarchy (H1 → H2 → H3, no skipping)
• Label form inputs properly

<label for="email">Email:</label>
<input id="email" type="email" name="email" />

Images:

• Always include descriptive alt text
• Use empty alt for decorative images: alt=""

Keyboard navigation:

• All interactive elements should be keyboard accessible
• Logical tab order
• Visible focus indicators
• Don't remove :focus outline

Color and contrast:

• Sufficient color contrast (4.5:1 for normal text, 3:1 for large text)
• Don't rely solely on color to convey information
• Test with color blindness simulators

ARIA attributes (when needed):

<button aria-label="Close dialog">×</button>
<div role="alert" aria-live="polite">Changes saved</div>
<nav aria-label="Main navigation">...</nav>

Testing:

• Use screen readers (VoiceOver, NVDA, JAWS)
• Keyboard-only navigation
• Browser accessibility tools (Lighthouse, axe)

Rarity: Common
Difficulty: Medium

Testing Awareness (1 Question)

53. What is unit testing and why is it important?

Answer: Unit testing involves testing individual functions or components in isolation to verify they work correctly.

What it tests:

• Does function return expected output for given input?
• Does component render correctly with given props?
• Do edge cases work properly?

Example (Jest):

// Function to test
function add(a, b) {
  return a + b;
}

// Unit test
test('adds 1 + 2 to equal 3', () => {
  expect(add(1, 2)).toBe(3);
});

test('handles negative numbers', () => {
  expect(add(-1, -2)).toBe(-3);
});

Why it's important:

• Catches bugs early: Find issues before production
• Confidence in changes: Refactor without fear
• Documentation: Tests show how code should be used
• Faster debugging: Pinpoint exact failure location
• Better design: Testable code is usually cleaner code

Testing pyramid:

• Many unit tests (fast, cheap)
• Fewer integration tests (test components together)
• Few end-to-end tests (full user flows, slow)

For juniors: Understanding why testing matters and basic concepts is sufficient. Writing comprehensive test suites is not typically expected for entry-level positions, but willingness to learn testing is important.

Common frameworks: Jest, React Testing Library, Mocha, Jasmine

Rarity: Common
Difficulty: Easy-Medium

Total: 21 questions

This collection represents the advanced topics and tools that junior frontend developers encounter in interviews. Combined with Part 1: HTML, CSS & JavaScript Fundamentals, you'll have complete coverage of 55 essential interview questions for 2024-2025.