Managing large applications in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does code splitting affect a React app's initial load?

Consider a large React app using code splitting with React.lazy and Suspense. What is the main effect on the app's initial load?

React

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

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

A The initial load time is unaffected because code splitting only works on server side.

B The initial load is slower because all code is bundled together and loaded at once.

C The app crashes because lazy loading is not supported in React.

D The initial load is faster because only essential code is loaded first, and heavy parts load later.

💡 Hint

Think about how loading parts of the app only when needed can help speed up the start.

Code splitting with React.lazy loads only the code needed initially, deferring heavy components until they are needed. This reduces the initial bundle size and speeds up loading.

❓ state_output

intermediate

What is the final state after multiple context updates?

Given a React context managing a counter, what is the final value of count after these updates?

React

const CountContext = React.createContext();

function CounterProvider({ children }) {
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    setCount(c => c + 1);
    setCount(c => c + 1);
    setCount(c => c + 1);
  }, []);

  return <CountContext.Provider value={count}>{children}</CountContext.Provider>;
}

function Display() {
  const count = React.useContext(CountContext);
  return <div>{count}</div>;
}

A 3

B 1

C 0

D NaN

💡 Hint

Remember that using the updater function form of setState batches updates correctly.

Using the updater function c => c + 1 three times in one effect results in the count increasing by 3 because React batches these updates and applies them sequentially.

🔧 Debug

advanced

Why does this React app freeze on large state updates?

This React app freezes when updating a large list in state. What is the main cause?

React

function LargeList() {
  const [items, setItems] = React.useState(Array(100000).fill(0));

  function updateItems() {
    const newItems = items.map(x => x + 1);
    setItems(newItems);
  }

  return <button onClick={updateItems}>Update</button>;
}

A The entire large array is recreated and causes slow rendering on each update.

B React does not support arrays larger than 1000 items in state.

C The button's onClick handler is not properly bound, so updateItems is never called.

D The map function mutates the original array causing infinite loops.

💡 Hint

Think about what happens when you create a new large array and React re-renders.

Updating a very large array by creating a new one and setting it in state causes React to re-render the whole list, which can freeze the app due to heavy computation and rendering.

📝 Syntax

advanced

Which option correctly uses React's useContext with TypeScript?

Given a React context with a default value, which code correctly accesses the context value in a functional component using TypeScript?

React

const UserContext = React.createContext<{name: string} | null>(null);

function UserName() {
  // Access context here
}

A

const user = React.useContext(UserContext);
return <div>{user.name}</div>;

B

const user = React.useContext(UserContext)!;
return <div>{user.name}</div>;

C

const user = React.useContext(UserContext) ?? {name: 'Guest'};
return <div>{user.name}</div>;

D

const user = React.useContext(UserContext) as {name: string};
return <div>{user.name}</div>;

💡 Hint

Consider how to safely assert the context is not null when you know it will be provided.

Using the non-null assertion operator ! tells TypeScript the context value is not null, allowing safe access to user.name. Option B causes a TypeScript error because user might be null.

🧠 Conceptual

expert

What is the main benefit of using a state management library like Redux in large React apps?

In very large React applications, why do developers often choose to use Redux or similar libraries?

A To automatically optimize rendering performance without any code changes.

B To replace React's built-in state and context APIs completely for all components.

C To centralize and organize application state, making it easier to manage and debug complex state changes.

D To avoid writing any reducer functions or actions manually.

💡 Hint

Think about how managing state across many components can get complicated.

Redux centralizes state in one place, making it easier to track, update, and debug state changes in large apps. It does not automatically optimize rendering or replace React state entirely.

Practice

1. What is a common way to organize a large React application to keep it manageable?

easy

A. Use only class components to keep consistency

B. Write all code in a single file for easy access

C. Avoid using components and write plain JavaScript

D. Split the app into smaller components and folders

Solution

1. Step 1: Understand component-based design

   React encourages breaking UI into small, reusable components.

