

This is part 2 of the Interview series. See also [Part 1: CSS, HTML & Accessibility](/blog/interview-questions-part-1) and [Part 3: React](/blog/interview-questions-react).

## Core JavaScript Concepts

###accordion: What is an IIFE and why are they used?

An IIFE (Immediately Invoked Function Expression) is a function that runs as soon as it's defined:

```javascript
// Traditional IIFE
(function() {
  console.log("This runs immediately!");
})();

// Arrow function IIFE
(() => {
  console.log("Arrow IIFE too!");
})();

// With parameters
((name) => {
  console.log(`Hello, ${name}!`);
})("World");
```

**Why use IIFEs?**
- Create private scope and avoid polluting global namespace
- Execute initialization code immediately
- Module pattern implementation
- Async IIFEs for top-level await in older environments

###accordion: What is Closure?

A closure is a function that has access to variables in its outer (enclosing) scope even after the outer function has returned:

```javascript
function createCounter() {
  let count = 0; // This variable is "closed over"
  
  return function() {
    count++; // Still has access to count
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

// Practical example: private variables
function createBankAccount(initialBalance) {
  let balance = initialBalance;
  
  return {
    deposit: (amount) => {
      balance += amount;
      return balance;
    },
    withdraw: (amount) => {
      if (amount <= balance) {
        balance -= amount;
        return balance;
      }
      return "Insufficient funds";
    },
    getBalance: () => balance
  };
}
```

###accordion: Difference between var and let

**Scope:**
- `var` - Function scoped
- `let` - Block scoped (curly braces)

**Hoisting:**
- `var` - Hoisted with undefined initial value
- `let` - Hoisted but not initialized (TDZ)

**Re-declaration:**
- `var` - Can be re-declared
- `let` - Cannot be re-declared in same scope

```javascript
function testVar() {
  if (true) {
    var x = 1;
  }
  console.log(x); // 1 (function scoped)
}

function testLet() {
  if (true) {
    let y = 1;
  }
  console.log(y); // ReferenceError (block scoped)
}
```

###accordion: Difference between map, filter and reduce

**map:** Transforms each element, returns new array of same length

```javascript
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(x => x * 2); // [2, 4, 6, 8]
```

**filter:** Returns elements that pass a condition

```javascript
const numbers = [1, 2, 3, 4, 5, 6];
const evens = numbers.filter(x => x % 2 === 0); // [2, 4, 6]
```

**reduce:** Reduces array to single value

```javascript
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, x) => acc + x, 0); // 10

// Group by category
const people = [
  { name: 'Alice', age: 25, department: 'Engineering' },
  { name: 'Bob', age: 30, department: 'Engineering' },
  { name: 'Charlie', age: 35, department: 'Sales' }
];

const byDepartment = people.reduce((acc, person) => {
  const dept = person.department;
  if (!acc[dept]) acc[dept] = [];
  acc[dept].push(person);
  return acc;
}, {});
```

## Asynchronous JavaScript

###accordion: What are Promises?

A Promise represents the eventual completion (or failure) of an asynchronous operation:

```javascript
// Creating a promise
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true;
      if (success) {
        resolve({ data: "Some data", timestamp: Date.now() });
      } else {
        reject(new Error("Failed to fetch data"));
      }
    }, 1000);
  });
};

// Using promises
fetchData()
  .then(result => {
    console.log("Success:", result);
    return result.data;
  })
  .then(data => {
    console.log("Processed:", data);
  })
  .catch(error => {
    console.error("Error:", error.message);
  })
  .finally(() => {
    console.log("Cleanup");
  });

// Promise methods
Promise.all([fetchData(), fetchData()])
  .then(results => console.log("All done", results));

Promise.race([fetchData(), timeout(500)])
  .then(result => console.log("First completed", result));
```

###accordion: Async/Await

Syntactic sugar for working with promises:

```javascript
// Async function
async function fetchUserData(userId) {
  try {
    const response = await fetch(`/api/users/${userId}`);
    const user = await response.json();
    
    const posts = await fetch(`/api/users/${userId}/posts`);
    const userPosts = await posts.json();
    
    return { user, posts: userPosts };
  } catch (error) {
    console.error("Failed to fetch user data:", error);
    throw error;
  }
}

// Using async/await
const userData = await fetchUserData(123);

// Parallel execution with Promise.all
async function fetchMultipleUsers(userIds) {
  const promises = userIds.map(id => fetchUserData(id));
  const results = await Promise.all(promises);
  return results;
}

// Error handling
async function example() {
  try {
    await riskyOperation();
  } catch (error) {
    // Handle error
  } finally {
    // Always runs
  }
}
```

