React ecosystem overview - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding React Server Components

Which statement best describes React Server Components (RSC)?

A RSC are client-side components that fetch data asynchronously after rendering.

B RSC run on the server and send HTML to the client without including JavaScript for those components.

C RSC require class components and lifecycle methods to work properly.

D RSC are deprecated and replaced by traditional React class components.

💡 Hint

Think about where the component code runs and what is sent to the browser.

React Server Components run only on the server. They render UI and send HTML to the client without sending JavaScript for those components, improving performance.

❓ component_behavior

intermediate

Behavior of useState in React 19+

What happens when you call the setter function from useState multiple times synchronously in a React 19+ functional component?

React

const [count, setCount] = useState(0);

setCount(count + 1);
setCount(count + 1);

// What is the value of count after these calls?

A count will be undefined due to a runtime error.

B count will be 2 because each setCount increments count by 1.

C count will be 0 because setCount does not update state synchronously.

D count will be 1 because both setCount calls use the same initial count value.

💡 Hint

Remember that state updates are batched and the setter uses the current closure value.

Both setCount calls use the same initial count value (0), so count increments only once to 1.

📝 Syntax

advanced

Correct use of React Context with useContext Hook

Which option correctly shows how to consume a React Context named ThemeContext inside a functional component?

React

const ThemeContext = React.createContext('light');

function MyComponent() {
  // How to get the current theme value?
}

A const theme = ThemeContext.useContext();

B const theme = React.useContext('ThemeContext');

C const theme = useContext(ThemeContext);

D const theme = useContext('ThemeContext');

💡 Hint

Check the correct syntax for useContext hook usage.

The useContext hook is called with the context object, not a string, and is imported from React.

🔧 Debug

advanced

Identifying a React Hook Rules Violation

What error will this React component produce when rendered? function Example() { if (Math.random() > 0.5) { const [count, setCount] = useState(0); } return

Check count

; }

A Error: React Hook "useState" is called conditionally, which breaks the rules of hooks.

B No error; the component renders normally with count state.

C SyntaxError due to missing import of useState.

D Runtime error because count is undefined in the return statement.

💡 Hint

Hooks must be called unconditionally at the top level of components.

React Hooks must be called in the same order on every render. Calling useState conditionally breaks this rule and causes an error.

❓ lifecycle

expert

React 19+ useEffect Behavior with Strict Mode

In React 19+ with Strict Mode enabled, what is the behavior of useEffect cleanup and re-run during development?

A useEffect cleanup and re-run happen twice on mount to help detect side effects.

B useEffect runs only once on mount and cleanup runs only on unmount.

C useEffect runs synchronously blocking rendering in Strict Mode.

D useEffect cleanup never runs in Strict Mode during development.

💡 Hint

Strict Mode intentionally double-invokes effects in development.

React Strict Mode intentionally runs useEffect cleanup and re-run twice on mount during development to help find bugs in effects.

Practice

1. Which of the following is NOT typically part of the React ecosystem?

easy

A. Express.js for backend server

B. Redux for state management

C. React Router for navigation

D. Styled Components for styling

Solution

1. Step 1: Identify React ecosystem tools

   React ecosystem includes tools like React Router, Redux, and Styled Components for frontend tasks.

2. Step 2: Recognize backend tools

   Express.js is a backend server framework, not part of React's frontend ecosystem.

3. Final Answer:

   Express.js for backend server -> Option A

4. Quick Check:

   Backend server ≠ React ecosystem [OK]

Hint: React ecosystem focuses on frontend tools, not backend servers [OK]

Common Mistakes:

• Confusing backend frameworks as React tools
• Thinking Redux is not part of React ecosystem
• Assuming all JavaScript libraries belong to React

2. Which syntax correctly imports the useState hook from React?

easy

A. import React.useState from 'react';

B. import useState from 'react';

C. const useState = require('react');

D. import { useState } from 'react';

Solution

1. Step 1: Recall ES module import syntax

   Named imports use curly braces: import { useState } from 'react';.

2. Step 2: Identify incorrect forms

   Default import without braces, require syntax, and dot notation in import are invalid here.

3. Final Answer:

   import { useState } from 'react'; -> Option D

4. Quick Check:

   Named import uses braces [OK]

Hint: Use curly braces for named imports like useState [OK]

Common Mistakes:

• Omitting curly braces for named imports
• Using CommonJS require in ES modules
• Trying to import with dot notation

3. What will be the output of this React component when rendered?

import React, { useState } from 'react';

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

medium

A. Displays 'Count: 0' and increments count on button click

B. Displays 'Count: 1' initially and increments on click

C. Throws an error because useState is not imported

D. Button does nothing when clicked

Solution

1. Step 1: Analyze initial state value

   useState(0) sets count to 0 initially, so 'Count: 0' shows first.

2. Step 2: Understand button click behavior

   Clicking button calls setCount(count + 1), increasing count by 1 each click.

3. Final Answer:

   Displays 'Count: 0' and increments count on button click -> Option A

4. Quick Check:

   Initial state 0, button updates count [OK]

Hint: Initial useState value sets starting count [OK]

Common Mistakes:

• Assuming count starts at 1
• Forgetting to import useState
• Thinking button does not update state

4. Identify the error in this React Router usage:

import { BrowserRouter, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Route path='/home' component={Home} />
    </BrowserRouter>
  );
}

medium

A. The path prop must be inside a Switch component

B. BrowserRouter must wrap only one child element

C. Route should use 'element' prop with JSX, not 'component' prop

D. Home component must be imported from 'react-router-dom'

Solution

1. Step 1: Check React Router v6 syntax

   In React Router v6, Route uses element prop with JSX, not component.

2. Step 2: Validate other props and components

   BrowserRouter can wrap multiple children; Switch is replaced by Routes; Home is user-defined, not from react-router-dom.

3. Final Answer:

   Route should use 'element' prop with JSX, not 'component' prop -> Option C

4. Quick Check:

   React Router v6 uses element prop [OK]

Hint: Use element={} in Route for React Router v6 [OK]

Common Mistakes:

• Using component prop instead of element
• Expecting Switch component in v6
• Importing user components from react-router-dom

5. You want to fetch data from an API and style the results using the React ecosystem. Which combination of tools fits best?

hard

A. Redux for data fetching and CSS Modules for styling

B. React Query for data fetching and Tailwind CSS for styling

C. React Router for data fetching and Styled Components for styling

D. Axios for styling and React Context for data fetching

Solution

1. Step 1: Identify data fetching tools in React ecosystem

   React Query is a popular library for fetching and caching API data in React apps.

2. Step 2: Identify styling tools

   Tailwind CSS is a utility-first CSS framework commonly used with React for styling.

3. Final Answer:

   React Query for data fetching and Tailwind CSS for styling -> Option B

4. Quick Check:

   React Query + Tailwind CSS = best fit [OK]

Hint: React Query handles data; Tailwind CSS handles styling [OK]

Common Mistakes:

• Using Redux for data fetching only
• Confusing React Router as data fetch tool
• Mixing styling and data fetching roles