2. Step 2: Organize code in folders

   Grouping related components and files in folders helps maintain large apps.

3. Final Answer:

   Split the app into smaller components and folders -> Option D

4. Quick Check:

   Component + folder structure = A [OK]

Hint: Think modular: small parts in folders make apps manageable [OK]

Common Mistakes:

• Putting all code in one file makes it hard to maintain
• Ignoring components loses React's main advantage
• Using only class components is outdated

2. Which of the following is the correct way to import a component named Header from a file in React?

easy

A. import Header from './Header';

B. require Header from './Header';

C. import { Header } from './Header.js';

D. include Header from './Header';

Solution

1. Step 1: Recognize ES6 import syntax

   React uses ES6 modules, so import Header from './Header'; is correct for default exports.

2. Step 2: Check other options

   require is CommonJS, not standard in React apps; include is invalid; named import { Header } requires named export.

3. Final Answer:

   import Header from './Header'; -> Option A

4. Quick Check:

   Default import uses import X from [OK]

Hint: Use ES6 import syntax: import Component from 'path' [OK]

Common Mistakes:

• Using require instead of import in React
• Confusing default and named imports
• Using invalid keywords like include

3. Given this React component structure:

src/
  components/
    Navbar.js
  pages/
    Home.js
    About.js
  App.js

Which statement best describes how routing helps manage this app?

medium

A. Routing allows switching between Home and About pages without reloading

B. Routing bundles all components into one file for faster loading

C. Routing automatically converts components to class components

D. Routing disables navigation to keep app simple

Solution

1. Step 1: Understand routing purpose

   Routing lets users move between different views (pages) in a React app without full page reloads.

2. Step 2: Apply to given structure

   Home.js and About.js are pages; routing switches between them smoothly.

3. Final Answer:

   Routing allows switching between Home and About pages without reloading -> Option A

4. Quick Check:

   Routing = page switching without reload [OK]

Hint: Routing changes views without refreshing the whole page [OK]

Common Mistakes:

• Thinking routing bundles files together
• Believing routing changes component types
• Assuming routing disables navigation

4. You have this React code snippet:

function App() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <button onClick="setCount(count + 1)">Increment</button>
      <p>Count: {count}</p>
    </div>
  )
}

What is the main error preventing the button from working?

medium

A. setCount should be called without parentheses

B. Missing import of React

C. Using double quotes instead of curly braces for onClick handler

D. State variable count is not initialized

Solution

1. Step 1: Check onClick syntax

   In JSX, event handlers must be passed as functions inside curly braces, not strings in quotes.

2. Step 2: Identify the error

   Here, onClick="setCount(count + 1)" uses quotes, so React treats it as a string, not a function.

3. Final Answer:

   Using double quotes instead of curly braces for onClick handler -> Option C

4. Quick Check:

   JSX event handlers need curly braces [OK]

Hint: Use curly braces for event handlers, not quotes [OK]

Common Mistakes:

• Using quotes instead of curly braces for onClick
• Forgetting to import React (less common in new versions)
• Calling setCount incorrectly

5. In a large React app, you want to keep UI components separate from business logic for easier teamwork. Which approach best supports this?

hard

A. Avoid using hooks and manage state globally only

B. Use container components to handle logic and presentational components for UI

C. Write all logic inside UI components to keep code together

D. Put all components and logic in one file to reduce imports

Solution

1. Step 1: Understand separation of concerns

   Separating UI and logic helps teams work independently and keeps code clean.

2. Step 2: Apply container and presentational pattern

   Container components manage data and logic; presentational components focus on UI rendering.

3. Final Answer:

   Use container components to handle logic and presentational components for UI -> Option B

4. Quick Check:

   Separate logic and UI with containers and presentational components [OK]

Hint: Split logic (containers) and UI (presentational) components [OK]

Common Mistakes:

• Mixing logic inside UI components makes maintenance hard
• Avoiding hooks limits React's power
• Putting everything in one file causes confusion