## JavaScript Fundamentals

###accordion: What's the difference between null, undefined or undeclared?

**undefined:** Variable declared but not assigned

```javascript
let x;
console.log(x); // undefined
console.log(typeof x); // "undefined"
```

**null:** Explicit absence of value

```javascript
let y = null;
console.log(y); // null
console.log(typeof y); // "object" (JavaScript bug)
```

**undeclared:** Variable never declared

```javascript
console.log(z); // ReferenceError: z is not defined
```

**Best practices:**
- Use `undefined` for "no value yet"
- Use `null` for "intentionally empty"
- Always declare variables to avoid undeclared errors

###accordion: What is the 'this' keyword and how is it used?

`this` refers to the execution context:

```javascript
// Global context
console.log(this); // Window object (in browser)

// Function context
function showThis() {
  console.log(this);
}
showThis(); // Window (non-strict) or undefined (strict)

// Method context
const obj = {
  name: "Object",
  showThis() {
    console.log(this.name); // "Object"
  }
};

// Constructor context
function Person(name) {
  this.name = name; // Refers to new instance
}

// Arrow function context
const arrowObj = {
  name: "Object",
  showThis: () => {
    console.log(this.name); // undefined (inherits from outer scope)
  }
};

// Explicit binding
const person = { name: "John" };
function greet() {
  console.log(`Hello, ${this.name}!`);
}
greet.call(person); // "Hello, John!"
greet.apply(person); // "Hello, John!"
const boundGreet = greet.bind(person);
boundGreet(); // "Hello, John!"
```

## Coding Challenges

###accordion: Write function that checks if the number is prime

```javascript
function isPrime(n) {
  // Handle edge cases
  if (n <= 1) return false;
  if (n <= 3) return true;
  if (n % 2 === 0 || n % 3 === 0) return false;
  
  // Check divisors up to sqrt(n)
  for (let i = 5; i * i <= n; i += 6) {
    if (n % i === 0 || n % (i + 2) === 0) {
      return false;
    }
  }
  
  return true;
}

// Test cases
console.log(isPrime(2));   // true
console.log(isPrime(17));  // true
console.log(isPrime(25));  // false
console.log(isPrime(97));  // true

// Optimized version with memoization
const isPrimeMemo = (() => {
  const cache = new Map();
  
  return (n) => {
    if (cache.has(n)) return cache.get(n);
    
    let result;
    if (n <= 1) result = false;
    else if (n <= 3) result = true;
    else if (n % 2 === 0 || n % 3 === 0) result = false;
    else {
      result = true;
      for (let i = 5; i * i <= n; i += 6) {
        if (n % i === 0 || n % (i + 2) === 0) {
          result = false;
          break;
        }
      }
    }
    
    cache.set(n, result);
    return result;
  };
})();
```

###accordion: FizzBuzz

```javascript
// Classic FizzBuzz solution
function fizzBuzz(n) {
  const result = [];
  
  for (let i = 1; i <= n; i++) {
    if (i % 15 === 0) {
      result.push("FizzBuzz");
    } else if (i % 3 === 0) {
      result.push("Fizz");
    } else if (i % 5 === 0) {
      result.push("Buzz");
    } else {
      result.push(i.toString());
    }
  }
  
  return result;
}

// Functional approach
const fizzBuzzFunctional = (n) => 
  Array.from({ length: n }, (_, i) => i + 1)
    .map(num => {
      const fizz = num % 3 === 0 ? "Fizz" : "";
      const buzz = num % 5 === 0 ? "Buzz" : "";
      return fizz + buzz || num.toString();
    });

// One-liner (for interviews)
const fizzBuzzOneLiner = (n) => 
  [...Array(n).keys()].map(i => {
    i++;
    return (i % 15 ? i % 3 ? i % 5 ? i : "Buzz" : "Fizz" : "FizzBuzz");
  });

// Test
console.log(fizzBuzz(15));
// ["1", "2", "Fizz", "4", "Buzz", "Fizz", "7", "8", "Fizz", "Buzz", "11", "Fizz", "13", "14", "FizzBuzz"]
```

## Additional JavaScript Topics

### List ES6 features

