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.