Dynamic rendering triggers in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What triggers a re-render in a Next.js Server Component?

Consider a Next.js Server Component that fetches data and renders it. Which action below will cause the component to re-render on the server?

NextJS

export default async function UserProfile({ userId }) {
  const user = await fetch(`https://api.example.com/users/${userId}`).then(res => res.json());
  return <div>{user.name}</div>;
}

A Changing the userId prop passed to the component

B Updating a client-side state variable inside the component

C Clicking a button inside the component without navigation

D Modifying a CSS file imported by the component

💡 Hint

Think about what causes the server to fetch new data and re-run the component function.

Server Components re-render when their props change, triggering new data fetching and rendering on the server. Client-side state changes or UI interactions inside the component do not cause server re-renders. CSS changes affect styling but do not trigger re-renders.

❓ state_output

intermediate

What is the output after client interaction in a Next.js app with Server and Client Components?

Given a Next.js page with a Server Component rendering a Client Component that has a button to update local state, what will be displayed after clicking the button?

NextJS

export default function Page() {
  return <ClientCounter />;
}

'use client';
import { useState } from 'react';

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

A The button text updates to 'Count: 1' immediately after click

B The button text remains 'Count: 0' because Server Components do not update

C The page reloads and resets the count to 0

D An error occurs because useState cannot be used in Next.js

💡 Hint

Remember where useState works and how Client Components behave.

Client Components can use React hooks like useState to update UI immediately on the client side. The button text updates without a full page reload. Server Components do not handle client state.

📝 Syntax

advanced

Which code snippet correctly uses dynamic rendering with Next.js App Router's fetch caching?

You want to fetch fresh data on every request in a Server Component using Next.js App Router. Which code below correctly disables fetch caching to ensure dynamic rendering?

A const data = await fetch('https://api.example.com/data', { cache: 'reload' }).then(res => res.json());

B const data = await fetch('https://api.example.com/data', { cache: 'no-store' }).then(res => res.json());

C const data = await fetch('https://api.example.com/data', { cache: 'force-cache' }).then(res => res.json());

D const data = await fetch('https://api.example.com/data', { cache: 'default' }).then(res => res.json());

💡 Hint

Check Next.js fetch cache options for dynamic data fetching.

Using cache: 'no-store' tells Next.js to fetch fresh data on every request, disabling caching and enabling dynamic rendering. Other options either cache or reload cached data.

🔧 Debug

advanced

Why does this Next.js Server Component not re-render when expected?

A developer expects this Server Component to re-render when the URL query changes, but it does not. What is the likely cause?

NextJS

import { useSearchParams } from 'next/navigation';

export default function Page() {
  const searchParams = useSearchParams();
  const filter = searchParams.get('filter');
  return <div>Filter: {filter}</div>;
}

A The component should use useRouter instead of useSearchParams

B The component lacks a useEffect to watch searchParams changes

C useSearchParams is a client hook and cannot be used in Server Components

D The fetch call inside the component is missing to update data

💡 Hint

Check which hooks are allowed in Server Components.

useSearchParams is a client-side hook and cannot be used inside Server Components. Using it there causes the component not to update on URL changes. To react to URL changes in Server Components, use props or params passed from the router.

🧠 Conceptual

expert

Which Next.js rendering strategy ensures a page updates on every request but still benefits from partial caching?

You want a Next.js page that fetches fresh data on every request but also caches static assets and layout parts. Which rendering strategy achieves this?

A Use Client Components with useEffect fetching data on mount

B Use getServerSideProps to fetch data on every request

C Use getStaticProps with revalidate set to 0

D Use Server Components with fetch cache set to 'no-store' and static layouts

💡 Hint

Consider Next.js App Router features for partial caching and dynamic data.

Using Server Components with fetch cache set to 'no-store' fetches fresh data on every request. Static layouts remain cached, so only dynamic parts re-render. Client Components fetch on client side, losing server benefits. getStaticProps and getServerSideProps are from Pages Router, not App Router.

Practice

1. Which React hook in Next.js is primarily used to trigger a component re-render when data changes dynamically?

easy

A. useRef

B. useEffect

C. useState

D. useContext

Solution

1. Step 1: Understand the purpose of useState

   useState creates a state variable that, when updated, triggers a re-render of the component.

2. Step 2: Compare with other hooks

   useEffect runs side effects but does not itself trigger re-renders; useRef holds mutable values without causing re-renders; useContext shares data but depends on context changes.

