In this lesson, we’ll learn how to:

• Use memoized selectors with Reselect
• Avoid unnecessary re-renders
• Improve performance with smart component splitting

These techniques help your app stay fast, efficient, and scalable.

🎯 Why Optimize Performance?

Every time a Redux state changes:

• Components that use that state will re-render.
• But sometimes, components re-render even when they don’t need to.

This becomes problematic when:

• There are many components on the page
• Data structures are large
• State changes frequently

So, we optimize to: ✅ Reduce wasted renders ✅ Improve responsiveness ✅ Scale the UI smoothly

🔍 Memoized Selectors with Reselect

What is a Selector?

A selector is a function that reads data from your Redux store:

const selectPokemon = (state) => state.pokemon.items;

But sometimes, we need derived data, such as filtered or sorted lists. If we compute derived data inside components, it re-computes on every render, even if data didn’t change.

✅ Solution: reselect

Reselect allows us to cache derived values using memoization.

Install:

npm install reselect

Create a selector:

import { createSelector } from "reselect";

const selectPokemon = (state) => state.pokemon.items;

export const selectFilteredPokemon = createSelector(
  [selectPokemon],
  (items) => items.filter((p) => p.name.startsWith("a"))
);

Result:

• If items hasn’t changed → cached result is reused
• The UI does not re-render unnecessarily

🧠 Avoiding Unnecessary Re-renders

Even with Redux Toolkit, re-renders can happen when:

• The component selects too much state
• Parent components re-render and push new props down
• Functions are created inline on every render

Tips to avoid re-renders:

✅ Select only what the component needs:

const name = useSelector((state) => state.user.name);

Instead of:

const user = useSelector((state) => state.user);

✅ Wrap handlers in useCallback

const handleClick = useCallback(() => {
  dispatch(fetchPokemon());
}, [dispatch]);

🧩 Component Splitting (Smart UI Structure)

Another key optimization technique is splitting components so only the part that depends on Redux state re-renders.

Example:

Instead of:

function PokemonList() {
  const { items, status } = useSelector((state) => state.pokemon);

  return (
    <div>
      <p>Status: {status}</p>
      <ul>
        {items.map((p) => (
          <li key={p.name}>{p.name}</li>
        ))}
      </ul>
    </div>
  );
}

Split into smaller components:

function PokemonStatus() {
  const status = useSelector((state) => state.pokemon.status);
  return <p>Status: {status}</p>;
}

function PokemonListItems() {
  const items = useSelector((state) => state.pokemon.items);
  return (
    <ul>
      {items.map((p) => (
        <li key={p.name}>{p.name}</li>
      ))}
    </ul>
  );
}

Now:

• When status changes → only PokemonStatus updates
• When items changes → only PokemonListItems updates
• UI is more efficient and easier to maintain

🎯 Summary

Performance optimization ensures your app stays smooth and scalable as it grows.