DEV Community

Cathy Lai
Cathy Lai

Posted on

React Explained: Mount vs Render (and Why It Matters in React Native)

#reactnative #react #beginners

If you’ve ever wondered why your React Native screen “resets” or a map “flickers” when data changes — it usually comes down to understanding the difference between mounting and rendering.

This article breaks it down clearly, with practical examples for React Native developers.

🧱 Mount vs Render (in plain English)

🟢 Mount

Mounting happens once, when a component first appears in the UI.

React creates the component, runs its hooks, and adds it to the view tree.

💡 Think of it as: “React just created this screen for the first time.”

Example:

// When you navigate to /house/123
// React mounts a fresh instance of <HouseDetails />
Enter fullscreen mode Exit fullscreen mode

On mount:

  • useEffect(() => { ... }, []) runs.
  • The initial UI is created and shown.

🔁 Render

Rendering happens every time React re-evaluates the component’s JSX output — often many times during its lifetime.

React will compare the new output with the previous one and efficiently update only what’s changed.

💡 Think of it as: “React is checking if something inside the same screen needs to update.”

Example:

// After Supabase fetch completes
setHouse(data);
// React re-renders <HouseDetails /> to show the new info
Enter fullscreen mode Exit fullscreen mode

A render does not destroy or recreate the component. It’s the same mounted component; React just re-runs the function to produce updated JSX.

🧭 What Triggers a Re-render

A component re-renders when:

  • Its state changes (useState, useReducer, etc.)
  • Its props change (values from a parent component)
  • Its context value changes (if using Context)

Each re-render re-runs the component function body — which is why memoization (useMemo, useCallback) helps keep object and function references stable across renders.

⚙️ Mount, Render, and Unmount in the Component Lifecycle

Phase Description Example
Mount Component is created and added to UI Navigating to House Details for the first time
Render Component recalculates its JSX output After data loads from Supabase
Unmount Component is destroyed and removed from UI Navigating away or closing the screen

🧭 Why It Matters (Example: Maps)

With react-native-maps, understanding this difference is critical:

Case Result
Mounting a new <MapView> Map fully resets (camera position, markers, zoom).
Re-rendering the same <MapView> UI updates but the map stays in place — smooth.
Changing the key prop Forces a remount (use only when you want a reset).

Example pitfall:

<MapView key={`${region.latitude},${region.longitude}`} />
Enter fullscreen mode Exit fullscreen mode

If region changes frequently, this will cause flicker because React thinks it’s a brand-new map every time.

🧩 Pro Tip: Keep the Component Stable

✅ Keep your <MapView> or other heavy components mounted once.

✅ Use useMemo() for objects like region or style to prevent re-renders.

✅ Only unmount or remount intentionally (e.g. on navigation or tab change).

🧠 Final Analogy

  • Mount → React builds a new house.
  • Render → React rearranges the furniture.
  • Unmount → React demolishes the house.

So, if your UI “resets” often, you’re probably rebuilding the house when you only meant to move the furniture.

✅ Summary

Concept Description
Mount Created once when component first appears
Render Re-run to update visuals based on new data
Unmount Removed from view and cleaned up
Key takeaway Keep components mounted; re-render efficiently

In your React Native apps, this understanding will help you fix flickers, optimize performance, and make components feel smoother — especially for heavy UI elements like maps, videos, and charts.

Top comments (0)