<!--
title: Optimize React hooks
domain: app-frameworks
topic: React
language: JSX
source: mastodon/mastodon
updated: 2025-01-24
url: https://awesomereviewers.com/reviewers/mastodon-optimize-react-hooks/
-->

Avoid unnecessary useCallback and useEffect dependencies to improve performance and code clarity. When event handlers are only used within a useEffect, define them locally inside the effect rather than using useCallback. This eliminates the need for the callback hook and reduces re-renders. Additionally, understand that refs don't need to be included in useEffect dependency arrays since they maintain stable references across renders.

Example of optimization:
```javascript
// Instead of this:
const handleDocumentClick = useCallback(() => {
  onClose();
}, [onClose]);

useEffect(() => {
  document.addEventListener('click', handleDocumentClick);
  return () => document.removeEventListener('click', handleDocumentClick);
}, [handleDocumentClick]);

// Do this:
useEffect(() => {
  const handleDocumentClick = () => {
    onClose();
  };
  
  document.addEventListener('click', handleDocumentClick);
  return () => document.removeEventListener('click', handleDocumentClick);
}, [onClose]); // refs like nodeRef don't need to be dependencies
```

This approach reduces unnecessary re-renders and makes the code more readable by keeping related logic together.