State synchronization patterns in NextJS - Mini Project: Build & Apply

State Synchronization Patterns in Next.js

📖 Scenario: You are building a simple Next.js app where a user can toggle a theme between light and dark modes. The theme state should stay synchronized across components and persist on the client side.

🎯 Goal: Create a Next.js app that uses state synchronization patterns to share and update a theme state between components using React context and hooks.

📋 What You'll Learn

Create a React context to hold the theme state

Add a provider component to wrap the app and hold the theme state

Use a toggle function to switch between 'light' and 'dark' themes

Consume the theme state and toggle function in a child component

💡 Why This Matters

🌍 Real World

Many apps need to share state like themes, user info, or settings across multiple components without passing props manually. This pattern helps keep UI consistent and synchronized.

💼 Career

Understanding state synchronization with React context and hooks is essential for building scalable React and Next.js applications used in professional web development.

1

Create the Theme Context

Create a file called ThemeContext.js and inside it, create a React context called ThemeContext using createContext from react. Initialize it with null.

NextJS

import { createContext } from 'react'

// Your code here

Hint

Use import { createContext } from 'react' and then const ThemeContext = createContext(null).

2

Add ThemeProvider Component

In ThemeContext.js, create a functional component called ThemeProvider that uses useState to hold a theme state initialized to 'light'. Provide theme and a toggleTheme function that switches between 'light' and 'dark' via ThemeContext.Provider. Export ThemeProvider.

NextJS

import { createContext, useState } from 'react'

export const ThemeContext = createContext(null)

// Create ThemeProvider component here
// Your code here

Hint

Use useState('light') and create a toggleTheme function that switches the theme. Wrap {children} with ThemeContext.Provider.

3

Consume Theme Context in a Component

Create a new component called ThemeSwitcher.js. Inside it, use useContext to get theme and toggleTheme from ThemeContext. Render a button that shows the current theme and calls toggleTheme on click.

NextJS

import { useContext } from 'react'
import { ThemeContext } from './ThemeContext'

// Create ThemeSwitcher component here
// Your code here

Hint

Use const { theme, toggleTheme } = useContext(ThemeContext) and render a button that calls toggleTheme on click.

4

Wrap App with ThemeProvider

In app/layout.js (or your root layout file), import ThemeProvider from ThemeContext.js and wrap the {children} with <ThemeProvider> so the theme state is available throughout the app.

NextJS

import { ThemeProvider } from './ThemeContext'

export default function RootLayout({ children }) {
  // Wrap children with ThemeProvider
  // Your code here
}

Hint

Wrap {children} inside <ThemeProvider> tags in the root layout.

Practice

1. What is the main purpose of state synchronization in Next.js applications?

easy

A. To keep data consistent between server and client components

B. To improve CSS styling performance

C. To handle routing between pages

D. To optimize image loading speed

Solution

1. Step 1: Understand state synchronization concept

   State synchronization means keeping data the same across different parts of an app, especially between server and client.

2. Step 2: Identify Next.js usage

   Next.js apps often fetch data on the server and need to keep that data consistent on the client side.

3. Final Answer:

   To keep data consistent between server and client components -> Option A

4. Quick Check:

   State sync = consistent data [OK]

Hint: Think about data staying the same everywhere [OK]

Common Mistakes:

• Confusing state sync with styling or routing
• Thinking it only applies to client-side
• Assuming it improves image loading

2. Which of the following is the correct way to update a React state variable count using the useState hook in Next.js?

easy

A. updateCount(count + 1);

B. count = count + 1;

C. useState(count + 1);

D. setCount(count + 1);

Solution

1. Step 1: Recall useState update syntax

   React's useState returns a setter function to update state, e.g., setCount(newValue).

2. Step 2: Identify correct usage

   Direct assignment like count = count + 1 is invalid; useState(count + 1) is a hook call, not update; updateCount is undefined.

3. Final Answer:

   setCount(count + 1); -> Option D

4. Quick Check:

   useState setter = setCount() [OK]

Hint: Use the setter function from useState to update state [OK]

Common Mistakes:

• Trying to assign state variable directly
• Calling useState inside event handlers
• Using undefined update functions

3. Consider this Next.js component snippet:

import { useState, useEffect } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  return <div>Count: {count}</div>;
}

What will the component display after 3 seconds?

medium

A. Count: 0

B. Count: 3

C. Count: 1

D. Count: NaN

Solution

1. Step 1: Understand useEffect with empty dependency

   The effect runs once on mount, setting an interval that increments count every 1000ms.

2. Step 2: Calculate count after 3 seconds

   After 3 intervals (3 seconds), count increments from 0 to 3.

3. Final Answer:

   Count: 3 -> Option B

4. Quick Check:

   Increment every second = 3 after 3s [OK]

Hint: Count increments once per second, so 3 seconds = 3 [OK]

Common Mistakes:

• Thinking useEffect runs multiple times
• Ignoring the cleanup function
• Assuming count resets

4. You have this Next.js component code that fetches data and sets state:

import { useState, useEffect } from 'react';

export default function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(json => setData(json));
  }, []);

  return <div>{data.title}</div>;
}

What error might occur when this component first renders?

medium

A. Infinite loop in useEffect

B. SyntaxError in fetch call

C. Cannot read property 'title' of null

D. setData is not a function

Solution

1. Step 1: Analyze initial state and render

   Initial state data is null, so on first render data.title tries to access property of null.

2. Step 2: Identify runtime error

   Accessing property on null causes a runtime error: "Cannot read property 'title' of null".

3. Final Answer:

   Cannot read property 'title' of null -> Option C

4. Quick Check:

   Access null.title = error [OK]

Hint: Check if state is null before accessing properties [OK]

Common Mistakes:

• Assuming fetch syntax error
• Expecting infinite loop without dependencies
• Confusing setData function availability

5. In Next.js, you want to synchronize server-fetched data with client state and update it on user interaction. Which pattern best achieves this?

hard

A. Fetch data in getServerSideProps, pass as props, then use useState on client to manage updates

B. Fetch data only on client with useEffect and ignore server data

C. Use getStaticProps and never update client state

D. Store data in a global variable outside React components

Solution

1. Step 1: Understand server and client data flow

   getServerSideProps fetches fresh data on each request, passing it as props to the component.

2. Step 2: Use client state for updates

   Using useState with initial props allows client-side updates while keeping initial server data.

3. Final Answer:

   Fetch data in getServerSideProps, pass as props, then use useState on client to manage updates -> Option A

4. Quick Check:

   Server props + client state = sync and update [OK]

Hint: Combine server props with client useState for sync and updates [OK]

Common Mistakes:

• Ignoring server data and fetching only on client
• Using static props without updates
• Using global variables outside React state