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.