In react functional component, the docs specify that updating state to a value identical to the previous state, will not cause a re-render (https://reactjs.org/docs/hooks-reference.html#bailing-out-of-a-state-update)

If you update a State Hook to the same value as the current state, React will bail out without rendering the children or firing effects. (React uses the Object.is comparison algorithm.)

In this piece of code here -

const App = () => {
    const [resourceType, setResourceType] = useState('posts');
    
    console.log('abc');
    
    return (
        <>
            <button onClick={() => setResourceType('posts')}>posts</button>
            <button onClick={() => setResourceType('users')}>users</button>
            <button onClick={() => setResourceType('comments')}>comments</button>
            <h2>{resourceType}</h2>
        </>
    );
}

When I go on clicking different buttons I can see abc for every different button click in the console which is correct as the resourceType is getting changed and the page re-renders. However, when I click on the same button for the second time I can still see the abc getting logged in the console which is weird as the docs mention that setting the same value as the current state won't cause the re-render.

And to my amazement when I click the same button thrice or even more times the abc isn't logged anymore as if someone told him that it's not his turn. Can anyone help me with that behaviour of react?