'use client' is not using the client

[FrancescoSaverioZuppichini]

Summary

I have this component that needs the theme

"use client";

import { useTheme } from "next-themes";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import {
  oneLight,
  oneDark,
} from "react-syntax-highlighter/dist/esm/styles/prism";

const NamedField = ({ name, val }: { name: string; val: any }) => {
  const { theme } = useTheme();
 console.log("Hey")
  return (
    <div>
      <p className="text-xs  text-muted-foreground">{name}</p>
      <div className="text-xs">
        {typeof val === "object" ? (
          <SyntaxHighlighter
            language="json"
            customStyle={{
              lineHeight: "1rem",
              fontSize: "0.75rem",
            }}
            codeTagProps={{
              style: {
                lineHeight: "inherit",
                fontSize: "inherit",
              },
            }}
            style={theme == "dark" ? oneDark : oneLight}
          >
            {JSON.stringify(val, null, 2)}
          </SyntaxHighlighter>
        ) : (
          <p>{val}</p>
        )}
      </div>
    </div>
  );
};

export default NamedField;

but I see the log on the server, what is going on here?

Additional information

No response

Example

No response

[icyJoseph]

There's a big misunderstanding, that's widespread... that client components only render client side... that's not necessarily the case.

• Why do Client Components get SSR'd to HTML? reactwg/server-components#4

Client components, are the components we have worked with, up until now.

The big difference is that Server Components are only rendered Server Side, they do not share their driving JavaScript with the client.

[FrancescoSaverioZuppichini]

Sure, in general is there ONE single way to just render something in the client similar on how it was easily done 5 years ago. I apologies but this is really frustating, like I just want to render something on the client - shouldn't be that hard, such a basic feature

Thank you so much

[FrancescoSaverioZuppichini]

I have issues in general, sometimes I just need to run code in the client expecially when using hooks for context

[FrancescoSaverioZuppichini]

For example I want to have a custom context that providers a react-table but the component is rendered on the server and now it has to transfer to the client (oc it doesn't fully work) a huge react-table object - I mean, how can this be a good idea?

why we don't have use REALLY client to actually fully run something on the client when we decide is needed?

[icyJoseph]

but you can just use the techniques showed above, what's the big fuzz about?

• https://demystifying-rsc.vercel.app/client-components/no-ssr/

And again, the idea with RSC is to not ship anything to do the client, and you label things with the use client to create bundle that can be ship to the browser.

[FrancescoSaverioZuppichini]

Still getting the same error

const JSONField = ({ val }: { val: any }) => {
  const { theme } = useTheme();
  const [isServer, setServer] = useState(true);
  useEffect(() => setServer(!isServer), []);

  return (
    <>
      {theme && (
        <SyntaxHighlighter
          language="json"
          lineProps={{
            style: { wordBreak: "break-all", whiteSpace: "pre-wrap" },
          }}
          wrapLines={true}
          customStyle={{
            lineHeight: "1rem",
            fontSize: "0.75rem",
          }}
          codeTagProps={{
            style: {
              lineHeight: "inherit",
              fontSize: "inherit",
            },
          }}
          style={theme == "dark" ? oneDark : oneLight}
        >
          {JSON.stringify(val, null, 2)}
        </SyntaxHighlighter>
      )}
    </>
  );
};

Sorry about the big fuzz and thank you again for the help, but this is one of the most confusing thing I've encountered so far and I usually do machine learning 😅

[deepakTru]

Hi, @FrancescoSaverioZuppichini
Are you still facing the same?
If yes, then you are not alone 😂😂. I'm also experiencing the same weird case.

Anyone help would be appreciable.
Thanks in Advance

Code:

{currentStore.storeEComStatus == 'true' && ( <div className="flex gap-[30px] flex-col xs:flex-row md:flex-col mdtab:flex-row md:mb-[30px] "> <div className="flex justify-center md:justify-start items-center "> <label className="text-[16px] font-bold mr-[10px] leading-[1.7]"> Qty </label> <div className="h-[50px] px-[18px] w-full xs:w-[150px] justify-between flex items-center border border-[#d6d6d6] rounded-[25px]"> <Button variant={'outline'} onClick={cartDecrement} className=" h-auto transition-none before:hidden hove:text-[#000] border-none p-0" disabled={!productStockDetail.isInStock || itemQuantity == 1} > <Image src="/images/decrement.svg" width={14} height={13} alt="" /> </Button> <Input aria-label="Select Quantity" value={itemQuantity?.toString()} type="text" className="[&>input]:bg-[white] text-center [&>input]:pl-0 [&>input]:py-[9px] border-none p-0 justify-center [&>*:first-child]:text-center [&>*:first-child]:text-[16px] [&>*:first-child]:leading-1 [&>*:first-child]:w-full [&>input]:px-0" onChange={onChangeQuantity} onBlur={() => { !itemQuantity && setItemQuantity(1); }} disabled={!productStockDetail.isInStock} maxLength={3} /> <Button variant={'outline'} onClick={cartIncrement} className="h-auto transition-none before:hidden hove:text-[#000] border-none p-0" disabled={!productStockDetail.isInStock} > <Image src="/images/increment.svg" width={14} height={16} alt="" /> </Button> </div> </div> <Button className="h-[50px] flex-1 py-[10px] px-[20px] font-bold text-[16px] uppercase rounded-[25px]" onClick={() => handleAddToCart(productData, itemQuantity!)} disabled={ !productStockDetail.isInStock || !itemQuantity || addToCartButtonText } > {addToCartButtonText ? 'Adding...' : 'Add to Cart'} </Button> </div> )}

  Even i've specified `use client;` at top of the page and using multiple hooks in same component, but this specific section is still throwing hydration issues.