Skip to content

Unexpected behaviors of the plugin #17

@ZilvinasAbr

Description

@ZilvinasAbr

Hi, I tried to play around with your eslint plugin and found some unexpected behavior.

Here's a case for which the eslint plugin decided to add "use client" directive:

"use client";

import { AnotherServerComponent } from "./AnotherServerComponent";

export const SomeServerComponent = async ({
  someOtherRenderFunction
}) => {
  const usageOfAwait = await someAsyncFunction();

  return (
    <AnotherServerComponent
      renderFunction={(props) => <AnotherServerComponent {...props} />}
      someOtherRenderFunction={someOtherRenderFunction}
      someProp={usageOfAwait}
    />
  );
};

I wonder, why in such case the plugin decided to add the "use client" directive? My guesses:

  1. The component takes a function as a prop someOtherRenderFunction. But in this case, this is not a reason to assume that the component is a client component: server components can take functions as props.
  2. The component passes a function someOtherRenderFunction to child component. But in this case, that child component is also a server component, so it is ok to pass functions from one server component to another server component.

Also, interestingly, in this case I posted, the component in the file is actually an async react component, and those are not even supported in client-side by React.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions