

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.


#react

Interview questions: React