What are the best practices to prevent memory leaks in React?

What are the best practices to prevent memory leaks in React?

To prevent memory leaks in React, you should clean up subscriptions and asynchronous tasks in the useEffect hook.

Can you give me an example of cleaning up a subscription?

Sure! If you're using a WebSocket, you can close the connection in the cleanup function of useEffect like this:

useEffect(() => {
  const socket = new WebSocket('ws://example.com');
  
  return () => {
    socket.close();
  };
}, []);

What about event listeners?

For event listeners, you can remove them in the cleanup function as well. Here's an example:

useEffect(() => {
  const handleResize = () => {
    console.log('Window resized');
  };
  window.addEventListener('resize', handleResize);
  
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []);

Are there any tools to help detect memory leaks?

Yes, you can use tools like Chrome DevTools to monitor memory usage and identify potential leaks in your React application.