3. Final Answer:

   useState -> Option C

4. Quick Check:

   State change triggers re-render = useState [OK]

Hint: State updates cause re-render; useState manages state [OK]

Common Mistakes:

• Confusing useEffect as a trigger for re-render
• Using useRef expecting re-render on change
• Thinking useContext alone triggers re-render

2. Which of the following is the correct syntax to update state in a Next.js functional component using useState?

easy

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

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

C. const count = useState(0); count = 5;

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

Solution

1. Step 1: Review correct useState syntax

   useState returns an array with current state and a setter function. The setter function is called with the new value to update state.

2. Step 2: Identify correct setter usage

   Only setCount(5); correctly calls the setter function. Assigning directly to setCount or count is invalid.

3. Final Answer:

   const [count, setCount] = useState(0); setCount(5); -> Option B

4. Quick Check:

   Call setter function with new value = setCount(5) [OK]

Hint: Call setter function like setCount(newValue) [OK]

Common Mistakes:

• Assigning value directly to setter function
• Trying to call state variable as a function
• Ignoring array destructuring from useState

3. Given the following Next.js component, what will be displayed after clicking the button twice?

import { useState } from 'react';

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

medium

A. Count: 2

B. Count: 1

C. Count: 0

D. Count: NaN

Solution

1. Step 1: Understand initial state and button action

   Initial count is 0. Each button click calls setCount(count + 1), increasing count by 1.

2. Step 2: Calculate count after two clicks

   After first click: count = 1; after second click: count = 2.

3. Final Answer:

   Count: 2 -> Option A

4. Quick Check:

   Increment twice from 0 = 2 [OK]

Hint: Each click adds 1 to count state [OK]

Common Mistakes:

• Assuming state does not update immediately
• Confusing initial value with updated value
• Expecting NaN due to wrong state usage

4. Identify the error in this Next.js component that tries to update state on button click:

import { useState } from 'react';

export default function Example() {
  const [value, setValue] = useState('');

  function handleClick() {
    value = 'Updated';
  }

  return (
    <>
      
{value}
      Update
    </>
  );
}

medium

A. Missing import of React

B. useState initial value must be a number

C. Button onClick should be a string

D. Directly assigning to state variable instead of using setter

Solution

1. Step 1: Check how state is updated

   The function handleClick assigns directly to value, which is a state variable and read-only.

2. Step 2: Correct way to update state

   State must be updated by calling the setter function setValue('Updated') to trigger re-render.

3. Final Answer:

   Directly assigning to state variable instead of using setter -> Option D

4. Quick Check:

   Use setter function to update state [OK]

Hint: Never assign state variable directly; use setter function [OK]

Common Mistakes:

• Assigning state variable directly
• Forgetting to call setter function
• Confusing state variable with setter

5. You want a Next.js component to fetch user data dynamically when the component mounts and update the UI accordingly. Which approach correctly triggers dynamic rendering and cleans up properly?

import { useState, useEffect } from 'react';

export default function UserProfile() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    let isMounted = true;
    fetch('/api/user')
      .then(res => res.json())
      .then(data => {
        if (isMounted) setUser(data);
      });
    return () => { isMounted = false; };
  }, []);

  if (!user) return <p>Loading...</p>;
  return <p>Hello, {user.name}!</p>;
}

hard

A. Correct: fetch in useEffect with cleanup flag to avoid setting state after unmount

B. Incorrect: fetch outside useEffect causes infinite re-renders

C. Incorrect: setting state directly without useEffect causes errors

D. Incorrect: missing dependency array causes fetch to run once

Solution

1. Step 1: Analyze data fetching inside useEffect

   Fetching data inside useEffect with empty dependency array runs once on mount, triggering dynamic rendering when data arrives.

2. Step 2: Understand cleanup with isMounted flag

   The isMounted flag prevents setting state if the component unmounts before fetch completes, avoiding memory leaks or errors.

3. Final Answer:

   Correct: fetch in useEffect with cleanup flag to avoid setting state after unmount -> Option A

4. Quick Check:

   Fetch in useEffect + cleanup = safe dynamic update [OK]

Hint: Use useEffect with cleanup to fetch and update safely [OK]

Common Mistakes:

• Fetching data outside useEffect causing repeated renders
• Not cleaning up async calls causing memory leaks
• Missing dependency array causing multiple fetches