DreamOctober8

Формулировка вопроса какая-то расплывчатая. Непонятно, о каком количестве повторяющихся элементов идёт речь - взятых в единственном экземпляре, или с учётом повторений. Т.е., каким должен быть результат для, например, такого массива - [ 7, 7, 7, 0, 1, 1 ]? В первом случае 2 - повторяются семёрка и единица, во втором 5 - три семёрки плюс две единицы.

Количество уникальных дубликатов:

const duplicateCount = Object
  .values(arr.reduce((acc, n) => (acc[n] = (acc[n] || 0) + 1, acc), {}))
  .filter(n => n > 1)
  .length;

// или

const duplicateCount = Array
  .from(arr.reduce((acc, n) => acc.set(n, acc.has(n)), new Map).values())
  .reduce((acc, n) => acc + n, 0);

// или

const duplicateCount = new Set(arr.filter((n, i, a) => i !== a.indexOf(n))).size;

С учётом повторений:

const duplicateCount = Object
  .values(arr.reduce((acc, n) => (acc[n] = acc.hasOwnProperty(n), acc), {}))
  .reduce((acc, n) => acc - !n, arr.length);

// или

const duplicateCount = Array
  .from(arr.reduce((acc, n) => acc.set(n, -~acc.get(n)), new Map).values())
  .reduce((acc, n) => acc + (n > 1) * n, 0);

// или

const duplicateCount = arr
  .filter((n, i, a) => a.indexOf(n) !== a.lastIndexOf(n))
  .length;

С ГитХаба

function getNoun(number, one, two, five) {
    let n = Math.abs(number);
    n %= 100;
    if (n >= 5 && n <= 20) {
      return five;
    }
    n %= 10;
    if (n === 1) {
      return one;
    }
    if (n >= 2 && n <= 4) {
      return two;
    }
    return five;
  }

Используется так:

alert("4 " + getNoun(4, 'слон', 'слона', 'слонов'));

Выведет сообщение 4 слона.

Вы передаете в вызов функции call строку, а она принимает первым аргументом функцию:
call(fn, ...args)
последующие аргументы передаются в вызов функции fn.

useEffect - это хук, который позволяет использовать сайд эффект. В классах его аналогом было использование componentDidMount, componentDidUpdate и componentWillUnmount. В нем можно делать подписки, отправлять запросы управлять анимацией и т. д.

const [data, setData] = useState(null);

useEffect(() => {
  const controller = new AbortController()
  fetchData(controller.signal).then(setData)

  return () => controller.abort()
}, [fetchData, setData])

useCallback и useMemo предназначены для оптимизации. useCallback получает на функцию и массив аргументов, и возвращает одну и туже функцию, до тех пор, пока аргументы не изменились. useMemo отличается тем, что он возвращает не саму функцию, а результат её выполнения. По большому счету они являются взаимозаменямыми.
Таким образом, useMemo используется для сохранения результатов тяжёлых вычислений, например обработка массива.

const data = useMemo(() => array.map(mapper).filter(predicate).reduce(reducer), [array])

А useCallback используется, когда важна постоянность ссылок на функцию. Например, когда мы передаём ссылку в компонент, который использует React.PureComponent или React.memo, или, когда функция используется в качестве аргумента в других хуках

const handler = useCallback(() => {
  // что-то сделать 
}, [])

useEffect(() => {
  handler(value)
  // если не использовать useCallback, эффект будет срабатывать постоянно 
}, [handler, value])

1. useDispatch - получение функции store.dispatch в компоненте. Раньше для вызова action функциональный компонент приходилось оборачивать в вызов connect:

const Foo = ({ dispatch }) => {
  const handler = useCallback(() => {
    dispatch(action());
  }, []);

  return (
    <Bar onClick={handler} />
  );
};

export default connect()(Foo);

Сейчас:

const Foo = () => {
  const dispatch = useDispatch();

  const handler = useCallback(() => {
    dispatch(action());
  }, []);

  return (
    <Bar onClick={handler} />
  );
};

export default Foo;

2. useSelector - маппинг значения из store.
Раньше:

const Foo = ({ value }) => {
  return (
    <Bar value={value} />
  );
};

const mapStateToProps = state => ({
  value: state.value,
});

export default connect(mapStateToProps)(Foo);

const Foo = () => {
  const value = useSelector(state => state.value);

  return (
    <Bar value={value} />
  );
};

export default Foo;

3. useStore - получение store целиком:

const valueSelector = state => state.value;

const Foo = () => {
  const { dispatch, getState, subscribe } = useStore();
  const value = valueSelector(getState());
  
  useEffect(() => subscribe(console.log), []);

  const handler = useCallback(() => {
    dispatch(action());
  }, []);

  return (
    <Bar onClick={handler} value={value} />
  );
};

export default Foo;

Вряд ли useStore вам, действительно, понадобится на практике.

Код довольно простой, тебе останется заголовки нужные добавить и формат данных, если надо.

try {
  const response = await fetch(url, {
    method: 'POST',
    body: formData
  });

  const data = await response.json();

  console.log(data);
}
catch (err) {
  console.error(err.message);
}

{data.clients.map((value, index) => <Table.Cell key={index}>{value}</Table.Cell>)}

либо:

{data.clients.map((value, index) => (
  <Table.Cell key={index}>{value}</Table.Cell>
))}