Techniques for minimizing re-renders in React Native

Understanding Causes of Re-renders in React Native

Re-renders primarily occur due to:
- State changes within a component.
- Props changes from a parent component.
- Changes in context values when using React Context API.
- Creating new references for objects, arrays, or functions passed as props.
- Inline functions or objects that are re-created on every render.

Each of these modifications signals React Native to re-execute the render method, potentially leading to re-renders of child components unnecessarily.

Techniques to Minimize Re-renders

1. Use React.memo for Component Memoization

React.memo is a higher-order component that memoizes a functional component, making React skip re-rendering it when its props have not changed (via shallow comparison). This is especially beneficial for components receiving primitive or stable props, reducing redundant computations.

jsx
const ChildComponent = React.memo(({ count }) => {
  console.log('Child component rendered');
  return Count: {count};
});

This will re-render `ChildComponent` only when the `count` prop changes, thus reducing unnecessary rendering cycles.

2. Memoize Functions with useCallback

Functions are objects in JavaScript and create new references on every render. Passing such functions as props causes child components to re-render since prop references are different.

`useCallback` is a hook that returns a memoized version of a callback function that only changes if its dependencies change.

jsx
const increment = useCallback(() => setCount(count + 1), [count]);

This ensures that `increment` retains the same reference unless `count` changes, preventing unnecessary re-renders of child components relying on this callback.

3. Memoize Expensive Calculations with useMemo

`useMemo` caches the result of expensive computations or transformations and only recalculates them when dependencies change. This can prevent costly recalculations on every render.

jsx
const processedData = useMemo(() => processData(data), [data]);

This technique not only reduces computation but also stabilizes object references, preventing re-renders when passing these as props.

4. Optimize Context Usage and Avoid Excessive Context Updates

Context API changes trigger re-renders in all consuming components regardless of whether they use updated values. To minimize this, split context into smaller, focused contexts so that only components needing a slice of the context value re-render.

Additionally, memoizing context values ensures stable references that prevent unnecessary re-renders.

5. Avoid Inline Functions and Object Literals in JSX

Creating functions or objects inline inside the render method causes new references on every render, forcing child components to re-render.

Instead of:

jsx
 handlePress(item.id)} />

Define and memoize handler outside the render:

jsx
const handlePress = useCallback((id) => { /* handle press */ }, []);
 handlePress(item.id)} />

Or better, use:

jsx

This practice improves reference stability and reduces renders.

6. Use PureComponent or React.PureComponent for Class Components

For class components, extending `PureComponent` instead of `Component` adds a shallow prop and state comparison in `shouldComponentUpdate`, automatically preventing unnecessary re-renders when input props/state haven't changed.

7. Use FlatList and SectionList for Large Lists

Rendering large lists with general-purpose components like ScrollView leads to re-renders of all list items. Using FlatList or SectionList in React Native allows rendering only visible items and recycling item components, reducing work and preventing re-renders for off-screen items.

8. Batch State Updates

React batches state updates in event handlers by default, which reduces multiple re-renders caused by successive state changes. Ensuring that state updates happen within the same event loop keeps re-rendering to a minimum.

9. Use useRef for Mutable Values That Don't Cause Re-renders

When you need to keep track of a value that should not trigger re-renders when changed (like a timer ID or mutable instance), use `useRef` instead of state. This keeps the mutable value without forcing React to re-render the component.

Example:

jsx
const timerRef = useRef(null);

This avoids unnecessary re-renders caused by updating state for mutable values that don't affect rendering.

10. Profiling and Measuring Re-renders

Use React Developer Tools Profiler to identify components causing bottlenecks due to excessive re-renders. Measure performance only when necessary to pinpoint inefficiencies before premature optimization, ensuring targeted improvements.

11. Avoid Putting Logic Inside useEffect That Can Be Done Elsewhere

Putting non-side-effect logic inside `useEffect` may cause unnecessary re-renders or effect re-executions. Move computations or derived data outside effect hooks when possible to avoid extra renders.

12. Leverage Concurrent Features and Suspense

React 18+ offers concurrent rendering features that improve responsiveness by interrupting long renders and prioritizing user interactions. This can indirectly reduce the perceived cost of re-renders by making UI updates more efficient.

***

Summary

Minimizing re-renders in React Native involves understanding how React detects changes and updating its tree intelligently. Key approaches to optimize rendering include:

- Using `React.memo` for pure functional components to avoid re-renders on unchanged props.
- Memoizing functions and values passed as props with `useCallback` and `useMemo`.
- Splitting and memoizing contexts to avoid cascading re-renders.
- Avoiding inline functions and object literals in JSX.
- Leveraging `PureComponent` for class components.
- Using efficient list components like `FlatList`.
- Batching state updates.
- Using `useRef` for mutable data that doesn't affect rendering.
- Profiling components to find re-render issues.
- Avoiding unnecessary side-effect dependencies.