Ensure all hooks (useEffect, useCallback, useMemo) explicitly list every dependency used within their callback functions. Missing dependencies can lead to stale closures, unexpected behaviors, and hard-to-debug issues.
Ensure all hooks (useEffect, useCallback, useMemo) explicitly list every dependency used within their callback functions. Missing dependencies can lead to stale closures, unexpected behaviors, and hard-to-debug issues.
Example of proper dependency management:
// ❌ Incomplete dependencies
useEffect(() => {
if (textareaRef.current) {
const finalValue = domValue || localStorageInput || "";
setInput(finalValue);
adjustHeight();
}
}, []); // Missing localStorageInput and setInput
// ✅ Complete dependencies
useEffect(() => {
if (textareaRef.current) {
const finalValue = domValue || localStorageInput || "";
setInput(finalValue);
adjustHeight();
}
}, [localStorageInput, setInput]);
// Same applies for useCallback
const handleAction = useCallback(
async (index: number, action: string) => {
const item = items[index];
if (!item) return;
onAction(item);
refreshData();
},
[items, onAction, refreshData] // List all used dependencies
);
Key points:
Enter the URL of a public GitHub repository