React Performance

Only include values that the effect actually depends on. Avoid objects/arrays that change reference every render.

// BAD — entire config object in deps
useEffect(() => { fetch(config.url); }, [config]);

// GOOD — only the value used
useEffect(() => { fetch(config.url); }, [config.url]);

R-3. Calculate Derived State During Rendering (MEDIUM)

Don't use useEffect + setState for values derivable from existing state/props.

// BAD — useEffect to compute derived state
const [items, setItems] = useState([]);
const [count, setCount] = useState(0);
useEffect(() => { setCount(items.length); }, [items]);

// GOOD — compute inline or useMemo
const count = items.length;
// or for expensive computations:
const filtered = useMemo(() => items.filter(expensivePredicate), [items]);

R-4. Subscribe to Derived State (MEDIUM)

When using external stores, select only the derived value you need.

// BAD — subscribes to entire state
const state = useStore();
const isActive = state.items.some((i) => i.active);

// GOOD — subscribes to derived value only
const isActive = useStore((s) => s.items.some((i) => i.active));

R-5. Use Functional setState Updates (MEDIUM)

When new state depends on previous state, use the functional form to avoid stale closures and unnecessary deps.

// BAD — depends on count in closure
setCount(count + 1);

// GOOD — reads latest value
setCount((prev) => prev + 1);

R-6. Use Lazy State Initialization (MEDIUM)

Pass a function to useState for expensive initial values. The function runs only on mount.

// BAD — runs every render
const [data] = useState(expensiveComputation());

// GOOD — runs once
const [data] = useState(() => expensiveComputation());

R-7. Extract Default Non-primitive Parameter Value (MEDIUM)

Inline default objects/arrays create new references every render, breaking memoization.

// BAD — new array every render
function List({ items = [] }) { ... }

// GOOD — stable reference
const EMPTY_ITEMS: Item[] = [];
function List({ items = EMPTY_ITEMS }) { ... }

R-8. Extract to Memoized Components (MEDIUM)

When a parent re-renders frequently but a child is expensive and its props rarely change, extract and memoize.

// GOOD
const ExpensiveChild = memo(function ExpensiveChild({ data }: Props) {
  return <>{/* heavy rendering */}</>;
});

Only use memo when profiling shows the component is a bottleneck. Don't blanket-memo everything.

R-9. Put Interaction Logic in Event Handlers (MEDIUM)

Move logic that responds to user actions into event handlers, not effects.

// BAD — effect watches for state change triggered by click
useEffect(() => {
  if (submitted) sendForm(data);
}, [submitted]);

// GOOD — handler does it directly
const handleSubmit = () => sendForm(data);

R-10. Don't Define Components Inside Components (HIGH)

Inner component definitions create new references every render, causing unmount/remount.

// BAD — Header recreated every render
function Page() {
  function Header() { return <Text>Title</Text>; }
  return <Header />;
}

// GOOD — defined outside
function Header() { return <Text>Title</Text>; }
function Page() { return <Header />; }

R-11. Don't Wrap Simple Expressions in useMemo (LOW)

Memoization has overhead. Only use it for genuinely expensive computations.

// BAD — memoizing a simple lookup
const label = useMemo(() => items.find((i) => i.id === id)?.label, [items, id]);

// GOOD — just compute it
const label = items.find((i) => i.id === id)?.label;

R-12. Use Transitions for Non-Urgent Updates (MEDIUM)

Wrap non-urgent state updates in startTransition to keep the UI responsive.

import { useTransition } from 'react';

const [isPending, startTransition] = useTransition();
const handleSearch = (query: string) => {
  startTransition(() => setSearchResults(filterResults(query)));
};

R-13. Use useRef for Transient Values (MEDIUM)

Values that change frequently but don't need to trigger re-renders belong in refs.

// BAD — re-renders on every scroll
const [scrollY, setScrollY] = useState(0);

// GOOD — no re-renders (use Reanimated useSharedValue for RN)
const scrollY = useRef(0);

2. JavaScript Performance (13 rules)

J-1. Avoid Layout Thrashing (MEDIUM)

Batch DOM reads and writes. In RN, avoid interleaving measure() calls with state updates.

J-2. Cache Repeated Function Calls (MEDIUM)

