Memory leak detection in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Detecting memory leaks in React Native components

Consider a React Native component that fetches data on mount and sets state. Which behavior below most likely indicates a memory leak?

A The component renders correctly but shows a loading spinner indefinitely.

B The component updates state after it has been unmounted, causing a warning.

C The component crashes immediately on launch with a syntax error.

D The component fails to fetch data on mount and shows a blank screen.

💡 Hint

Think about what happens if asynchronous tasks try to update state after the component is gone.

When a component updates state after unmounting, React warns about a potential memory leak because the component no longer exists but still tries to update.

🧠 Conceptual

intermediate

Understanding cleanup in useEffect

In React Native, which useEffect pattern helps prevent memory leaks when subscribing to events?

React Native

useEffect(() => {
  const subscription = eventEmitter.addListener('event', handler);
  return () => {
    subscription.remove();
  };
}, []);

A Returning a cleanup function that removes the subscription.

B Not returning anything from useEffect.

C Calling the subscription inside the effect without cleanup.

D Using setTimeout inside useEffect without clearing it.

💡 Hint

Think about how to stop listening to events when the component unmounts.

Returning a cleanup function in useEffect ensures subscriptions are removed, preventing memory leaks.

❓ lifecycle

advanced

Identifying memory leaks from timers

What is the output behavior when a React Native component sets a timer with setInterval but does not clear it on unmount?

React Native

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

A Console logs 'tick' every second even after component unmounts, causing memory leak.

B Console logs 'tick' only while component is mounted, then stops automatically.

C Component throws an error on unmount due to missing clearInterval.

D No console output because setInterval is never called.

💡 Hint

Consider what happens to timers when components unmount without cleanup.

Without clearing the interval, the timer keeps running after unmount, causing memory leaks.

🔧 Debug

advanced

Finding the cause of a memory leak warning

Given this React Native code, what causes the memory leak warning? function Example() { const [data, setData] = React.useState(null); React.useEffect(() => { fetchData().then(response => setData(response)); }, []); return null; }

A No memory leak because useEffect has empty dependency array.

B fetchData is not awaited, causing syntax error.

C setData is called synchronously inside useEffect, no warning.

D fetchData promise resolves after component unmounts, setData called on unmounted component.

💡 Hint

Think about asynchronous calls and component lifecycle.

If fetchData resolves after unmount, setData tries to update state on unmounted component causing warning.

🧠 Conceptual

expert

Best practice to avoid memory leaks in React Native navigation

In React Navigation, which practice helps prevent memory leaks when navigating between screens?

A Use setTimeout without clearing it to delay navigation.

B Keep all event listeners active to maintain state across screens.

C Remove event listeners and cancel async tasks in useEffect cleanup before screen unmount.

D Avoid using useEffect to manage side effects on screens.

💡 Hint

Think about cleaning up resources when leaving a screen.

Cleaning up listeners and async tasks prevents memory leaks when screens unmount.