State synchronization patterns in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does useState synchronize state across components?

Consider two sibling components in Next.js using useState independently. What happens when one updates its state?

NextJS

import React, { useState } from 'react';

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

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

A Updating state in SiblingA does not affect SiblingB's state; they remain independent.

B Updating state in SiblingA automatically updates SiblingB's state to the same value.

C Both components share the same state because useState is global in Next.js.

D Updating state in SiblingA causes a runtime error due to conflicting states.

💡 Hint

Think about how useState works inside each component instance.

Each useState call creates independent state local to that component instance. Sibling components do not share state unless explicitly connected.

❓ state_output

intermediate

What is the output when syncing state with useEffect and props?

Given a Next.js component receiving a count prop and syncing it to local state with useEffect, what will be the displayed count after prop changes?

NextJS

import React, { useState, useEffect } from 'react';

function Counter({ count }) {
  const [localCount, setLocalCount] = useState(count);
  useEffect(() => {
    setLocalCount(count);
  }, [count]);
  return <div>{localCount}</div>;
}

// Parent renders <Counter count={5} />, then updates to <Counter count={10} />

A The component always shows 5, ignoring prop updates.

B The component first shows 5, then updates to show 10 after prop changes.

C The component shows 10 immediately without showing 5 first.

D The component throws an error because state and props conflict.

💡 Hint

Consider how useEffect updates state when props change.

The initial state is set to the first prop value (5). When the prop changes to 10, useEffect updates the local state, causing the component to display 10.

🔧 Debug

advanced

Why does this Next.js component cause infinite re-renders?

Examine the code below. Why does it cause infinite re-renders?

NextJS

import React, { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);
  useEffect(() => {
    setSeconds(seconds + 1);
  }, [seconds]);
  return <div>{seconds}</div>;
}

A Because <code>setSeconds</code> inside <code>useEffect</code> updates <code>seconds</code>, triggering <code>useEffect</code> again endlessly.

B Because <code>seconds</code> is never updated, so the component freezes.

C Because <code>useEffect</code> is missing a cleanup function causing memory leaks.

D Because <code>useState</code> is used incorrectly without initial value.

💡 Hint

Think about what triggers useEffect and what happens inside it.

The effect depends on seconds. Inside the effect, setSeconds updates seconds, causing the effect to run again. This loop causes infinite re-renders.

🧠 Conceptual

advanced

Which pattern best synchronizes state between server and client in Next.js?

You want to keep a piece of state synchronized between server-rendered content and client interactions in Next.js. Which approach is best?

A Use <code>getStaticProps</code> to fetch data and update state only on the client.

B Use only client-side state with <code>useState</code> and ignore server data.

C Use global variables to share state between server and client.

D Use React Server Components to fetch data on the server and pass it as props to client components with local state.

💡 Hint

Think about how Next.js handles server and client rendering.

React Server Components fetch data on the server and pass it down as props. Client components can then use local state for interactions, keeping server and client in sync.

📝 Syntax

expert

Which option correctly implements a shared state using React Context in Next.js?

Choose the correct code snippet that creates a React Context to share a counter state and updater across components.

NextJS

import React, { createContext, useState, useContext } from 'react';

const CounterContext = createContext();

function CounterProvider({ children }) {
  const [count, setCount] = useState(0);
  return <CounterContext.Provider value={{ count, setCount }}>{children}</CounterContext.Provider>;
}

function useCounter() {
  return useContext(CounterContext);
}

A

const CounterContext = React.createContext();

function CounterProvider({ children }) {
  const [count, setCount] = useState(0);
  return <CounterContext.Provider value={count}>{children}</CounterContext.Provider>;
}

function useCounter() {
  return useContext(CounterContext);
}

B

const CounterContext = React.createContext(0);

function CounterProvider({ children }) {
  const count = 0;
  return <CounterContext.Provider value={count}>{children}</CounterContext.Provider>;
}

function useCounter() {
  return useContext(CounterContext);
}

C

const CounterContext = React.createContext();

function CounterProvider({ children }) {
  const [count, setCount] = useState(0);
  return <CounterContext.Provider value={{ count, setCount }}>{children}</CounterContext.Provider>;
}

function useCounter() {
  return useContext(CounterContext);
}

D

const CounterContext = React.createContext();

function CounterProvider({ children }) {
  const [count, setCount] = useState(0);
  return <CounterContext.Provider value={setCount}>{children}</CounterContext.Provider>;
}

function useCounter() {
  return useContext(CounterContext);
}

💡 Hint

Remember the context value should provide both state and updater to consumers.

Option C correctly creates a context, provides both count and setCount in the value, and defines a hook to consume the context.

Other options either provide only count or only setCount or a fixed value, which breaks shared state updates.