State re-render behavior in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to update state and trigger a re-render in a React functional component.

React

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

function increment() {
  setCount([1]);
}

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

Acount + 1

Bcount - 1

C0

Dcount

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same value without change, so no re-render happens.

Decreasing the count instead of increasing it.

Using setCount(count + 1) updates the state by increasing the count by 1, which triggers a re-render.

2fill in blank

medium

Complete the code to correctly read the current state value inside a functional component.

React

const [name, setName] = useState('');

return <p>Hello, [1]!</p>;

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

AName

Bname

CsetName

DuseState

Attempts:

3 left

💡 Hint

Common Mistakes

Using the setter function instead of the state value.

Using a capitalized variable that does not exist.

The variable name holds the current state value, so it should be used to display the name.

3fill in blank

hard

Fix the error in the code to properly update state based on the previous state value.

React

setCount([1] => [1] + 1);

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

Aprev

Bcount

Cstate

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using the state variable directly inside the updater function.

Using a variable name that is not defined.

Using a function with a parameter like prev ensures you get the latest state value when updating.

4fill in blank

hard

Fill both blanks to create a state object and update one property without losing others.

React

const [user, setUser] = useState({ name: '', age: 0 });

setUser({ ...user, [1]: [2] });

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

Aname

Bage

C'John'

D30

Attempts:

3 left

💡 Hint

Common Mistakes

Not using the spread operator, which overwrites the whole object.

Mixing property names and values incorrectly.

Using the spread operator ...user keeps existing properties, and updating name to 'John' changes only that property.

5fill in blank

hard

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

React

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

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

Acount

CsetCount

Dincrement

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving dependencies empty or missing required variables.

Using incorrect variable names in the dependencies.

The callback uses the current count to update state, and the dependencies include count and setCount to ensure the function updates correctly.