Skip to content

Conversation

@AntonGreger
Copy link
Contributor

Description

This PR memoizes the leave callback in the useEcho hook using useCallback to prevent unnecessary re-renders and improve performance when the function is passed to child components or used in dependency arrays.

Example: Avoiding Unnecessary Re-renders

With the previous implementation, using leave in a useEffect dependency array would cause the effect to run on every render because a new function reference was created each time:

function MyComponent() {
  const { leave } = useEcho('my-channel', 'event', callback, []);
  
  useEffect(() => {
    // Cleanup handler that uses leave
    return () => {
      leave(); // This effect runs on EVERY render because leave is a new function each time
    };
  }, [leave]); // ❌ leave reference changes every render
  
  return <div>My Component</div>;
}

With this PR, the memoized leave function maintains a stable reference (unless dependencies change), preventing unnecessary effect re-runs:

function MyComponent() {
  const { leave } = useEcho('my-channel', 'event', callback, []);
  
  useEffect(() => {
    // Cleanup handler that uses leave
    return () => {
      leave(); // Effect only runs when dependencies actually change
    };
  }, [leave]); // ✅ leave reference is stable
  
  return <div>My Component</div>;
}

@joetannenbaum joetannenbaum merged commit 3c0d3de into laravel:2.x Oct 31, 2025
5 checks passed
@joetannenbaum
Copy link
Contributor

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants