I am working on a styling library. This adds the following decorator function for components:

const Component = withStyles(() => <span>My Component</span>);

I want to make this work with NextJS's implementation of RSC.

On the client, the helper needs to know when the component is unmounted so that it can remove un-used styles. This is done with useEffect.

This is fine when the user is using the "use client" directive, but when they are using server components, the following error is given:

You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.

I could solve this by exporting a useServerStyles but this is bad DX as the user needs to understand when to use which function introducing room for bugs when using the wrong one.

Anyone got any ideas how I can get around this?