Repository: next.js
Issue: prefetching and setStating. Next 13 App
Labels: bug

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

What's the point of fetching something on the server side, if you'll need useEffect to setState your data?

Problem: I want to authenticate user in a SSR mode (server component) to preload Profile component on the Navbar without spinners or disappearing "Login" button.

So, I'm fetching data from the server component and passing it to a client component. And this works.. Almost. 

In a dev enviroment you'll get a bunch of errors sometimes after refreshing page
**app-index.js?d705:32 Warning: Text content did not match. Server: "Admin" Client: "Settings"** 
**Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.**
**on-recoverable-error.js?eb92:21 Uncaught Error: Text content does not match server-rendered HTML.**
**Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.**

It happens due to the setState in a Profile component that receives a prop from Server component with prefetched data. Of course I can just wrap setState in a useEffect and everything will work fine, but it will setState after component was mounted and user will see "Login" button before that. Also, it's not primarily Next issue due to the useEffect nature — even in SSR mode it will run in client mode.

Note: I cannot initialize a state with prop parameter, because I need state to be globally available.

Playing with Server components I've also noticed a problem when I needed to update profile state after a graphql mutation. When you mutate state you can refetch a query with Apollo refetchQueries. The problem is that state will run twice in different locations and it will trigger React error  if your setState is not wrapped around useEffect. Also, this error prevents state update.

**Error: Cannot update a component while rendering a different component warning**.

But it is easily solvable by making naked setState inside a component run only once at SSR time:

implementation example.

```
  if (count === 0) {
    setUser(authenticate);
    setCount((prev) => prev + 1);
  }

  useEffect(() => {
    if (count > 0) {
      setUser(authenticate);
    }
  }, [authenticate]);


```
Second issue is fixed, but the first issue still persists and occurs sometimes. I want to hear feedback about that from you, since you are trying to make web faster. Maybe, I'm just missing something? 

Keep in mind that setStating inside a component is a long time supported pattern.

Thanks.
```


### Which area(s) of Next.js are affected? (leave empty if unsure)

_No response_

### Link to the code that reproduces this issue or a replay of the bug

I will make a reproduction if you'll be interested in looking deep to it. (don't have time right now))

### To Reproduce

Fetch data from server component and pass it to a client.

Two components have to be on your screen, one of them has setState on initial render, the other one just uses globally available state. When you are making changes — you'll get an error due to the setState before component updates.

### Describe the Bug

I've already provided error messages and description.

### Expected Behavior

I want to get a SSR HOC Auth without spinners.

### Which browser are you using? (if relevant)

Latest Chrome

### How are you deploying your application? (if relevant)

Dev mode.