Mobile Performance Standards

Field	Details
Status	ACTIVE
Last Updated	12-05-2026

---

Purpose

Defines the standards and best practices for building consistent, scalable, and high-quality mobile applications.

---

Scope

Applies to: e.g. All mobile applications / All new code after 2026-05-12

Does not apply to: e.g. Legacy code, third-party libraries

---

Optimize FlatList Usage

Bad:

<FlatList
  data={largeData}
/>

Preferred:

<FlatList
  data={largeData}
  initialNumToRender={10}
  windowSize={5}
  removeClippedSubviews
/>

Additional Recommendations

Use:

keyExtractor
Pagination
Infinite scrolling
Lazy loading

Avoid:

Nested FlatLists
Huge lists inside ScrollViews

---

Avoid Large Re-renders

Avoid updating entire screen for small changes.

Preferred:

Split components
Memoize components
Use proper dependency arrays

---

Optimize Images

Avoid loading original high-resolution images everywhere.

Recommended:

Compress images before upload
Use thumbnails in lists
Cache images where needed

---

Avoid Heavy Calculations Inside Render

Bad Example:

<Text>
  {largeArray.filter(x => x.status === 'ACTIVE').length}
</Text>

Preferred Example:

const activeCount = useMemo(() => {
  return largeArray.filter(
    x => x.status === 'ACTIVE'
  ).length;
}, [largeArray]);

---

Avoid Multiple API Calls on Screen Load

Bad Example:

useEffect(() => {
  getOrders();
  getUsers();
  getRoutes();
  getVehicles();
  getStats();
}, []);

Preferred Approaches:

- Load critical data first
- Lazy load secondary data
- Use caching where possible

---

Prevent Memory Leaks

Memory leaks can cause:

Slow app performance, Crashes, Battery drain

Bad Example:

useEffect(() => {
  const interval = setInterval(() => {
    fetchData();
  }, 5000);
}, []);

Preferred Example:

useEffect(() => {
  const interval = setInterval(() => {
    fetchData();
  }, 5000);

  return () => clearInterval(interval);
}, []);

---

Debounce Expensive Operations

Useful for:

Search inputs, API calls, Filtering large data

Bad Example:

onChangeText={(text) => {
  searchUsers(text);
}}

Preferred Example:

const debouncedSearch = debounce(searchUsers, 500);

---

Reduce Initial App Startup Time

Users should not wait long on splash screen.

Avoid During Startup:
- Large API calls
- Heavy calculations
- Loading unnecessary modules

Load only:

- Authentication status
- Critical configs
- Essential user data

---

Optimize Navigation Performance

Bad Example:

Passing huge objects through navigation.

navigation.navigate('Details', {
  completeOrderData: hugeObject
});

Preferred Example:

navigation.navigate('Details', {
  orderId: item.id
});

---

Exceptions

No exceptions.

---

Related Documents

N/A

---

Changelog

Version	Date	Author	Change
1.0.0	2026-05-12	Appu S Palathinkal	Initial version