React.memo and useMemo in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output when using React.memo?

Consider a React Native component wrapped with React.memo. What happens when its parent re-renders but the props do not change?

React Native

const Child = React.memo(({count}) => {
  console.log('Child rendered');
  return <Text>{count}</Text>;
});

function Parent() {
  const [count, setCount] = React.useState(0);
  const [other, setOther] = React.useState(0);

  return (
    <>
      <Child count={count} />
      <Button title="Update Other" onPress={() => setOther(other + 1)} />
    </>
  );
}

A Child component re-renders every time Parent re-renders, regardless of prop changes.

B Child component re-renders only when 'other' changes.

C Child component never re-renders after first render, even if 'count' changes.

D Child component re-renders only when 'count' changes; pressing 'Update Other' does NOT re-render Child.

💡 Hint

React.memo prevents re-render if props are the same.

React.memo wraps a component and skips re-rendering if its props have not changed. Here, 'count' is the only prop. Updating 'other' state in Parent does not affect Child's props, so Child does not re-render.

❓ ui_behavior

intermediate

How does useMemo affect expensive calculations?

Given a component that calculates a value using useMemo, when does the calculation run?

React Native

function ExpensiveComponent({num}) {
  const computed = React.useMemo(() => {
    console.log('Calculating...');
    return num * 2;
  }, [num]);

  return <Text>{computed}</Text>;
}

A Calculation runs only when 'num' changes; otherwise cached value is used.

B Calculation runs on every render regardless of 'num'.

C Calculation runs only once when component mounts and never again.

D Calculation never runs because useMemo caches nothing.

💡 Hint

useMemo caches the result until dependencies change.

useMemo runs the function only when dependencies change. Here, it recalculates only when 'num' changes, otherwise returns cached value.

❓ lifecycle

advanced

Why might React.memo not prevent re-rendering?

Why does a React.memo wrapped component still re-render when passed an object prop created inline in the parent?

React Native

const Child = React.memo(({data}) => {
  console.log('Child rendered');
  return <Text>{data.value}</Text>;
});

function Parent() {
  const [count, setCount] = React.useState(0);

  return (
    <>
      <Child data={{value: count}} />
      <Button title="Increment" onPress={() => setCount(count + 1)} />
    </>
  );
}

A Because the object prop is a new reference each render, React.memo sees it as changed and re-renders Child.

B React.memo only works with primitive props, not objects.

C React.memo is broken and does not prevent any re-renders.

D Child re-renders because 'count' is a state variable.

💡 Hint

Objects created inline are new every render.

React.memo does a shallow comparison of props. Inline objects are new references each render, so React.memo thinks props changed and re-renders.

📝 Syntax

advanced

What is the output of this useMemo code snippet?

What will be logged and displayed when this component renders and the button is pressed twice?

React Native

function Counter() {
  const [count, setCount] = React.useState(0);
  const doubled = React.useMemo(() => {
    console.log('Calculating doubled');
    return count * 2;
  }, [count]);

  return (
    <>
      <Text>{doubled}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
    </>
  );
}

A Logs nothing; displays 0 then 0 after two presses.

B Logs 'Calculating doubled' once; displays 0 then 4 after two presses.

C Logs 'Calculating doubled' three times; displays 2 then 4 after two presses.

D Logs 'Calculating doubled' three times; displays 1 then 2 after two presses.

💡 Hint

useMemo runs on initial render and when dependencies change.

Initially runs once logging 'Calculating doubled'. Each button press increments count, triggering useMemo recalculation and logging again. After two presses, doubled is 4.

🔧 Debug

expert

Why does this React.memo component still re-render unexpectedly?

Identify the reason why the Child component re-renders every time even though it is wrapped with React.memo.

React Native

const Child = React.memo(({onClick}) => {
  console.log('Child rendered');
  return <Button title="Click" onPress={onClick} />;
});

function Parent() {
  const [count, setCount] = React.useState(0);

  return (
    <>
      <Child onClick={() => setCount(count + 1)} />
      <Text>{count}</Text>
    </>
  );
}

A Child re-renders because setCount changes on every render.

B Because the onClick function is recreated inline on every render, React.memo sees it as a new prop and re-renders Child.

C React.memo does not work with function props at all.

D Child re-renders because count is passed as a prop.

💡 Hint

Functions declared inline are new references each render.

Inline arrow functions create new references each render. React.memo shallow compares props and sees onClick changed, causing re-render.