Does useEffect with props in its dependency array rerun whenever the component renders?

As seen under the useEffect section of the React docs, props should generally be included in useEffect's dependency array:

import { useEffect } from 'react';
import { createConnection } from './chat.js';

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, [serverUrl, roomId]);
  // ...
}

I have read somewhere that the props object passed to a react component always changes on each render. I.e. it is not the same object from one render to the next, even though the object's properties (keys and values) may be the same.

In the example above, assuming roomId was actually an object (and not just a number), does the useEffect not re-run on every render, even if roomId object's keys and values did not change?

Side note: As an end goal, I would like to understand the above so I can run an effect only if my destructured props object's keys and values changed.

While your props object might change with each render, the values used in the effect hook dependencies are compared when determining when to trigger, not any objects they might be part of.

To demonstrate....

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const roomId = { id: 123 };
const props1 = { roomId };
const props2 = { roomId };

console.log("props equal?", props1 === props2); // false
console.log("roomId equal?", props1.roomId === props2.roomId); // true

<!-- end snippet -->

So as long as the same value (or object reference) used in your hook dependencies is present in each render cycle, your effect hook will not re-run.

This is why the react-hooks/exhaustive-deps ESLint rule has a special mention...

> However, 'props' will change when any prop changes, so the preferred fix is to destructure the 'props' object outside of the useEffect call and refer to those specific props inside useEffect.eslint(react-hooks/exhaustive-deps)

If you cannot guarantee object equality, then I would recommend pulling out whatever identifying properties you can

function ChatRoom({ roomId: { id } }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useEffect(() => {
    // ...
  }, [serverUrl, id]);