Selector should be memoize

Atualmente o redux avisa, não sei se por conta do meu Redux Dev Tools ou por causa das configurações básicas do navegador, mas tem um warning avisando que é necessário fazer o seletor memoized, conforme descrito na documentação do redux https://redux.js.org/usage/deriving-data-selectors.

Isso acontece por conta das atualizações/re-renderizações desnecessárias que o useSelector da forma como foi implementado no index.js do componente de Categoria gera. Dado esse quadro eu fiz o seguinte:

1. Criei um seletor próprio com createSelector que recebe o input selector, no caso do items usado em categoria, dentro do itens.js dentro da store/reducers:

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

export const itemsFilteredSelector = createSelector(
  [items, (items, categoryName) => categoryName],
  (items, categoryName) =>
    items.filter((item) => item.category === categoryName)
);

Esse seletor tem a mesma função do useSelector, fazendo o filter necessário. Ele recebe o próprio estado (items) e o prompt externo (categoryName).

O primeiro argumento da função que retorna categoryName dentro do createSelector pode receber tanto _ como o próprio items, pois ela não é usada, mas não funciona sem esse primeiro argumento. Se alguém souber o motivo, adoraria entender.

1. A implementação dentro do index.js de Categoria ficou assim:

function CategoryPage() {
  const { categoryName } = useParams();

  const items = useSelector((state) => {
    return itemsFilteredSelector(state, categoryName);
  });

  return (
    <div>
      <Header />
      <div className={style.items}>
        {items?.map((item, index) => (
          <Item key={index} {...item}>
            {item.title}
          </Item>
        ))}
      </div>
    </div>
  );
}