useCallback optimization in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Why use useCallback in React Native?

You have a button component that receives a function prop. Without useCallback, what problem might occur when the parent re-renders?

A The button will never re-render even if props change.

B The button re-renders unnecessarily because the function prop changes reference each time.

C The app crashes due to infinite loops.

D The function prop becomes undefined.

💡 Hint

Think about how JavaScript compares functions passed as props.

Without useCallback, a new function is created on every render, causing child components to think props changed and re-render.

❓ lifecycle

intermediate

useCallback dependencies effect

What happens if you omit dependencies in useCallback like this: useCallback(() => doSomething(), [])?

A The callback never updates even if doSomething changes, possibly causing stale closures.

B The callback updates every render automatically.

C The callback runs immediately on render.

D It causes a syntax error.

💡 Hint

Consider what an empty dependency array means for memoization.

An empty dependency array means the function is created once and never updated, so if doSomething changes, the callback still uses the old version.

📝 Syntax

advanced

Identify the correct useCallback syntax

Which option shows the correct syntax for useCallback that depends on a variable count?

React Native

const memoizedCallback = useCallback(() => {
  console.log(count);
}, [count]);

A const memoizedCallback = useCallback(() => console.log(count));

B const memoizedCallback = useCallback(() => { console.log(count) }, count);

C const memoizedCallback = useCallback(() => console.log(count), [count]);

D const memoizedCallback = useCallback(console.log(count), [count]);

💡 Hint

Remember useCallback takes a function and an array of dependencies.

Option C correctly passes a function and an array with count as dependency. Option C passes count directly, not in an array. Option C omits dependencies. Option C calls console.log immediately.

🔧 Debug

advanced

Why does this useCallback cause stale state?

Given this code snippet, why does the alert always show 0? const [count, setCount] = useState(0); const showAlert = useCallback(() => { alert(count); }, []);

A Because useCallback has an empty dependency array, it captures count as 0 and never updates.

B Because alert is asynchronous and shows old value.

C Because setCount was never called.

D Because useState is not initialized properly.

💡 Hint

Think about what an empty dependency array means for captured variables.

The callback is created once with count = 0 and never updates, so it always alerts 0 even if count changes later.

🧠 Conceptual

expert

When is useCallback NOT helpful?

In which scenario does using useCallback NOT improve performance in React Native?

A When the function is expensive to create.

B When the function depends on many changing dependencies.

C When the function is used inside useEffect.

D When the function is passed to a child that does not use React.memo or similar memoization.

💡 Hint

Consider when memoizing a function actually prevents re-renders.

If the child component does not memoize props, passing a memoized function does not prevent re-renders, so useCallback adds unnecessary complexity.