State synchronization patterns in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a React state hook for a counter.

NextJS

const [count, [1]] = useState(0);

Drag options to blanks, or click blank then click option'

AupdateCount

BgetCount

CsetCount

DchangeCount

Attempts:

3 left

💡 Hint

Common Mistakes

Using a function name that does not start with 'set' for the updater.

Confusing the state variable with the updater function.

The useState hook returns a pair: the current state and a function to update it. The convention is to name the updater function starting with 'set'.

2fill in blank

medium

Complete the code to update the state when a button is clicked.

NextJS

<button onClick={() => [1](count + 1)}>Increment</button>

Drag options to blanks, or click blank then click option'

AsetCount

Bcount

CupdateCount

DchangeCount

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to assign directly to the state variable instead of using the updater.

Using the state variable name instead of the updater function.

To update the state, you call the updater function returned by useState. Here, setCount updates the count state.

3fill in blank

hard

Fix the error in the code to synchronize state with a server response using useEffect.

NextJS

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

Drag options to blanks, or click blank then click option'

Adata

BsetData

CupdateData

DfetchData

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to assign data directly to the state variable.

Calling a function that does not exist or is not the updater.

Inside useEffect, to update the React state with fetched data, you must call the updater function, here setData.

4fill in blank

hard

Fill both blanks to create a controlled input that updates state on change.

NextJS

<input type="text" value=[1] onChange={e => [2](e.target.value)} />

Drag options to blanks, or click blank then click option'

AinputValue

BsetInputValue

Cvalue

DsetValue

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different variable name for value and updater.

Not updating state on input change.

The value attribute should be bound to the state variable (inputValue), and the onChange handler should call the updater function (setInputValue) with the new input.

5fill in blank

hard

Fill all three blanks to create a memoized callback that updates state only when needed.

NextJS

const handleClick = useCallback(() => {
  [1]([2] + 1);
}, [[3]]);

Drag options to blanks, or click blank then click option'

AsetCount

Bcount

DupdateCount

Attempts:

3 left

💡 Hint

Common Mistakes

Not including the state variable in the dependency array.

Using the wrong function name for updating state.

The useCallback hook memoizes the function. Inside, you call the updater setCount with count + 1. The dependency array includes count to update the callback when count changes.