State and hooks in client components in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the useState hook in a Next.js client component?

The useState hook lets you add state variables to your component. It helps the component remember values between renders and update the UI when those values change.

beginner

Why must you add "use client" at the top of a Next.js component file to use hooks like useState?

Adding "use client" tells Next.js this component runs in the browser, not on the server. Hooks like useState only work in client components because they rely on browser features.

beginner

How do you update a state variable created with useState?

You call the setter function returned by <code>useState</code>. For example, if you have <code>const [count, setCount] = useState(0)</code>, call <code>setCount(newValue)</code> to update it and re-render the component.

beginner

What happens to the component when you update state using useState?

The component re-renders automatically. This means React runs the component function again and updates the UI to match the new state values.

beginner

Can you use useState in Next.js server components?

No. useState and other React hooks that manage state only work in client components. Server components run on the server and do not have state or lifecycle hooks.

What does the useState hook return?

A A promise that resolves to the new state

B A boolean indicating if the state changed

C An array with the current state and a function to update it

D A string describing the state

useState returns an array with two items: the current state value and a function to update that state.

Where must you add "use client" in a Next.js component to use hooks like useState?

A At the top of the component file

B Inside the component function

C In the package.json file

D In the next.config.js file

The directive "use client" must be the very first line in the component file to mark it as a client component.

What happens when you call the setter function from useState?

A Nothing happens immediately

B The component re-renders with the new state

C The state resets to initial value

D The component unmounts

Calling the setter updates the state and triggers a re-render so the UI updates.

Can you use useState in a Next.js server component?

A Only if you import it from next/server

B Yes, but only for static data

C Yes, always

D No, only in client components

useState works only in client components because server components do not have state.

Why do client components need hooks like useState?

A To remember and update data that changes over time in the browser

B To fetch data from the server

C To style components dynamically

D To optimize server rendering

Hooks like useState let client components keep track of changing data and update the UI accordingly.

Explain how to add and update state in a Next.js client component using hooks.

Think about the steps from marking the component as client to changing the state value.

Describe why hooks like useState cannot be used in Next.js server components.

Consider where the code runs and what hooks need to work.

Practice

1. What is the main purpose of using useState in a Next.js client component?

easy

A. To fetch data from the server before rendering

B. To store and update data that changes over time within the component

C. To style the component dynamically

D. To navigate between pages automatically

Solution

1. Step 1: Understand what useState does

   useState is a React hook that allows components to keep track of data that can change, like user input or toggles.

2. Step 2: Identify the purpose in Next.js client components

   In Next.js client components, useState helps remember and update values without reloading the page.

3. Final Answer:

   To store and update data that changes over time within the component -> Option B

4. Quick Check:

   State = Remember and update data [OK]

Hint: Remember: useState stores changing data inside components [OK]

Common Mistakes:

• Thinking useState fetches server data
• Confusing useState with styling or navigation
• Forgetting useState only works in client components

2. Which of the following is the correct way to declare a state variable called count with initial value 0 in a Next.js client component?

easy

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

B. const count = useState(0);

C. let count = useState(0);

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

Solution

1. Step 1: Recall the syntax of useState hook

   The correct syntax uses array destructuring: const [state, setState] = useState(initialValue);

2. Step 2: Match the syntax with the variable name and initial value

   For count starting at 0, it should be const [count, setCount] = useState(0);

3. Final Answer:

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

4. Quick Check:

   useState syntax = [state, setState] [OK]

Hint: Use array destructuring: [value, setValue] = useState() [OK]

Common Mistakes:

• Assigning useState directly to a single variable
• Using let instead of const for state
• Not using array destructuring syntax

3. Consider this Next.js client component code:

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

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

What will be displayed after clicking the button three times?

medium

A. Count: 0

B. Count: 1

C. Count: 3

D. Count: undefined

Solution

1. Step 1: Understand initial state and button click effect

   The initial count is 0. Each click calls setCount(count + 1), increasing count by 1.

2. Step 2: Calculate count after three clicks

   After 1 click: count = 1
   After 2 clicks: count = 2
   After 3 clicks: count = 3

3. Final Answer:

   Count: 3 -> Option C

4. Quick Check:

   Increment count 3 times = 3 [OK]

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

Common Mistakes:

• Thinking count resets on each render
• Confusing initial value with updated value
• Ignoring that setCount updates state asynchronously

4. What is wrong with this Next.js client component code?

import { useState } from 'react';

export default function Toggle() {
  const [isOn, setIsOn] = useState(false);
  return (
     setIsOn(!isOn)}>
      {isOn ? 'ON' : 'OFF'}
    
  );
}

medium

A. State variable should be declared with let

B. Incorrect use of useState syntax

C. Button onClick handler is invalid

D. Missing 'use client'; directive at the top

Solution

1. Step 1: Check for client component requirement

   Hooks like useState require the component to be a client component, which needs 'use client'; at the top.

2. Step 2: Verify code for missing directive

   The code lacks 'use client'; at the top, so it will cause an error in Next.js.

3. Final Answer:

   Missing 'use client'; directive at the top -> Option D

4. Quick Check:

   Client components need 'use client' [OK]

Hint: Always add 'use client'; on top when using hooks [OK]

Common Mistakes:

• Forgetting 'use client' directive
• Thinking useState syntax is wrong
• Assuming onClick handler is invalid

5. You want to create a Next.js client component that toggles between showing and hiding a message when a button is clicked. Which code snippet correctly implements this behavior?

hard

A. "use client";
import { useState } from 'react';

export default function ShowHide() {
const [visible, setVisible] = useState(false);
return (
<>
setVisible(!visible)}>
{visible ? 'Hide' : 'Show'} Message

{visible && Hello, this is the message!}
</>
);
}

B. "use client";
import { useState } from 'react';

export default function ShowHide() {
const visible = false;
return (
<>
(visible = !visible)}>
{visible ? 'Hide' : 'Show'} Message

{visible && Hello, this is the message!}
</>
);
}

C. import { useState } from 'react';

export default function ShowHide() {
const [visible, setVisible] = useState(false);
return (
<>
setVisible(!visible)}>
{visible ? 'Hide' : 'Show'} Message

{visible && Hello, this is the message!}
</>
);
}

D. "use client";
import { useState } from 'react';

export default function ShowHide() {
const [visible, setVisible] = useState(false);
return (
<>
setVisible(visible)}>
{visible ? 'Hide' : 'Show'} Message

{visible && Hello, this is the message!}
</>
);
}

Solution

1. Step 1: Check for 'use client' directive and useState usage

   "use client"; import { useState } from 'react'; export default function ShowHide() { const [visible, setVisible] = useState(false); return ( <> setVisible(!visible)}> {visible ? 'Hide' : 'Show'} Message {visible &&

   Hello, this is the message!

   } </> ); } correctly includes 'use client'; and uses useState to track visibility state.

2. Step 2: Verify toggle logic and rendering

   The button toggles visible state with setVisible(!visible), and the message shows only when visible is true.

3. Final Answer:

   Option A code snippet correctly implements the toggle behavior -> Option A

4. Quick Check:

   Toggle state with useState and 'use client' [OK]

Hint: Use useState and 'use client'; toggle with setVisible(!visible) [OK]

Common Mistakes:

• Not adding 'use client' directive
• Trying to change state variable directly
• Passing current state to setter without toggling