- Arrow functions
- Template literals
- Destructuring assignment
- Default parameters
- Rest and spread operators
- Let and const
- Classes
- Modules (import/export)
- Promises
- Symbol type
- Iterators and generators
- Map and Set data structures

### List JavaScript data types

**Primitive types:**
- Number
- String
- Boolean
- Undefined
- Null
- Symbol (ES6)
- BigInt (ES2020)

**Reference types:**
- Object
- Array
- Function
- Date
- RegExp
- Map, Set, WeakMap, WeakSet

### How JavaScript's runtime works? Describe an event loop mechanism

JavaScript runs on a single-threaded event loop:

1. **Call Stack:** Executes synchronous code
2. **Heap:** Memory allocation for objects
3. **Web APIs:** Browser APIs for async operations
4. **Callback Queue:** Queues callbacks from async operations
5. **Event Loop:** Moves callbacks from queue to stack when stack is empty

**How many threads does JavaScript have?**
- **Main thread:** 1 (single-threaded)
- **Web Workers:** Multiple additional threads for background processing

### What are Web Workers?

Web Workers allow running JavaScript in background threads:

```javascript
// main.js
const worker = new Worker('worker.js');
worker.postMessage('Hello from main');
worker.onmessage = function(e) {
  console.log('Message from worker:', e.data);
};

// worker.js
self.onmessage = function(e) {
  console.log('Message from main:', e.data);
  self.postMessage('Hello from worker');
};
```

**Benefits:**
- Run heavy computations without blocking UI
- True parallel processing
- Separate memory space

**Limitations:**
- No direct DOM access
- Limited access to Web APIs
- Communication via message passing

## Summary

This is part 2 of the Interview series. Continue with [Part 1: CSS, HTML & Accessibility](/blog/interview-questions-part-1) and [Part 3: React](/blog/interview-questions-react). You may also find [Popular Acronyms](/blog/popular-acronyms) useful for interview preparation.
## Revers string

## Useful link and resources

You may also find [Popular Acronyms](/blog/popular-acronyms) helpful — knowing YAGNI, KISS, DRY and SOLID comes up in interviews too.


Interview questions part 2: JavaScript



This is part 1 of the Interview series. See also [Part 2: JavaScript](/blog/interview-questions-javascript) and [Part 3: React](/blog/interview-questions-react).

## General Questions

###accordion: Tell me about your past/current role - what do you do?

I'm a frontend developer with X years of experience building responsive, accessible web applications. My role involves:

- Developing user interfaces using modern JavaScript frameworks like React/Vue
- Writing clean, maintainable CSS with methodologies like BEM or CSS-in-JS
- Ensuring cross-browser compatibility and accessibility compliance
- Collaborating with designers and backend developers to implement features
- Optimizing application performance and user experience
- Participating in code reviews and mentoring junior developers

###accordion: What is the typical workflow from the point you get a task to its completion?

My typical workflow follows these steps:

1. **Requirements Analysis:** Review task specifications and clarify any ambiguities with the product owner/designer
2. **Technical Planning:** Break down the task into smaller components, estimate effort, and identify potential challenges
3. **Environment Setup:** Create feature branch, set up local development environment
4. **Implementation:** Write code following best practices, including unit tests
5. **Self-Review:** Test the implementation, check for edge cases, ensure code quality
6. **Code Review:** Submit pull request and address feedback from team members
7. **Integration Testing:** Test in staging environment, ensure no regressions
8. **Deployment:** Merge to main branch and deploy to production
9. **Monitoring:** Monitor the feature post-deployment for any issues

###accordion: What tools and techniques do you use?

I use a variety of tools and techniques:

**Development Tools:**
- VS Code with extensions for ESLint, Prettier, GitLens
- Chrome DevTools for debugging and performance analysis
- Postman/Insomnia for API testing
- Figma for design collaboration

**Version Control:**
- Git with feature branch workflow
- Conventional commits for better commit history
- GitHub/GitLab for code review and CI/CD

**Performance Tools:**
- Lighthouse for performance auditing
- WebPageTest for detailed performance analysis
- Bundle analyzers for optimization

## HTML/CSS questions

###accordion: How we can optimize site loading time?

Site optimization involves multiple strategies:

**Network Optimization:**
- Enable HTTP/2 or HTTP/3 for multiplexing
- Use CDN for static assets
- Implement resource hints (preload, prefetch, preconnect)
- Minimize HTTP requests with bundling

**Asset Optimization:**
- Compress images (WebP format, responsive images)
- Minify CSS, JavaScript, and HTML
- Use lazy loading for images and components
- Implement service workers for caching

