Repository: react
Issue: Bug: Unexpected render
Labels: Type: Bug

<!--
  Please provide a clear and concise description of what the bug is. Include
  screenshots if needed. Please test using the latest version of the relevant
  React packages to make sure your issue has not already been fixed.
-->

https://stackoverflow.com/questions/60345064/react-hooks-rendering-cause

I'm playing with simple React components to understand when rendering occurs.


## The current behavior

[Sample 1][1] - Initially renders once. Regardless of the number of times the button is clicked, it doesn't render. This is expected.

    import React, { useState } from "react";
    import "./styles.css";
    
    export default function App() {
      const [state, setState] = useState([
        { id: 1, name: "test1" },
        { id: 2, name: "test2" }
      ]);
      const onClick = () => setState(data => data);
      console.log("App rendered");
      return (
        <div className="App">
          <h1>Test if setting same data causes re-rendering</h1>
          <button onClick={onClick}>Call setState with same data</button>
          {state.map(({ id, name }) => (
            <p key={id}>{name}</p>
          ))}
        </div>
      );
    }


[Sample 2][2] - Initially renders twice since `useEffect` updates `setMessages` with a value. This is expected. However, if the button is click 1+ times, it renders once. It shouldn't even re-render since the same value is being set. **Why is it rendering if no new value / reference is being updated?**

    import React, { useState, useEffect, useMemo, useCallback } from "react";
    import axios from "axios";
    import "./styles.css";
    
    const days = [
      "Sunday",
      "Monday",
      "Tuesday",
      "Wednesday",
      "Thursday",
      "Friday",
      "Saturday"
    ];
    export default function App() {
      const [messages, setMessages] = useState([]);
      useEffect(() => {
        axios
          .get(`https://api.myjson.com/bins/10xva4`)
          .then(({ data: { messages } }) => setMessages(messages));
      }, []);
      const Display = useMemo(
        () =>
          messages.map(({ content, senderUuid, sentAt }, index) => {
            let d = new Date(sentAt);
            return (
              <div className="container" key={index}>
                <p>Content: {content}</p>
                <p>SenderUuid: {senderUuid}</p>
                <p>DayOfTheWeek: {d.getDate()}</p>
                <p>Month: {d.getMonth()}</p>
                <p>Day: {days[d.getDay()]}</p>
                <p>Year: {d.getFullYear()}</p>
              </div>
            );
          }),
        [messages]
      );
      const onClick = useCallback(() => setMessages(messages => messages), []);
      console.log("App rendered");
      // console.log({ messages });
      return useMemo(
        () => (
          <div className="App">
            <button onClick={onClick}>Call setMessages with same data</button>
            {Display}
          </div>
        ),
        [Display, onClick]
      );
    }


  [1]: https://codesandbox.io/s/testing-rendering-bo9bp
  [2]: https://codesandbox.io/s/call-api-with-useeffect-vlo34

<!--
  Your bug will get fixed much faster if we can run your code and it doesn't
  have dependencies other than React. Issues without reproduction steps or
  code examples may be immediately closed as not actionable.
-->

## The expected behavior

Should not re-render if no new value or reference is updated.