Rendering & Optimization in React

Overview

Rendering in React is the process of converting data (state, props) into UI.

Optimization ensures better performance and avoids unnecessary re-renders.

1. Conditional Rendering

Use if, &&, or ternary ? to render UI based on conditions.

// Using ternary
{isLoggedIn ? <Dashboard /> : <Login />}

// Using &&
{loading && <Spinner />}

Key Point:

• Conditional rendering is pure JavaScript logic.
• Don’t render hidden elements unnecessarily — it still affects performance.

2. List Rendering & Key

Render arrays of components using .map().

const users = ['Alice', 'Bob'];

return (
  <ul>
    {users.map((name, index) => (
      <li key={index}>{name}</li>
    ))}
  </ul>
);

Key Point:

• key helps React track changes in lists.
• Avoid using the index as the key if the list items can change order.

3. React.memo

React.memo is a higher-order component that memoizes a component, preventing re-render unless props change.

const UserCard = React.memo(function UserCard({ user }) {
  return <div>{user.name}</div>;
});

Key Point:

• Use React.memo when:
  • Component renders often with same props
  • Component is pure and stateless
• Combine with useCallback / useMemo for best result

4. useMemo

useMemo memoizes the result of a computation between renders.

const sortedData = useMemo(() => sortUsers(users), [users]);

Key Point:

• Use for expensive computations.
• Don’t overuse — it adds complexity.

5. useCallback

Memoizes a function to avoid re-creating it on each render.

const handleClick = useCallback(() => {
  doSomething();
}, [dependency]);

Use when:

• You pass functions to memoized children (React.memo)
• You want to optimize render of deeply nested components

6. Lazy Loading & Code Splitting

Split code and load lazily to improve initial load time.

const LazyComponent = React.lazy(() => import('./MyComponent'));

<Suspense fallback={<div>Loading...</div>}>
  <LazyComponent />
</Suspense>

Key Point:

• Requires React.Suspense.
• Improves performance in large apps.

Summary Table

Technique	Purpose	When to Use
React.memo	Prevents re-render if props haven’t changed	For pure functional components that re-render with the same props
useMemo	Memoizes the result of an expensive calculation	When you have heavy computations that depend on specific values
useCallback	Memoizes a function between renders	When passing callbacks to memoized child components (React.memo)
React.lazy	Loads a component lazily (code splitting)	When you want to reduce initial bundle size
Suspense	Fallback UI while loading lazy components	Used with React.lazy or concurrent features
key in lists	Helps React identify which items changed, added, or removed	Always use stable, unique keys (avoid index if list order may change)
Conditional rendering	Renders elements based on conditions	When content should change depending on state or props

Best Practices

Practice	Explanation
Avoid unnecessary state	Don’t store values in state that can be derived from props or other state.
Use stable keys	Always use unique identifiers (like IDs) instead of array index as key.
Break down large components	Split big components into smaller, focused components.
Memoize wisely	Use React.memo, useMemo, useCallback only when profiling shows benefit.
Profile performance	Use React DevTools Profiler to detect unnecessary renders.
Defer non-critical components	Load rarely-used components with React.lazy and Suspense.
Minimize re-renders	Avoid prop changes or state updates that trigger re-renders unnecessarily.