Dependency array usage in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to run the effect only once when the component mounts.

React

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

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

A[null]

B[true]

C[]

D[0]

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-empty array causes the effect to run more than once.

Leaving out the dependency array runs the effect on every render.

Using an empty array [] as the dependency array makes the effect run only once after the component mounts.

2fill in blank

medium

Complete the code to run the effect whenever the 'count' state changes.

React

useEffect(() => {
  console.log(`Count changed to ${count}`);
}, [1]);

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

A[count]

B[count, setCount]

C[setCount]

D[]

Attempts:

3 left

💡 Hint

Common Mistakes

Using an empty array means the effect won't run on count changes.

Including setter functions like setCount is unnecessary.

Including count in the dependency array makes the effect run whenever count changes.

3fill in blank

hard

Fix the error in the effect to avoid missing dependencies warning.

React

useEffect(() => {
  console.log(`User: ${user.name}`);
}, [1]);

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

A[user]

B[]

C[user.name]

D[name]

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving the dependency array empty causes stale data or warnings.

Using a non-existent variable like 'name' causes errors.

The effect uses user.name, so the whole user object should be in the dependency array to track changes properly.

4fill in blank

hard

Fill both blanks to run the effect when either 'propA' or 'stateB' changes.

React

useEffect(() => {
  console.log('Effect triggered');
}, [1]); // dependencies

const [stateB, setStateB] = useState(0);

// props: propA

// Effect depends on [2] and stateB

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

A[propA, stateB]

BpropA

CstateB

D[]

Attempts:

3 left

💡 Hint

Common Mistakes

Listing only one dependency causes missed updates.

Using an empty array means the effect never reruns.

The dependency array should include both propA and stateB to rerun the effect when either changes. The comment clarifies the effect depends on propA and stateB.

5fill in blank

hard

Fill all three blanks to create a memoized callback that updates 'count' and depends on 'count' and 'setCount'.

React

const increment = useCallback(() => {
  [1](count + 1);
}, [2]); // dependencies

// Variables used: count, setCount

// Dependency array: [3]

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

AsetCount

B[count, setCount]

Ccount

D[]

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving the dependency array empty causes stale closures.

Not calling the setter function correctly.

The callback calls setCount to update the count. The dependency array must include both count and setCount to keep the callback updated.

Practice

1. What does an empty dependency array [] in a useEffect hook mean?

easy

A. The effect runs only when a state changes.

B. The effect runs after every render.

C. The effect never runs.

D. The effect runs only once after the first render.

Solution

1. Step 1: Understand the role of dependency array

   The dependency array tells React when to run the effect based on changes in listed variables.

2. Step 2: Interpret empty array meaning

   An empty array means no variables to watch, so React runs the effect only once after the first render.

3. Final Answer:

   The effect runs only once after the first render. -> Option D

4. Quick Check:

   Empty array = run once [OK]

Hint: Empty array means run effect once after mount [OK]

Common Mistakes:

• Thinking empty array runs effect every render
• Confusing empty array with no array
• Assuming effect never runs with empty array

2. Which of the following is the correct syntax for a useEffect hook that runs only once after the component mounts?

easy

A. useEffect(() => { console.log('Hello'); });

B. useEffect(() => { console.log('Hello'); }, []);

C. useEffect(() => { console.log('Hello'); }, [{}]);

D. useEffect(() => { console.log('Hello'); }, [() => {}]);

Solution

1. Step 1: Identify correct useEffect syntax

   The second argument is the dependency array controlling when the effect runs.

2. Step 2: Check which option uses empty array

   useEffect(() => { console.log('Hello'); }, []); uses an empty array, so effect runs once after mount, which is correct.

3. Final Answer:

   useEffect(() => { console.log('Hello'); }, []); -> Option B

4. Quick Check:

   Empty array syntax = useEffect(() => { console.log('Hello'); }, []); [OK]

Hint: Empty array in second argument runs effect once [OK]

Common Mistakes:

• Omitting dependency array runs effect every render
• Using non-constant values in dependency array incorrectly
• Confusing dependency array with effect callback

3. Consider this code:

const [count, setCount] = useState(0);
useEffect(() => {
  console.log('Count is', count);
}, [count]);

setCount(1);
setCount(2);

What will be logged to the console?

medium

A. Count is 0, Count is 2

B. Count is 0 only

C. Count is 2 only

D. Count is 0, Count is 1, Count is 2

Solution

1. Step 1: Understand effect dependency on count

   The effect runs after first render (count=0) and whenever count changes.

2. Step 2: Analyze state updates

   Two state updates happen quickly: setCount(1) then setCount(2). React batches them, so only final count=2 triggers effect after initial render.

3. Final Answer:

   Count is 0, Count is 2 -> Option A

4. Quick Check:

   Effect runs on initial and final count change [OK]

Hint: Effect runs after render with latest dependency value [OK]

Common Mistakes:

• Assuming effect runs for every intermediate state update
• Ignoring batching of state updates
• Thinking effect runs before first render

4. What is wrong with this useEffect usage?

const [count, setCount] = useState(0);
useEffect(() => {
  console.log(count);
}, []);

medium

A. Effect will run only once and log initial count, ignoring updates.

B. Effect will never run because dependency array is empty.

C. Effect will run on every render causing infinite loop.

D. Syntax error due to missing dependencies.

Solution

1. Step 1: Check dependency array usage

   Empty array means effect runs once after first render only.

2. Step 2: Understand effect behavior with state

   Effect logs count only once with initial value, ignoring later count changes.

3. Final Answer:

   Effect will run only once and log initial count, ignoring updates. -> Option A

4. Quick Check:

   Empty array ignores state changes [OK]

Hint: Empty array ignores state changes inside effect [OK]

Common Mistakes:

• Thinking effect runs on every count change
• Assuming empty array stops effect from running
• Confusing syntax error with logical error

5. You have a useEffect that depends on two props: userId and filter. Which dependency array is correct to ensure the effect runs only when these props change?

useEffect(() => {
  fetchData(userId, filter);
}, ???);

hard

A. []

B. [fetchData]

C. [userId, filter]

D. [userId]

Solution

1. Step 1: Identify variables used inside effect

   The effect uses userId and filter inside its callback.

2. Step 2: List all used variables in dependency array

   To rerun effect when either userId or filter changes, both must be in the dependency array.

3. Final Answer:

   [userId, filter] -> Option C

4. Quick Check:

   List all used variables in dependencies [OK]

Hint: Include all used variables in dependency array [OK]

Common Mistakes:

• Leaving dependency array empty causing stale data
• Including functions that don't change as dependencies
• Listing only some used variables