This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit a28c5a0:

not sure where all the conflicts are coming from. can you update with main once more please?

not sure where all the conflicts are coming from. can you update with main once more please?

Sure, I have removed the conflicts.

Codecov Report

Base: 96.36% // Head: 91.25% // Decreases project coverage by -5.11% ⚠️

Coverage data is based on head (a28c5a0) compared to base (eab6e2c).
Patch has no changes to coverable lines.

@@            Coverage Diff             @@
##             main    #4738      +/-   ##
==========================================
- Coverage   96.36%   91.25%   -5.11%     
==========================================
  Files          45      110      +65     
  Lines        2281     4116    +1835     
  Branches      640     1057     +417     
==========================================
+ Hits         2198     3756    +1558     
- Misses         80      339     +259     
- Partials        3       21      +18     

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

Thanks for working on this!

I finally got around to do some testing, and I actually think we should not include 'use client' at the top of hooks-only files. First of all, it doesn't really have an effect because the components that use the hooks still needs to include the directive.

Second, having it in the hooks-only files actually hurts in a sense. If you forget to add 'use client' to a component that uses one of these hooks (will be a very common mistake in userland), the default is that you get a nice error message from React:

But if you have 'use client' in the hooks file, you instead get an unreadable build error (I guess because the file is still removed from the SC-bundle):

@TkDodo I think this also means we might want to split any file that has both client components and hooks into two separate ones, like Hydrate.tsx and QueryClientProvider.tsx? So you can use the component as a client component, but still get a nice error message if you try to say use useQueryClient in a nested Server Component somewhere? I think for this PR it's probably fine to just do 'use client' at the top of those files and live with a bad worse error message for a while though, it's all pretty experimental anyway. 😄

I think this also means we might want to split any file that has both client components and hooks into two separate ones, like Hydrate.tsx and QueryClientProvider.tsx?

oh yeah, good idea. I think in v5 the Hydrate is no longer a problem because we have removed the hook already, but it makes sense for QueryClientProvider

I took the liberty of removing the 'use client' from the hooks files again, but didn't split the files, I think we can do that later. I think isRestoring.tsx is another annoying candidate btw:

'use client'
import * as React from 'react'

const IsRestoringContext = React.createContext(false)

export const useIsRestoring = () => React.useContext(IsRestoringContext)
export const IsRestoringProvider = IsRestoringContext.Provider

Any such context/useContext pattern will need to be split into two files to get good error messages for the useContext part..