Re-rendering behavior in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a state variable using React hooks.

React

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

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

AuseRef

BuseState

CuseEffect

DuseContext

Attempts:

3 left

💡 Hint

Common Mistakes

Using useEffect instead of useState for state variables.

Trying to update state without a setter function.

The useState hook creates a state variable and a function to update it, which triggers re-rendering.

2fill in blank

medium

Complete the code to run a side effect after every render.

React

useEffect(() => { console.log('Rendered'); }, [1]);

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

A[]

B[count]

Cnull

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Passing an empty array to run effect only once.

Passing a specific state variable to run effect only when it changes.

Omitting the dependency array or passing undefined causes useEffect to run after every render.

3fill in blank

hard

Fix the error in the code that causes unnecessary re-renders.

React

const memoizedValue = useMemo(() => computeExpensiveValue(), [1]);

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

A[memoizedValue]

B[computeExpensiveValue]

C[]

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving dependencies undefined causing recomputation every render.

Including the function itself as a dependency causing infinite loops.

Passing an empty array ensures the expensive computation runs only once, preventing unnecessary re-renders.

4fill in blank

hard

Fill both blanks to prevent unnecessary re-renders by memoizing the callback and its dependencies.

React

const handleClick = useCallback(() => { setCount(count [1] 1); }, [2]);

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

A+

B-

C[count]

D[]

Attempts:

3 left

💡 Hint

Common Mistakes

Using an empty dependency array causing stale closures.

Using subtraction instead of addition changing the logic.

The callback increments count by 1 and depends on count, so it must be included in the dependency array.

5fill in blank

hard

Fill all three blanks to create a memoized list of even numbers from props.numbers.

React

const evenNumbers = useMemo(() => props.numbers.filter(num => num [1] 2 === 0), [2]); const count = evenNumbers[3]length;

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

A%

B[props.numbers]

C.

D==

Attempts:

3 left

💡 Hint

Common Mistakes

Using equality operator instead of modulo for even check.

Missing dependency array causing stale memo.

Using wrong syntax to access length property.

The modulo operator % checks for even numbers. The dependency array includes props.numbers so memo updates when numbers change. The dot . accesses the length property.