🔨 Корисні інструменти своїми руками🔨

💡Покажу вам такий маленький, але досить корисний мікро-хук, який дозволяє наочно бачити, чи працює ваш хук useCallback, чи ні. Він може стати в нагоді, якщо ви вирішили оптимізувати код за допомогою фіксації колбеків (які ми, до речі, вже розбирали на цьому відео)

const useTrackCallback = (
  callback,
  { callbackName = null, logWhenStable = true } = {}
) => {
  const cbRef = useRef(callback);
  const changed = cbRef.current !== callback;
  const cbName = callbackName ?? callback.name ?? 'unkown';

  if (changed) {
    cbRef.current = callback;
    console.log(`Callback "${cbName}" changed`);
    return;
  }

  if (logWhenStable) {
    console.log(`Callback "${cbName}" stable`);
  }
};

☺️ Як бачите, хук не складний. Він використовує хук useRef (до-речі, якщо вам цікаво про цей хук почути - напишіть в коментарі) для зберігання поточної версії колбеку і порівнює його з наступною. Якщо посилання різні, хук логує інформацію в консоль.

😺 Звісно його можна ще допрацювати, щоб, він наприклад, ніколи не працював на проді, але це вже не обов'язково.

🔨 Також аналогічний хук можна написати для того, щоб відслідковувати перерендери, яких за вашим розуміння не має бути. Можете несподівано дізнатися багато корисного і про React і про те, як поводить себе ваш застосунок в цілому.

@reactbeginners

П.М З цим новим лого ледь знайшов свій власний канал. В червоний його перефарбувати, чи що?