React.Js useDebugValue() Kullanımı

React.Js useDebugValue() Kullanımı

useDebugValue()

useDebugValue React'ta bir hook'tur ve özellikle özel hook'lar geliştirirken kullanılır. Bu hook, React DevTools'ta özel hook'un içerdiği değeri göstermek için kullanılır. Bu sayede, özel hook'un ne yaptığına dair daha fazla bilgi edinilebilir, bu da debug işlemini kolaylaştırır.

Kullanımı

useDebugValue'in temel kullanımı oldukça basittir:

useDebugValue(value);

• value: DevTools'ta gösterilecek değer.

Bu hook genellikle özel hook'un içinde, hook'un döndüreceği değeri veya durumunu göstermek için kullanılır.

Örnek

import { useState, useDebugValue } from 'react';
function useCustomHook(initialValue) {
const [value, setValue] = useState(initialValue);
// DevTools'ta gösterilecek değer
useDebugValue(value);
return [value, setValue];
}

Bu örnekte, useCustomHook adlı bir özel hook oluşturulmuş ve useDebugValue ile bu hook'un mevcut değeri DevTools'ta gösterilecek şekilde ayarlanmıştır.

Dikkat Edilmesi Gerekenler

• useDebugValue yalnızca debug amaçlıdır ve uygulamanın işleyişini etkilemez.
• Bu hook, yalnızca React DevTools ile birlikte çalışır.
• useDebugValue'in bir performans maliyeti olabilir, özellikle de pahalı hesaplamalar yapılıyorsa. Bu durumda, ikinci bir parametre olarak bir format fonksiyonu verilebilir, bu fonksiyon yalnızca DevTools açıkken çalışır.

useDebugValue(value, value => value.toString());

useDebugValue, özel hook'lar geliştirirken ve debug işlemleri sırasında oldukça yararlı olabilir. Ancak, bu hook'un yalnızca geliştirme aşamasında kullanılması ve uygulamanın işleyişini etkilemediği unutulmamalıdır.