

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.


#technical

Interview questions part 2: JavaScript

Interview questions part 1 - CSS, HTML & Accessibility

Interview questions: React