Reselect и useMemo особенности использования на примере?

Question

[iordania]

Правильно ли я понимаю, работая с reselect мы можем глобально вынести функцию, а используя useMemo делать соответственно локально в компоненте ?

Объясните пожалуйста на примере ниже в чём преимущественно разница вычислений в useSelector перед useMemo ?
В примере ниже мы избавляемся от лишнего ререндера компонента Items при клике по 3-ей кнопке и не совсем понятно в ч>м преимущество перед useMemo.

import React, { memo, PureComponent } from "react";

import { useSelector, useDispatch } from "react-redux";
import { createSelector } from "reselect";
import { add1, add2, add3 } from "../../store/actions/counter";

const Items = memo(({ items }) => {
  console.log("items rerender");
  return (
    <ul>
      {items.map((item) => (
        <Item item={item} key={item} />
      ))}
    </ul>
  );
});

class Italic extends PureComponent {
  render() {
    return <i>Item</i>;
  }
}

class Item extends PureComponent {
  render() {
    const Tag = this.props.item % 2 ? Italic : "li";
    return <Tag>Item</Tag>;
  }
}

const itemsSelector = createSelector(
  (state) => state.counter.counter1,
  (state) => state.counter.counter2,
  (counter1, counter2) => Array.from(Array(counter1 * counter2).keys())
);

const Reselect = () => {
  const dispatch = useDispatch();
  const items = useSelector(itemsSelector);

  const { counter1, counter2, counter3 } = useSelector(
    (state) => state.counter
  );

  // const items = useMemo(
  //   () => Array.from(Array(counter1 * counter2).keys()),
  //   [counter2, counter1]
  // );

  const handleAddCounter = () => {
    dispatch(add1());
  };
  const handleAddCounter2 = () => {
    dispatch(add2());
  };
  const handleAddCounter3 = () => {
    dispatch(add3());
  };

  return (
    <div>
      <button onClick={handleAddCounter}>Add ({counter1})</button>
      <button onClick={handleAddCounter2}>Add2 ({counter2})</button>
      <button onClick={handleAddCounter3}>Add3 ({counter3})</button>
      <Items items={items} />
    </div>
  );
};

export default Reselect;

Answer 1

[Владимир]

useSelector Это редакс. Если ты данные берешь из редакс, то тебе нужно использовать useSelector. Если тебе нужно вычислять какие то данные прямо в компоненте, тогда useMemo

Это разные хуки, они не взаимозаменяемы, каким образом ты перекрестил у себя их в голове - загадка
в случае
const items = useSelector(itemsSelector);
Ты берешь данные из общего стора
в случае

const items = useMemo(
     () => Array.from(Array(counter1 * counter2).keys()),
     [counter2, counter1]
   );

Вычисляешь прямо в компоненте, на основании других данных, конкретно в твоем примере это тоже данные из стора (counter1 * counter2)
С точки зрения читабельности кода, всю бизнес логику лучше держать поближе друг к другу, и вычислять items в том месте где ты устанавливаешь counter1 и counter2 а результтат читать при помощи useSelector, поэтому первый вариант предпочтителен