**Code Optimization:**
- Code splitting and tree shaking
- Remove unused CSS and JavaScript
- Optimize critical rendering path
- Use modern JavaScript features for better performance

###accordion: What units do you use px, em, or rem?

I use different units based on context:

**rem (root em):** My preferred unit for most sizing
- Consistent sizing relative to root font size
- Better accessibility (respects user's font size preferences)
- Easier to maintain consistent scale

**em:** Used when sizing needs to be relative to parent
- Components that should scale with their container
- Typography within specific contexts

**px:** Used sparingly for specific cases
- Border widths that shouldn't scale
- Pixel-perfect design requirements
- Media query breakpoints

**Viewport units (vw, vh):** For responsive layouts
- Full-width sections (100vw)
- Viewport-based typography

###accordion: What is the 'Box Model' in CSS?

The CSS Box Model describes how elements are rendered as rectangular boxes:

**Components (from inside out):**
1. **Content:** The actual content (text, images)
2. **Padding:** Space between content and border
3. **Border:** Goes around padding and content
4. **Margin:** Space outside the border (collapses with other margins)

**Box-Sizing Property:**

```css
/* Default: content-box */
.box-sizing-content {
  width: 200px; /* Only content width */
  padding: 20px; /* Adds to total width */
  border: 2px solid black; /* Adds to total width */
  /* Total width: 244px */
}

/* Modern: border-box */
.box-sizing-border {
  width: 200px; /* Includes padding and border */
  padding: 20px;
  border: 2px solid black;
  /* Total width: 200px */
}
```

###accordion: What's the difference between "resetting" and "normalizing" CSS?

**CSS Reset:**
- Removes all default styling from elements
- Creates a blank slate across all browsers
- Example: Eric Meyer's CSS Reset
- Pros: Complete control, consistent starting point
- Cons: Must re-style everything, can remove useful defaults

**CSS Normalize:**
- Makes browsers render elements consistently
- Preserves useful defaults while fixing inconsistencies
- Example: normalize.css
- Pros: Better accessibility, less work to restore defaults
- Cons: Some inconsistencies may remain

**My Choice:** I prefer normalize.css because it maintains useful browser defaults (like form styling) while ensuring consistency across browsers.

###accordion: How do you organise your CSS - Namespace patterns?

I use several organization strategies:

**BEM (Block Element Modifier):**
```css
.card { }
.card__header { }
.card__header--highlighted { }
```

**CSS Modules:**
- Scoped class names to avoid conflicts
- Component-based organization
- Clear dependency relationships

**Utility-First (Tailwind):**
- Consistent design system
- Rapid development
- Smaller CSS bundle through purging

**File Structure:**
```
styles/
  components/
    button.css
    card.css
  utilities/
    spacing.css
    colors.css
  base/
    reset.css
    typography.css
```

## Accessibility

###accordion: How can we improve form accessibility?

**Semantic HTML:**

```html
<form>
  <fieldset>
    <legend>Personal Information</legend>
    
    <label for="name">
      Name: <input type="text" id="name" required>
    </label>
    
    <label for="email">
      Email: <input type="email" id="email" required>
    </label>
  </fieldset>
</form>
```

**ARIA Enhancements:**
- Use aria-describedby for additional help text
- Add aria-invalid for validation errors
- Implement aria-live regions for dynamic updates

**Keyboard Navigation:**
- Ensure proper tab order
- Add focus indicators
- Implement keyboard shortcuts

**Error Handling:**
- Associate error messages with inputs
- Provide clear validation feedback
- Use aria-live for real-time validation

###accordion: List some of the Aria roles and explain when would you use them

**Landmark Roles:**
- `role="navigation"` - Main navigation blocks
- `role="main"` - Primary content area
- `role="banner"` - Header/site identity
- `role="contentinfo"` - Footer/copyright info
- `role="search"` - Search functionality

**Widget Roles:**
- `role="button"` - Interactive elements that aren't native buttons
- `role="dialog"` - Modal dialogs and popups
- `role="tablist"`, `role="tab"` - Tab interfaces
- `role="menu"`, `role="menuitem"` - Navigation menus

**Structure Roles:**
- `role="region"` - Related content sections
- `role="group"` - Grouped related controls
- `role="list"`, `role="listitem"` - List semantics

###accordion: How else would you improve site accessibility?

**Performance:**
- Optimize images and media for screen readers
- Ensure keyboard accessibility for all interactive elements
- Provide text alternatives for non-text content

**Navigation:**
- Skip links for keyboard users
- Consistent navigation patterns
- Clear heading structure (h1-h6 hierarchy)

**Content:**
- Use clear, simple language
- Provide transcripts for audio/video content
- Ensure sufficient color contrast (WCAG AA or AAA)

**Testing:**
- Regular accessibility audits
- Screen reader testing
- Keyboard-only navigation testing
- User testing with people with disabilities

## Useful Resources

- [MDN Web Docs](https://developer.mozilla.org/) - Comprehensive web development documentation
- [Web.dev](https://web.dev/) - Modern web development best practices
- [A11y Project](https://www.a11yproject.com/) - Accessibility guidelines and patterns
- [Can I Use](https://caniuse.com/) - Browser compatibility tables

## Summary

This is part 1 of the Interview series. Continue with [Part 2: JavaScript](/blog/interview-questions-javascript) and [Part 3: React](/blog/interview-questions-react). You may also find [Popular Acronyms](/blog/popular-acronyms) useful for interview preparation.


Interview questions part 1 - CSS, HTML & Accessibility



Welcome to 3rd post from the Interview series. If you missed the earlier parts, start with [Part 1: CSS, HTML & Accessibility](/blog/interview-questions-part-1) and [Part 2: JavaScript](/blog/interview-questions-javascript). This time I'd like to focus on questions around React and its ecosystem.

## Core React Concepts

###accordion: What is virtual DOM and how does React use it to render to the DOM?

The Virtual DOM is a JavaScript representation of the real DOM:

```javascript
// Virtual DOM representation (simplified)
const vdom = {
  type: 'div',
  props: { className: 'container' },
  children: [
    { type: 'h1', props: {}, children: ['Hello'] },
    { type: 'p', props: {}, children: ['World'] }
  ]
};
```

**How React uses it:**
1. **Render:** Create Virtual DOM representation
2. **Reconciliation:** Compare new VDOM with previous VDOM
3. **Commit:** Update only changed parts of real DOM

**Benefits:**
- Performance: Batch DOM updates
- Declarative: Describe desired state, React handles updates
- Cross-platform: Same code works for React Native

###accordion: What is JSX?

JSX is a syntax extension for JavaScript that allows HTML-like code in JS:

```javascript
// JSX syntax
const element = <h1 className="greeting">Hello, world!</h1>;

// Compiled to JavaScript
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

// Component with JSX
function Welcome({ name }) {
  return <div>
    <h1>Hello, {name}</h1>
    {name === 'Admin' && <p>Administrator access</p>}
  </div>;
}

// Expressions in JSX
const items = ['Apple', 'Banana', 'Orange'];
const list = <ul>
  {items.map(item => <li key={item}>{item}</li>)}
</ul>;
```

**Key points:**
- Compiles to React.createElement() calls
- Must have one root element (or Fragment)
- Use className instead of class
- JavaScript expressions in curly braces

###accordion: What problems does React solve?

**UI Complexity:**
- Manages complex state changes
- Prevents direct DOM manipulation
- Declarative vs imperative programming

**Performance:**
- Virtual DOM for efficient updates
- Batched DOM operations
- Component-based architecture

**Maintainability:**
- Reusable components
- Clear data flow (props down, events up)
- Separation of concerns

**Ecosystem:**
- Large community and ecosystem
- Extensive tooling support
- Cross-platform (React Native)

###accordion: What are the pros and cons of using React?

**Pros:**
- **Large ecosystem:** Huge community, many libraries
- **Performance:** Virtual DOM, efficient updates
- **Reusable components:** DRY principle
- **Tooling:** Excellent developer tools
- **Job market:** High demand for React developers
- **Flexibility:** Works with various backends and architectures

**Cons:**
- **Learning curve:** JSX, state management, lifecycle
- **Fast-paced:** Frequent updates, deprecations
- **Boilerplate:** Setup can be complex
- **Opinionated:** React way vs vanilla JavaScript
- **Bundle size:** Can be large if not optimized
- **State management:** No built-in solution

## React Components and Styling

###accordion: How do you style components in React?

**1. CSS Modules:**

```css
/* Button.module.css */
.button {
  background: blue;
  color: white;
  padding: 10px;
}
```

```javascript
// Button.js
import styles from './Button.module.css';
function Button() {
  return <button className={styles.button}>Click me</button>;
}
```

**2. Styled Components:**

```javascript
import styled from 'styled-components';

const Button = styled.button`
  background: ${props => props.primary ? 'blue' : 'gray'};
  color: white;
  padding: 10px;
`;

<Button primary>Primary</Button>
```

**3. Tailwind CSS:**

```javascript
function Button({ primary }) {
  return (
    <button className={`px-4 py-2 rounded ${primary ? 'bg-blue-500' : 'bg-gray-500'}`}>
      Click me
    </button>
  );
}
```

**4. Inline Styles:**

```javascript
function Button({ primary }) {
  const style = {
    background: primary ? 'blue' : 'gray',
    color: 'white',
    padding: '10px'
  };
  return <button style={style}>Click me</button>;
}
```

###accordion: What features were introduced in React 16.x?

- **Fragments:** Wrap multiple elements without extra DOM nodes
- **Error Boundaries:** Catch JavaScript errors in component trees
- **Portals:** Render children into different DOM subtree
- **Custom DOM Attributes:** Pass non-standard HTML attributes
- **Improved Server Rendering:** Faster server-side rendering
- **Context API:** Simplified context without Provider/Consumer nesting
- **React.memo:** Pure component memoization
- **Lazy Loading:** Code splitting with React.lazy()
- **Suspense:** Handle async components loading

###accordion: What are Higher Order Components?

HOCs are functions that take a component and return a new component:

```javascript
// HOC that adds logging
function withLogging(WrappedComponent) {
  return function WithLoggingComponent(props) {
    console.log('Rendering:', WrappedComponent.name);
    return <WrappedComponent {...props} />;
  };
}

// HOC that adds data fetching
function withDataFetching(url) {
  return function(WrappedComponent) {
    return functionWithDataFetching(props) {
      const [data, setData] = useState(null);
      const [loading, setLoading] = useState(true);

      useEffect(() => {
        fetch(url)
          .then(res => res.json())
          .then(data => {
            setData(data);
            setLoading(false);
          });
      }, []);

      if (loading) return <div>Loading...</div>;
      return <WrappedComponent data={data} {...props} />;
    };
  };
}

// Usage
const LoggedInButton = withLogging(Button);
const UserListWithData = withDataFetching('/api/users')(UserList);
```

## State Management

###accordion: What's the difference between state and props?

**Props:**
- Read-only data passed from parent to child
- Immutable (cannot be modified by child)
- Flow data down the component tree
- Used for component configuration

**State:**
- Mutable data managed within component
- Can be changed using setState or useState
- Triggers re-renders when updated
- Used for dynamic data and user interactions

```javascript
function UserProfile({ name, age }) { // Props
  const [isEditing, setIsEditing] = useState(false); // State
  
  return (
    <div>
      <h2>{name}, {age}</h2>
      <button onClick={() => setIsEditing(!isEditing)}>
        {isEditing ? 'Save' : 'Edit'}
      </button>
    </div>
  );
}
```

###accordion: State management in React apps: what are the options?

**1. Local State (useState/useReducer):**
- Component-level state
- Simple to implement
- Good for UI-specific state

**2. Context API:**
- Built-in React solution
- Avoids prop drilling
- Good for global state

```javascript
const UserContext = createContext();

function App() {
  const [user, setUser] = useState(null);
  return (
    <UserContext.Provider value={{ user, setUser }}>
      <Layout />
    </UserContext.Provider>
  );
}
```

**3. Redux:**
- Predictable state container
- Great for large applications
- Steep learning curve

**4. Zustand:**
- Lightweight state management
- Simple API
- Good balance of features

**5. Recoil/Jotai:**
- Atomic state management
- Fine-grained reactivity
- Modern approach

###accordion: What is prop drilling and how can you avoid it?

**Prop drilling:** Passing props through multiple levels of components that don't need them:

```javascript
// Prop drilling example
function App() {
  const [user, setUser] = useState(null);
  return <Layout user={user} />;
}

function Layout({ user }) {
  return <Header user={user} />;
}

function Header({ user }) {
  return <UserAvatar user={user} />; // Only Avatar needs user
}

function UserAvatar({ user }) {
  return <img src={user.avatar} alt={user.name} />;
}
```

**Solutions to avoid prop drilling:**

**1. Context API:**
```javascript
const UserContext = createContext();

function App() {
  const [user, setUser] = useState(null);
  return (
    <UserContext.Provider value={{ user, setUser }}>
      <Layout />
    </UserContext.Provider>
  );
}

function UserAvatar() {
  const { user } = useContext(UserContext);
  return <img src={user.avatar} alt={user.name} />;
}
```

**2. State Management (Redux/Zustand):**
```javascript
// Zustand example
import { create } from 'zustand';

const useUserStore = create(set => ({
  user: null,
  setUser: (user) => set({ user })
}));

function UserAvatar() {
  const user = useUserStore(state => state.user);
  return <img src={user.avatar} alt={user.name} />;
}
```

**3. Component Composition:**
```javascript
function App() {
  const [user, setUser] = useState(null);
  return (
    <Layout>
      <Header>
        <UserAvatar user={user} />
      </Header>
    </Layout>
  );
}
```

## React Hooks

###accordion: What are hooks and why are they useful?

Hooks allow using state and lifecycle features in functional components:

```javascript
// useState hook
import { useState } from 'react';

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

// useEffect hook
import { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);
  
  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(s => s + 1);
    }, 1000);
    
    return () => clearInterval(interval); // Cleanup
  }, []);
  
  return <div>Seconds: {seconds}</div>;
}

// Custom hook
function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);
  
  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  const reset = () => setCount(initialValue);
  
  return { count, increment, decrement, reset };
}
```

**Benefits:**
- No need for class components
- Better code organization
- Reusable logic (custom hooks)
- Easier testing and reasoning

## React Performance and Best Practices

###accordion: Why React requires key to render the list?

Keys help React identify which items have changed, been added, or removed:

```javascript
// Without keys (problematic)
function TodoList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li>{item.text}</li> // React can't track individual items
      ))}
    </ul>
  );
}

// With keys (correct)
function TodoList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.text}</li> // React can track items
      ))}
    </ul>
  );
}
```

**Why keys are important:**
- **Performance:** React can reuse DOM nodes
- **State preservation:** Component state stays with correct item
- **Animations:** Smooth transitions when order changes

**Key requirements:**
- Must be unique among siblings
- Should be stable (don't use Math.random())
- Use IDs, array indexes (last resort), or generated keys

```javascript
// Good: using unique IDs
items.map(item => <li key={item.id}>{item.text}</li>)

// Bad: using index (can cause issues with reordering)
items.map((item, index) => <li key={index}>{item.text}</li>)
```

###accordion: How can we improve Accessibility in React?

**Semantic JSX:**
```javascript
function Form() {
  return (
    <form>
      <fieldset>
        <legend>Personal Information</legend>
        <label htmlFor="name">Name:</label>
        <input id="name" type="text" required />
      </fieldset>
    </form>
  );
}
```

**ARIA Attributes:**
```javascript
function Modal({ isOpen, onClose, children }) {
  return (
    <div 
      role="dialog" 
      aria-modal="true"
      aria-labelledby="modal-title"
    >
      <h2 id="modal-title">Modal Title</h2>
      {children}
      <button onClick={onClose}>Close</button>
    </div>
  );
}
```

**Keyboard Navigation:**
```javascript
function FocusableButton({ children, onClick }) {
  const ref = useRef(null);
  
  const handleKeyDown = (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      onClick();
    }
  };
  
  return (
    <button
      ref={ref}
      onKeyDown={handleKeyDown}
      onClick={onClick}
    >
      {children}
    </button>
  );
}
```

**Accessibility Testing:**
- Use React Testing Library with jest-axe
- Test with screen readers
- Keyboard navigation testing

## React Ecosystem

###accordion: What is Redux?

Redux is a predictable state container for JavaScript applications:

```javascript
// Action
const increment = () => ({ type: 'INCREMENT' });

// Reducer
function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

// Store
import { createStore } from 'redux';
const store = createStore(counterReducer);

// Component
import { useSelector, useDispatch } from 'react-redux';

function Counter() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch(increment())}>Increment</button>
    </div>
  );
}
```

**Core Concepts:**
- **Store:** Single source of truth
- **Actions:** Describe what happened
- **Reducers:** Specify how state changes
- **Middleware:** Extend Redux functionality

###accordion: What solution would you use to process asynchronous requests with Redux?

**Redux Thunk:**
```javascript
import { createAsyncThunk } from '@reduxjs/toolkit';

const fetchUser = createAsyncThunk(
  'user/fetchUser',
  async (userId) => {
    const response = await api.fetchUser(userId);
    return response.data;
  }
);
```

**Redux Saga:**
```javascript
import { takeEvery, call, put } from 'redux-saga/effects';

function* fetchUser(action) {
  try {
    const user = yield call(api.fetchUser, action.payload);
    yield put({ type: 'FETCH_USER_SUCCESS', payload: user });
  } catch (error) {
    yield put({ type: 'FETCH_USER_ERROR', payload: error });
  }
}

function* userSaga() {
  yield takeEvery('FETCH_USER_REQUEST', fetchUser);
}
```

**RTK Query (Recommended):**
```javascript
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api/' }),
  endpoints: (builder) => ({
    getUser: builder.query({
      query: (id) => `users/${id}`,
    }),
  }),
});

export const { useGetUserQuery } = api;
```

###accordion: What is Next.js?

Next.js is a React framework for production:

**Features:**
- **Server-Side Rendering (SSR):** Better SEO and performance
- **Static Site Generation (SSG):** Pre-built pages
- **Incremental Static Regeneration (ISR):** Update static content
- **API Routes:** Backend API in Next.js
- **File-based routing:** Simple routing system
- **Image optimization:** Built-in image component
- **Code splitting:** Automatic optimization

```javascript
// pages/index.js - SSR
export async function getServerSideProps(context) {
  const data = await fetchData();
  return { props: { data } };
}

// pages/blog/[slug].js - SSG
export async function getStaticProps({ params }) {
  const post = await getPost(params.slug);
  return { props: { post } };
}

// pages/api/users.js - API Route
export default function handler(req, res) {
  res.status(200).json({ users: [] });
}
```

## Testing

###accordion: How do you unit test a React Component?

**Using React Testing Library:**

```javascript
import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';

describe('Counter', () => {
  test('renders initial count', () => {
    render(<Counter />);
    expect(screen.getByText('Count: 0')).toBeInTheDocument();
  });

  test('increments count when button clicked', () => {
    render(<Counter />);
    const button = screen.getByText('Increment');
    
    fireEvent.click(button);
    expect(screen.getByText('Count: 1')).toBeInTheDocument();
  });

  test('calls callback when count changes', () => {
    const onCountChange = jest.fn();
    render(<Counter onCountChange={onCountChange} />);
    
    fireEvent.click(screen.getByText('Increment'));
    expect(onCountChange).toHaveBeenCalledWith(1);
  });
});
```

**Testing Hooks:**
```javascript
import { renderHook, act } from '@testing-library/react';
import useCounter from './useCounter';

test('useCounter increments correctly', () => {
  const { result } = renderHook(() => useCounter());
  
  act(() => {
    result.current.increment();
  });
  
  expect(result.current.count).toBe(1);
});
```

###accordion: What is Jest?

Jest is a JavaScript testing framework:

**Features:**
- Zero configuration setup
- Built-in assertion library
- Mocking capabilities
- Code coverage reporting
- Snapshot testing

**Example:**
```javascript
// sum.test.js
import sum from './sum';

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

test('object assignment', () => {
  const data = { one: 1 };
  data['two'] = 2;
  expect(data).toEqual({ one: 1, two: 2 });
});

test('null', () => {
  const n = null;
  expect(n).toBeNull();
  expect(n).toBeDefined();
  expect(n).not.toBeUndefined();
});
```

## Useful Resources

- [React Documentation](https://react.dev/) - Official React docs and tutorials
- [React Patterns](https://reactpatterns.com/) - Common React patterns and best practices
- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) - Testing React components
- [React Performance](https://react.dev/learn/render-and-commit) - Understanding React's rendering process

## Summary

This is part 3 of the Interview series. Continue with [Part 1: CSS, HTML & Accessibility](/blog/interview-questions-part-1) and [Part 2: JavaScript](/blog/interview-questions-javascript). You may also find [Popular Acronyms](/blog/popular-acronyms) useful for interview preparation.


Interview questions: React


# New Generation of Build Tools

After a couple of years where one could think the build tools settle down around Webpack, Rollup, or Parcel now we are going into another wave. Tools such as Vite, ESbuild or Snowpack are new rising stars with a great focus on bundle times. They also fill a missing middle ground between the writing conveniences of writing a single JavaScript file and the need to download hundreds of megabytes of dependencies before you've written a line of your own code.

[Direct link](https://css-tricks.com/comparing-the-new-generation-of-build-tools/)


#frontend

Interview questions part 2: JavaScript

Interview questions part 1 - CSS, HTML & Accessibility

Interview questions: React

New Generation of Build Tools