0
0
NextJSframework~20 mins

Shared state across layouts in NextJS - Practice Problems & Coding Challenges

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Challenge - 5 Problems
🎖️
Shared State Mastery in Next.js
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ component_behavior
intermediate
2:00remaining
How does shared state behave across nested layouts in Next.js 14?
Consider a Next.js 14 app with a root layout and a nested layout. Both layouts use React's useState to hold a counter. If the nested layout updates its counter, what happens to the root layout's counter?
NextJS
import React from 'react';

export default function RootLayout({ children }) {
  const [count, setCount] = React.useState(0);
  return <html><body>{children}</body></html>;
}

export function NestedLayout({ children }) {
  const [count, setCount] = React.useState(0);
  // Button to increment count
  return <section>{children}</section>;
}
AThe nested layout's counter update does not affect the root layout's counter; they are independent states.
BUpdating the nested layout's counter also updates the root layout's counter because state is shared automatically.
CThe root layout's counter resets to zero whenever the nested layout updates its counter.
DBoth counters merge and show the sum of their values automatically.
Attempts:
2 left
💡 Hint
Think about how React state works in separate components.
🧠 Conceptual
intermediate
2:00remaining
What is the recommended way to share state across layouts in Next.js 14?
You want to share a theme setting (dark/light) across multiple layouts in a Next.js 14 app. Which approach correctly shares this state?
APass state as props from nested layouts to root layout.
BDeclare useState separately in each layout and expect React to sync them automatically.
CUse localStorage in each layout without any React state management.
DUse React Context Provider at the root layout and consume context in nested layouts.
Attempts:
2 left
💡 Hint
Think about React's way to share data deeply without prop drilling.
🔧 Debug
advanced
2:00remaining
Why does the shared state reset when navigating between layouts in Next.js 14?
You implemented a React Context Provider in the root layout to share state. However, when navigating between pages with different nested layouts, the shared state resets unexpectedly. What is the likely cause?
AReact Context does not work across layouts in Next.js 14.
BThe root layout is unmounted and remounted on navigation, resetting state.
CYou forgot to wrap the nested layouts with the Context Provider.
DNext.js 14 disables React state persistence by default.
Attempts:
2 left
💡 Hint
Consider how Next.js handles layouts and navigation.
📝 Syntax
advanced
2:00remaining
Which code snippet correctly implements a shared state using React Context in Next.js 14 layouts?
Select the code snippet that correctly creates and uses a React Context Provider in the root layout and consumes it in a nested layout.
A
const ThemeContext = React.createContext();

export default function RootLayout({ children }) {
  const [theme, setTheme] = React.useState('light');
  return &lt;ThemeContext.Provider value={{ theme }}&gt;{children}&lt;/ThemeContext.Provider&gt;;
}

export function NestedLayout({ children }) {
  const theme = React.useContext(ThemeContext);
  return &lt;div className={theme}&gt;{children}&lt;/div&gt;;
}
B
const ThemeContext = React.createContext();

export default function RootLayout({ children }) {
  const [theme, setTheme] = React.useState('light');
  return &lt;ThemeContext.Provider value={theme}&gt;{children}&lt;/ThemeContext.Provider&gt;;
}

export function NestedLayout({ children }) {
  const theme = React.useContext(ThemeContext);
  return &lt;div className={theme}&gt;{children}&lt;/div&gt;;
}
C
const ThemeContext = React.createContext();

export default function RootLayout({ children }) {
  const [theme, setTheme] = React.useState('light');
  return &lt;ThemeContext.Provider value={{ theme, setTheme }}&gt;{children}&lt;/ThemeContext.Provider&gt;;
}

export function NestedLayout({ children }) {
  const { theme } = React.useContext(ThemeContext);
  return &lt;div className={theme}&gt;{children}&lt;/div&gt;;
}
D
const ThemeContext = React.createContext('light');

export default function RootLayout({ children }) {
  const theme = 'light';
  return &lt;ThemeContext.Provider value={theme}&gt;{children}&lt;/ThemeContext.Provider&gt;;
}

export function NestedLayout({ children }) {
  const { theme } = React.useContext(ThemeContext);
  return &lt;div className={theme}&gt;{children}&lt;/div&gt;;
}
Attempts:
2 left
💡 Hint
Check how the context value is passed and destructured.
❓ state_output
expert
2:00remaining
What is the output after clicking the increment button twice in this shared state example across layouts?
Given the root layout provides a counter state via React Context, and the nested layout renders a button to increment it, what is the displayed counter value after clicking the button twice?
NextJS
import React from 'react';

const CounterContext = React.createContext();

export default function RootLayout({ children }) {
  const [count, setCount] = React.useState(0);
  return (
    <CounterContext.Provider value={{ count, setCount }}>
      <html><body>{children}</body></html>
    </CounterContext.Provider>
  );
}

export function NestedLayout({ children }) {
  const { count, setCount } = React.useContext(CounterContext);
  return (
    <section>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      {children}
    </section>
  );
}
ACount: 2
BCount: 1
CCount: 0
DCount: NaN
Attempts:
2 left
💡 Hint
Each click increases count by 1 starting from zero.