Memory leak detection in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to clean up the effect and avoid memory leaks in a React Native component.

React Native

useEffect(() => {
  const subscription = someAPI.subscribe();
  return () => {
    subscription[1]();
  };
}, []);

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

Aremove

Bsubscribe

Cunsubscribe

Dcancel

Attempts:

3 left

💡 Hint

Common Mistakes

Calling subscribe() again in the cleanup function causes repeated subscriptions.

Not returning a cleanup function leads to memory leaks.

To avoid memory leaks, you must unsubscribe from subscriptions when the component unmounts. The correct method is unsubscribe().

2fill in blank

medium

Complete the code to cancel a timer in React Native to prevent memory leaks.

React Native

useEffect(() => {
  const timer = setTimeout(() => {
    doSomething();
  }, 1000);
  return () => {
    clear[1](timer);
  };
}, []);

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

Atimeout

Binterval

Ctimer

Ddelay

Attempts:

3 left

💡 Hint

Common Mistakes

Using clearInterval() for a timeout causes the timer to keep running.

Not clearing timers causes memory leaks.

To clear a timeout timer, use clearTimeout() in the cleanup function.

3fill in blank

hard

Fix the error in the cleanup function to prevent memory leaks when using event listeners.

React Native

useEffect(() => {
  const handler = () => console.log('Event');
  window.addEventListener('resize', handler);
  return () => {
    window.removeEventListener('resize', [1]);
  };
}, []);

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

Ahandler

Bhandler()

C'handler'

D() => handler

Attempts:

3 left

💡 Hint

Common Mistakes

Calling the handler function instead of passing it causes the listener not to be removed.

Passing a string instead of a function reference causes errors.

The cleanup must pass the exact same function reference used in addEventListener. Passing handler without parentheses is correct.

4fill in blank

hard

Fill both blanks to correctly clean up a subscription and a timer in React Native.

React Native

useEffect(() => {
  const subscription = api.subscribe();
  const timer = setInterval(() => update(), 1000);
  return () => {
    subscription[1]();
    clear[2](timer);
  };
}, []);

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

Aunsubscribe

Btimeout

Cinterval

Dcancel

Attempts:

3 left

💡 Hint

Common Mistakes

Using clearTimeout() instead of clearInterval() for interval timers.

Not unsubscribing from subscriptions causes memory leaks.

Use unsubscribe() to stop the subscription and clearInterval() to clear the interval timer.

5fill in blank

hard

Fill all three blanks to create a safe effect that fetches data, sets state, and cleans up properly to avoid memory leaks.

React Native

useEffect(() => {
  let isMounted = true;
  fetchData().then(data => {
    if ([1]) {
      setData([2]);
    }
  });
  return () => {
    [3] = false;
  };
}, []);

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

AisMounted

Bdata

Attempts:

3 left

💡 Hint

Common Mistakes

Not checking if the component is mounted before setting state.

Forgetting to update the flag in the cleanup function.

Use a flag isMounted to check if the component is still mounted before setting state. Set isMounted = false in cleanup to avoid memory leaks.

Practice

1.

What is a common cause of memory leaks in React Native apps?

useEffect hooks that do not clean up resources properly.

easy

A. Not cleaning up subscriptions or timers in useEffect

B. Using too many View components

C. Writing styles inline instead of in StyleSheet

D. Using functional components instead of class components

Solution

1. Step 1: Understand memory leaks in React Native

   Memory leaks often happen when resources like timers or subscriptions are not cleaned up after a component unmounts.

2. Step 2: Identify the role of useEffect cleanup

   The cleanup function inside useEffect is used to clear timers or unsubscribe to prevent leaks.

3. Final Answer:

   Not cleaning up subscriptions or timers in useEffect -> Option A

4. Quick Check:

   Failing to cleanup in useEffect causes leaks = B [OK]

Hint: Always clean timers and subscriptions in useEffect cleanup [OK]

Common Mistakes:

• Ignoring cleanup functions in useEffect
• Confusing styling issues with memory leaks
• Thinking functional components cause leaks

2.

