Мемоизация коллбэков в списках react-приложения

[gishab]

Вариант 5: использовать data-id атрибут у компонента Card и во внешнем обработчике просто проверять target и его id.

[lexstile]

Согласен с Вами, справедливо было бы дополнить статью.

[YChebotaev]

Есть очень интересное решение проблем с мемоизацией коллбеков:

import { useCallback, useRef } from 'react';

export const useStableCallback =(fn) => {
  const ref = useRef(fn);

  ref.current = fn;

  return useCallback(
    (...args) => ref.current(...args),
    [],
  );
};

Мемоизированный таким образом коллбек стабилен за все время жизни, но не требует перечисления зависимостей

[lexstile]

Благодарю, интересный способ, на досуге проверю.

[Zukomux]

Ну да и все эти пляски с бубнами только из-за того, что компонент Card криво написан. Все что необходимо это в калбеке onClick вернуть сущность card, ну или id. И все! Проблема решена! Не надо колхозить велосипеды. Всегда смотрите на свою архитектуру. Если вы начинаете что-то городить, это явный признак остановится и пересмотреть текущую реализацию компонентов

[lexstile]

Приведите пример кода при вашем подходе, думаю, многим будет интересно.