If a function is called multiple times with the same input in a loop, cache the result.

// BAD
items.forEach((item) => {
  const config = getConfig(item.type); // called repeatedly with same type
});

// GOOD
const configCache = new Map<string, Config>();
items.forEach((item) => {
  if (!configCache.has(item.type)) configCache.set(item.type, getConfig(item.type));
  const config = configCache.get(item.type)!;
});

J-3. Cache Property Access in Loops (LOW-MEDIUM)

Store frequently accessed properties in a local variable before looping.

// BAD
for (let i = 0; i < items.length; i++) { process(items[i]); }

// GOOD
const len = items.length;
for (let i = 0; i < len; i++) { process(items[i]); }

J-4. Cache Storage API Calls (LOW-MEDIUM)

Don't read from AsyncStorage/SecureStore inside loops or frequent callbacks. Read once and cache.

J-5. Combine Multiple Array Iterations (LOW-MEDIUM)

If you chain .filter().map(), consider a single .reduce() or loop.

// BAD — 2 iterations
const result = items.filter((i) => i.active).map((i) => i.name);

// GOOD — 1 iteration
const result: string[] = [];
for (const i of items) {
  if (i.active) result.push(i.name);
}

J-6. Early Return from Functions (LOW-MEDIUM)

Check preconditions first and return early to avoid unnecessary computation.

function processItems(items: Item[]) {
  if (items.length === 0) return [];
  // ... expensive logic
}

J-7. Use flatMap to Map and Filter in One Pass (LOW-MEDIUM)

// BAD
items.filter((i) => i.active).map((i) => i.name);

// GOOD
items.flatMap((i) => (i.active ? [i.name] : []));

J-8. Hoist RegExp Creation (LOW-MEDIUM)

Create RegExp once outside the function, not on every call.

// BAD
function validate(input: string) { return /^[a-z]+$/i.test(input); }

// GOOD
const ALPHA_REGEX = /^[a-z]+$/i;
function validate(input: string) { return ALPHA_REGEX.test(input); }

J-9. Build Index Maps for Repeated Lookups (LOW-MEDIUM)

If you repeatedly search an array by a key, build a Map first.

// BAD — O(n) per lookup
const user = users.find((u) => u.id === targetId);

// GOOD — O(1) per lookup after O(n) build
const userMap = new Map(users.map((u) => [u.id, u]));
const user = userMap.get(targetId);

J-10. Early Length Check for Array Comparisons (MEDIUM-HIGH)

Before deep-comparing arrays, check lengths first.

function arraysEqual(a: unknown[], b: unknown[]): boolean {
  if (a.length !== b.length) return false;
  return a.every((val, i) => val === b[i]);
}

J-11. Use Loop for Min/Max Instead of Sort (LOW)

// BAD — O(n log n)
const max = [...items].sort((a, b) => b.value - a.value)[0];

// GOOD — O(n)
const max = items.reduce((m, i) => (i.value > m.value ? i : m));

J-12. Use Set/Map for O(1) Lookups (LOW-MEDIUM)

// BAD — O(n) per check
const isAllowed = allowedIds.includes(id);

// GOOD — O(1) per check
const allowedSet = new Set(allowedIds);
const isAllowed = allowedSet.has(id);

J-13. Use toSorted() Instead of sort() (MEDIUM-HIGH)

sort() mutates the original array. toSorted() returns a new array.

// BAD — mutates
items.sort((a, b) => a.name.localeCompare(b.name));

// GOOD — immutable
const sorted = items.toSorted((a, b) => a.name.localeCompare(b.name));

3. RN Critical Rendering (2 rules)

C-1. Wrap Strings in Text Components (CRITICAL)

Bare strings outside <Text> crash the app.

// BAD — crashes
<View>{item.name}</View>

// GOOD
<View><Text>{item.name}</Text></View>

C-2. Never Use && with Potentially Falsy Values (CRITICAL)

0 && <Component /> renders 0 as text in RN → crash.

// BAD — renders "0" if count is 0 → crash
{count && <Text>{count}</Text>}

// GOOD
{count > 0 && <Text>{count}</Text>}
// or
{count ? <Text>{count}</Text> : null}

Quick Reference