ts the interval.  
    
    
      // ...  
    
    
    }

Since ` count ` is a reactive value, it must be specified in the list of
dependencies. However, that causes the Effect to cleanup and setup again every
time the ` count ` changes. This is not ideal.

To fix this, [ pass the ` c => c + 1 ` state updater
](/reference/react/useState#updating-state-based-on-the-previous-state) to `
setCount ` :

App.js

App.js

Reset  [ Fork
](https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-
react-app "Open in CodeSandbox")

    
    
    import { useState, useEffect } from 'react';
    
    export default function Counter() {
      const [count, setCount] = useState(0);
    
      useEffect(() => {
        const intervalId = setInterval(() => {
          setCount(c => c + 1); // ✅ Pass a state updater
        }, 1000);
        return () => clearInterval(intervalId);
      }, []); // ✅ Now count is not a dependency
    
      return <h1>{count}</h1>;
    }
    
    

Now that you’re passing ` c => c + 1 ` instead of ` count + 1 ` , [ your
Effect no longer needs to depend on ` count ` . ](/learn/removing-effect-
dependencies#are-you-reading-some-state-to-calculate-the-next-state) As a
result of this fix, it won’t need to cleanup and setup the interval again
every time the ` count ` changes.

* * *

###  Removing unnecessary object dependencies

If your Effect depends on an object or a function created during rendering, it
might run too often. For example, this Effect re-connects after every render
because the ` options ` object is [ different for every render:
](/learn/removing-effect-dependencies#does-some-reactive-value-change-
unintentionally)

    
    
    const serverUrl = 'https://localhost:1234';  
    
    
      
    
    
    function ChatRoom({ roomId }) {  
    
    
      const [message, setMessage] = useState('');  
    
    
      
    
    
      const options = { // 🚩 This object is created from scratch on every re-render  
    
    
        serverUrl: serverUrl,  
    
    
        roomId: roomId  
    
    
      };  
    
    
      
    
    
      useEffect(() => {  
    
    
        const connection = createConnection(options); // It's used inside the Effect  
    
    
        connection.connect();  
    
    
        return () => connection.disconnect();  
    
    
      }, [options]); // 🚩 As a result, these dependencies are always different on a re-render  
    
    
      // ...

Avoid using an object created during rendering as a dependency. Instead,
create the object inside the Effect:

App.js  chat.js

App.js

Reset  [ Fork
](https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-
react-app "Open in CodeSandbox")

    
    
    import { useState, useEffect } from 'react';
    import { createConnection } from './chat.js';
    
    const serverUrl = 'https://localhost:1234';
    
    function ChatRoom({ roomId }) {
      const [message, setMessage] = useState('');
    
      useEffect(() => {
        const options = {
          serverUrl: serverUrl,
          roomId: roomId
        };
        const connection = createConnection(options);
        connection.connect();
        return () => connection.disconnect();
      }, [roomId]);
    
      return (
        <>
          <h1>Welcome to the {roomId} room!</h1>
          <input value={message} onChange={e => setMessage(e.target.value)} />
        </>
      );
    }
    
    export default function App() {
      const [roomId, setRoomId] = useState('general');
      return (
        <>
          <label>
            Choose the chat room:{' '}
            <select
              value={roomId}
              onChange={e => setRoomId(e.target.value)}
            >
              <option value="general">general</option>
              <option value="travel">travel</option>
              <option value="music">music</option>
            </select>
          </label>
          <hr />
          <ChatRoom roomId={roomId} />