React dünyasında geliştirmelere başlamak isteyen herkesin en az bir kez karşılaştığı bir konu vardır: React Hook'ları. Bu küçük ama güçlü fonksiyonlar, modern JavaScript uygulamalarının temel yapı taşlarından biri haline geldi. React Hook'ları sayesinde daha temiz, yönetilebilir ve daha performanslı uygulamalar geliştirebiliyoruz. Ancak, yalnızca temel kullanımın ötesine geçmek, kullanıcı deneyimini iyileştirmek için çok daha fazla fırsat sunuyor.
Bu yazıda, React Hook'larının derinliklerine inerek, kullanıcı deneyimini iyileştirecek pratik ipuçları sunacağız. Öyleyse gelin, React uygulamalarını bir üst seviyeye taşımak için hangi yaratıcı yaklaşımları kullanabileceğimizi keşfedelim!
1. Performans Optimizasyonları: Render'ları Kontrol Altına Almak
- React.memo: Bu Hoo, bileşenlerin yalnızca props'ları değiştiğinde yeniden render edilmesini sağlar. Yani, eğer bir bileşen her zaman aynı verilerle render ediliyorsa, gereksiz işlemlerden kaçınabilirsiniz.
- useMemo: Hesaplamalı işlemleri yalnızca gerekli olduğunda yeniden hesaplamak için kullanılır. Bu, özellikle karmaşık hesaplamaların bulunduğu durumlarda önemli bir optimizasyon sağlar.
Örnek:
const MemoizedComponent = React.memo(({ value }) => {
console.log("Bileşen yeniden render edildi!");
return {value};
});
2. Custom Hook'lar ile Kendi Bileşenlerinizi Yaratın
Örneğin, bir useForm Hook'u ile form verilerinizi yönetebilir, input validasyonu ve form submit işlemleri gibi adımları kolayca kontrol edebilirsiniz.
Örnek:
function useForm(initialState) {
const [state, setState] = useState(initialState);
const handleChange = (e) => {
const { name, value } = e.target;
setState((prev) => ({ ...prev, [name]: value }));
};
return {
state,
handleChange
};
}
3. Asenkron Veri Yönetimi: useEffect ve useReducer
Örnek:
function dataReducer(state, action) {
switch (action.type) {
case 'FETCH_SUCCESS':
return { ...state, data: action.payload, loading: false };
case 'FETCH_ERROR':
return { ...state, error: action.payload, loading: false };
default:
return state;
}
}
function useFetchData(url) {
const [state, dispatch] = useReducer(dataReducer, { data: null, loading: true, error: null });
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch(url);
const data = await response.json();
dispatch({ type: 'FETCH_SUCCESS', payload: data });
} catch (error) {
dispatch({ type: 'FETCH_ERROR', payload: error });
}
};
fetchData();
}, [url]);
return state;
}
4. Karmaşık Form Yönetimi: useState ve useEffect İle Dinamik Formlar
Örnek:
function useDynamicForm(initialValues) {
const [formData, setFormData] = useState(initialValues);
useEffect(() => {
// Örnek olarak, bir input değiştiğinde başka bir input'u etkileme
if (formData.name === 'John') {
setFormData((prev) => ({ ...prev, greeting: 'Hello John' }));
}
}, [formData.name]);
return [formData, setFormData];
}
5. Geriye Dönük Performans İyileştirmeleri İçin useCallback
Örnek:
const handleClick = useCallback(() => {
console.log("Button clicked!");
}, []); // Boş bağımlılık dizisi ile yalnızca ilk render'da oluşturulur
---