Which of the following is the correct syntax to clean up a timer inside useEffect?

useEffect(() => {
  const timer = setTimeout(() => console.log('Hi'), 1000);
  return () => ???
}, []);

easy

A. clearTimeout(timer);

B. clearInterval(timer);

C. cancelTimeout(timer);

D. stopTimer(timer);

Solution

1. Step 1: Identify the timer type

   The timer is created with setTimeout, so it must be cleared with clearTimeout.

2. Step 2: Match cleanup function

   The cleanup function should call clearTimeout(timer) to cancel the timer.

3. Final Answer:

   clearTimeout(timer); -> Option A

4. Quick Check:

   setTimeout cleared by clearTimeout = A [OK]

Hint: Match setTimeout with clearTimeout in cleanup [OK]

Common Mistakes:

• Using clearInterval for setTimeout
• Using non-existent cancelTimeout or stopTimer
• Forgetting to return cleanup function

3.

What will happen if the following React Native component does NOT clean up the interval?

function Timer() {
  React.useEffect(() => {
    const id = setInterval(() => console.log('tick'), 1000);
  }, []);
  return null;
}

medium

A. The component will throw a syntax error

B. The interval stops automatically when component unmounts

C. The interval runs only once and stops

D. The interval keeps running even after component unmount, causing memory leak

Solution

1. Step 1: Analyze useEffect without cleanup

   The interval is set but no cleanup function is returned, so it never stops.

2. Step 2: Understand effect of missing cleanup

   When the component unmounts, the interval keeps running, causing a memory leak.

3. Final Answer:

   The interval keeps running even after component unmount, causing memory leak -> Option D

4. Quick Check:

   No cleanup means interval runs forever = C [OK]

Hint: No cleanup in useEffect means timers leak [OK]

Common Mistakes:

• Assuming intervals stop automatically
• Confusing syntax errors with runtime leaks
• Thinking interval runs only once

4.

Identify the bug causing a memory leak in this React Native component:

function DataFetcher() {
  React.useEffect(() => {
    const subscription = api.subscribe(data => console.log(data));
    // Missing cleanup function here
  }, []);
  return null;
}

medium

A. Empty dependency array in useEffect

B. Missing cleanup function to unsubscribe from api

C. Not returning JSX from component

D. Using arrow function inside useEffect

Solution

1. Step 1: Check subscription management

   The component subscribes to an API but does not unsubscribe on unmount.

2. Step 2: Identify missing cleanup

   Without returning a cleanup function that calls subscription.unsubscribe(), the subscription stays active causing a leak.

3. Final Answer:

   Missing cleanup function to unsubscribe from api -> Option B

4. Quick Check:

   Missing subscription cleanup causes leak = D [OK]

Hint: Always unsubscribe in useEffect cleanup [OK]

Common Mistakes:

• Thinking arrow functions cause leaks
• Confusing JSX return with memory leaks
• Ignoring cleanup for subscriptions

5.

You have a React Native component that fetches data every 5 seconds using setInterval. How should you modify the code to prevent memory leaks when the component unmounts?

function PollingComponent() {
  React.useEffect(() => {
    const id = setInterval(() => fetchData(), 5000);
    // What goes here?
  }, []);
  return null;
}

hard

A. Remove the dependency array from useEffect

B. Call fetchData() once outside useEffect

C. Return a cleanup function that calls clearInterval(id)

D. Use setTimeout instead of setInterval without cleanup

Solution

1. Step 1: Understand interval usage

   The component sets an interval to fetch data repeatedly every 5 seconds.

2. Step 2: Prevent memory leak on unmount

   To stop the interval when the component unmounts, return a cleanup function that calls clearInterval(id).

3. Final Answer:

   Return a cleanup function that calls clearInterval(id) -> Option C

4. Quick Check:

   Clear intervals in cleanup to avoid leaks = A [OK]

Hint: Always clear intervals in useEffect cleanup [OK]

Common Mistakes:

• Removing dependency array breaks effect logic
• Using setTimeout without cleanup causes leaks
• Calling fetchData only once misses polling